Create a Newsletter with ExpressionEngine & FieldFrame
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.
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.
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.
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"}">« 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.
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.
I’ve just done almost exactly the same thing for a site I’m working on except I’ve also added a dropdown field to assign different classes to the divs holding articles so that they can have different background colours. You could probably take that further and also have the ability to assign different widths and you could also add in something like nGen’s file field for uploading images.
@John Faulds-
Yeah, I definitely tried to keep it as simple as possible in this demo, but you could definitely add more fields to the FF Matrix like you did.
Out of curiosity, why did you create the dropdown for classes? Were you not just switching back and forth between classes? The FF Matrix does have a switch tag you can use.
I actually am working on a client’s site where I have exactly this same situation – magazine issues with related articles. I found the same original solution that you have; 2 weblogs with the Playa relationship to select the articles for each issue.
Unlike you, however, I think that that original solution is still superior to what you portrayed in this post. It’s certainly more flexible on the author’s end, allowing each article to be managed independently of all the others.
Using FieldFrame certainly organizes the structure of articles-to-issues in a more sensible or logical manner, but IMO it comes with practical disadvantages that outweigh that purely conceptual advantage.
I used dropdowns because it gives the author the ability to assign classes themselves rather than having them cycle through on a regular pattern.
With regards Michael’s comment about using Playa being more flexible on the author’s end; yes it’s more flexible for the author in that a single piece of content can be reused in various ways, but I think it suffers usability-wise.
If your requirements are to create a single newsletter that is used in the same format, then using FF Matrix has the advantage that all the work is done in the one place, on the one edit form.
Using Playa, you have to create multiple entries to achieve the same effect. If a newsletter has lots of small items, that’s a lot of extra clicks the author has to perform.
And if it’s decided that you do want to use certain items from within a FF matrix entry, you could set up additional fields like ’show on home page’ ’show in sidebar’ and then use the search parameter to extract those entries.
@John Faulds-
Gotcha, that makes sense to use the dropdown then.
I agree that there are pros and cons to both solutions that have been discussed. But either way, they are both pretty straightfoward for the author to use. Although using Playa may require a little more explaining than using FF.
I was planning to use exactly the same technique but I need to add more columns to allow for adding an optional thumbnail image (nGen File Field) and ALT text. Unfortunately, that makes a very wide interface, causing a horizontal scrollbar.
Does anyone know if it’s possible to have the FF matrix columns as rows? Or to link thumnsails in a different way?
BTW, the editing buttons in the screenshot, do they work on FF Matrix fields? For me this didn’t work. I’m considering adding an optional textarea custom field for this (so the formatted content can be copy/pasted into a FF Matrix field, not ideal but at least better than nothing)
@Jorix-
No, I haven’t seen any way to change the layout of the FF Matrix. The edit buttons don’t work either, but you could try using a WYSIWYG fieldtype instead of a textarea.