I guess it is time to come back from my little hiatus to actually write a blog post. I recently moved, so I have been busy with getting settled and working on freelance projects as well. If you follow me on Twitter, you may have noticed that I have recently become obsessed with ExpressionEngine. I completed a project at work using it, and I realized that I could have done something much more efficiently.

View Demo

I had to create an “online newsletter” that had issues that were made up of multiple articles. I ended up creating two separate weblogs: one for each issue, and one for individual articles. In the issues weblog, there was a Playa custom field which could be used to pick the individual articles to be published in that issue. But, another one of Brandon Kelly’s fabulous extensions, FieldFrame, seems to be a much better choice for creating this functionality.

So, download, install, & enable the FieldFrame Extension, and let’s be on our way.

Creating the Custom Field Group

First, let’s create a field group named Newsletter. Now, we just need to create one custom field with the field name of newsletter_articles. Select FF Matrix as the field type.

We want to have two cells in the FF Matrix: articles_title & articles_body. The cell types should be text and textarea, respectively. Then, adjust the sizes as you see fit.

FF Matrix Configuration

Creating the Weblog

Now that we have the custom field group setup, we need to create a new weblog called newsletter and make sure to assign our Newsletter field group to it. Now that the newsletter weblog is created, we can start adding newsletters.

Newsletter Entry Form

First, fill in the main title field, and then add in one or more articles. Now, let’s get onto coding the output template.

Creating the Template

Let’s start by creating a new template group called newsletter. We have two different pages that we want to create: the page listing all of the newsletter entries, and the individual newsletter entry displaying all of the articles. But, we can do this with only one template.

So, open up the index template in the newsletter template group, and we will start by setting up the structure of the template:

{assign_variable:weblog="newsletter"}
{embed="newsletter/.header" title="{if segment_2}
 {!--Display individual newsletter entry title here--}
{if:else}
 Newsletters
{/if}
"}

{if segment_2}
 {!--Display full individual newsletter entry with 1 or more articles--}
{if:else}
 {!--Display list of newsletters entered--}
{/if}

{embed="newsletter/.footer"} 

We start by creating a variable to store the name of our weblog. Then, I created a simple header and footer to store some of the HTML that frames the page. I am passing in the title value in an embed variable to the header and displaying that in the browser title.

If the segment_2 value is not null, we know that we are on an individual newsletter page, so we will display that title. If the segment_2 value is null, then we are on the main newsletter listing page, so we just display Newsletters.

We are using the same conditional again for the content on the page. We either show the individual newsletter entry with the articles, or we show the list of newsletter entered. So let’s build out the code a little more. First, let’s finish displaying the title:

{embed="newsletter/.header" title="{if segment_2}
 {exp:weblog:entries weblog="{weblog}" limit="1" disable="categories|category_fields|custom_fields|member_data|pagination|trackbacks"}
  {title} : {entry_date format="%F %j, %Y"}
 {/exp:weblog:entries}
{if:else}
 Newsletters
{/if}
"} 

Pretty simple stuff here, just displaying the title and entry date of the newsletter entry. Next, let’s tackle displaying the single newsletter entry view:

{if segment_2}
 {exp:weblog:entries weblog="{weblog}" limit="1" disable="categories|category_fields|custom_fields|member_data|pagination|trackbacks"}
  <h1>{title}: {entry_date format="%F %j, %Y"}</h1>

  {newsletter_articles}
   <div class="entry">
    <h2>{articles_title}</h2>
    {articles_body}
   </div>
  {/newsletter_articles}
 {/exp:weblog:entries}
 <p><a href="{path="newsletter"}">&laquo; Back to Newsletters</a></p> 

The beginning should look pretty normal: just using the standard exp:weblog:entries tag to pull in the individual entry. We first display the title and entry date. Then, the next part is where we are taking advantage of the FieldFrame Matrix. We are basically just looping through all of the newsletter_articles and displaying them in divs.

Finally, let’s finish up by displaying the list of newsletter entries:

{if:else}
 {exp:weblog:entries weblog="{weblog}" disable="categories|category_fields|custom_fields|member_data|pagination|trackbacks"}
  {if count == 1}
   <ul>
  {/if}

   <li><a href="{url_title_path="newsletter"}">{title}: {entry_date format="%F %j, %Y"}</a></li>
  {if count == total_results}
   </ul>
  {/if}
 {/exp:weblog:entries}
{/if} 

Simple stuff again: just looping through all newsletter entries and displaying them in a list. The two conditional statements are so you don’t end up with any empty unordered lists when there are no entries.

View Demo

I wish I would have realized this would have been a more efficient way to build a newsletter in EE for the project; but, this is why always learning is so important.

Create a Newsletter with ExpressionEngine &amp; FieldFrame

Create a Newsletter with ExpressionEngine & FieldFrame