10 more really useful ExpressionEngine add-ons and some tips on how you might use them

Posted in Web Design on Tuesday, 20th March 2012 at 5:10AM

10 more really useful ExpressionEngine add-ons and some tips on how you might use them

It's been a year and a half since writing 'My top 10 ExpressionEngine addons' and there have been loads of exciting new add-ons released in that time, so I thought it was time to write a follow-up post to pick out 10 more of my favourites and give a few examples of how I might use them.

Session variables and how to use it as a basic language selector / changer (EE1 & EE2 - Free)

There are several circumstances where having a variable stored between pages over a period of time is a really useful thing.  PHP's session variables do just this and with the EE Session Variable add-on, you don't even need to use PHP in your templates to create, edit or delete them.

A recent project I worked on needed a language selection facility for which session variables seemed the obvious means of retaining the users language choice throughout their site visit.  First I needed to set the language variable which I did via the URL and a Freebie segment eg. www.siblify.com/language/german (see next section for more info on Freebie).  There are actually two freebie segments here, one called language which just defines the URL as containing a language selection and one for the specific language.  The session variable is then set in its own template by allocating the last Freebie segment to a new session variable called 'language'.  Here's what the template would look like.

{exp:session_variables:set name="language" value="{freebie_last}"}

Before I embed the template which sets the language session variable I need to check that the Freebie segment is indeed a language selection and not serving some other purpose  To do this I check that the segment entitled 'language' is present in the URL by using the freebie:any tag.

{if "{exp:freebie:any name="language"}" == "true"}
{embed="embeds/set-language"}
{/if}

Assuming that 'language' is present as one of the segments, a session variable is then created holding the users selected language.

ExpressionEngine language selector

It should now just be a simple case of outputting the relevant field based on the value of the language session variable apart from one slight problem, the variable doesn't kick in for the initial page load, it only works on subsequent loads.  To accommodate this we need to not only check for the session variable but also for a freebie segment containing a language choice on the current page.

<h2>
{if '{exp:freebie:any name="language"}' == "true"}
{if '{freebie_last}' == 'chinese'}{heading_chinese} {if:else} {heading} {/if}
{if:else}
{if '{exp:session_variables:get name='language'}' == 'chinese'}{heading_chinese} {if:else} {heading} {/if}
{/if}
</h2>

So this excerpt of the template first checks to see if the current URL has a language choice and if it does it uses this to set the heading to Chinese.  If there is no language choice in the URL it then checks the session variable and  if this is set to 'chinese' it outputs the Chinese heading accordingly.  If there is no language set then it just defaults to the standard heading.

Freebie  (EE2 – Free)

Freebie by Doug Avery

I have started installing Freebie by Doug Avery regularly on my sites thanks to its numerous potential uses.  Freebie allows you to create safe segments in the URL which are completely ignored by ExpressionEngine which really comes into its own when using Structure with its strict URL structure. 

A couple of ways that I have used Freebie include:

• As part of a site language selector for passing the selected language to the template eg. www.siblify.com/language/french (see above)

• As a user friendly alternative to query strings when using URLs to affect page content.  For instance, if a site is running a special offer that can only be seen from a promotional URL (eg. www.siblify.com?promotion=goodvalue), with Freebie we can make it easier to remember and type (eg. www.siblify.com/goodvalue) without confusing Structure.

• Passing filtering information to the Channels tag.  Freebie allows you to retrieve segments for use in your templates in a similar way to the native {segment_x} variables which means you can use these 'ignored' segments to determine factors such as category or sort field.

Low Yearly Archives (EE1 & EE2 - Free)

Whenever I need to create an archive facility blogs or news sections it seems logical to divide the entries into months and then years, with an indication of how many entries are in each group.  Whilst this isn't possible with the native archive month links tag, Low Yearly Archives makes it really easy.  Once entries have been neatly divided into months and then years, it only takes a bit of jQuery to create an accordion effect which enables quite an extensive archive to be displayed in a relatively compact space.  An example of one I have created can be seen here http://www.newlandchase.com/news_and_blog/blog/

Blog archives on ExpressionEngine

The template code would look something like this:

<div id="monthlyArchive">
<h3>Blog Archive</h3>

{exp:low_yearly_archives channel="blog"  status="not closed" sort="desc" monthsort="desc"}
{if year_count == 1}<ul>{/if}
  <li class="blogYear">
    <a>{year} ({entries_in_year})</a>
     <ul  class="blogMonths" >
    {months}
     
      {if num_entries != 0}
      <li>
       <a>{month} ({num_entries})</a>
           {embed="blog/blog-archive" blogMonth="{month_num}" blogYear="{year}"}
           </li>
      {/if}
     
    {/months}
    </ul>
  </li>
{if year_count == total_years}</ul>{/if}
{/exp:low_yearly_archives}

</div>

Which leaves you with a neatly nested unordered list divided into years and months with corresponding article tallies.

<div id="monthlyArchive">
        <h3>Blog Archive</h3>

        <ul>
            <li class="blogYear">
                <a>2012 (17)</a>

                <ul class="blogMonths">
                    <li>
                        <a>March (1)</a>

                        <ul class="blogTitles">
                            <li><a href="https://www.siblify.com/article">Article title</a></li>
                        </ul>
                    </li>

                    <li>
                        <a>February (3)</a>

                        <ul class="blogTitles">
                            <li><a href="https://www.siblify.com/article">Article title</a></li>

                            <li><a href="https://www.siblify.com/article">Article title</a></li>

                            <li><a href="https://www.siblify.com/article">Article title</a></li>
                        </ul>
                    </li>

                    <li>
                        <a>January 2)</a>

                        <ul class="blogTitles">
                            <li><a href="https://www.siblify.com/article">Article title</a></li>

                            <li><a href="https://www.siblify.com/article">Article title</a></li>
                        </ul>
                    </li>
                </ul>
            </li>

            <li class="blogYear">
                <a>2011 (19)</a>

                <ul class="blogMonths">
                    <li>
                        <a>December (3)</a>

                        <ul class="blogTitles">
                            <li><a href="https://www.siblify.com/article">Article title</a></li>

                            <li><a href="https://www.siblify.com/article">Article title</a></li>

                            <li><a href="https://www.siblify.com/article">Article title</a></li>
                        </ul>
                    </li>

                    <li>
                        <a>November (1)</a>

                        <ul class="blogTitles">
                            <li><a href="https://www.siblify.com/article">Article title</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>

All that's left then is to apply the jQuery accordian effect to create a really neat archive the extends when the user clicks on the year and month headings.

$('#monthlyArchive .blogTitles').not(".monthExtended .blogTitles").hide();
$('#monthlyArchive > ul > li > ul').not("#monthlyArchive > ul > li.extended ul").hide();


$('.blogMonths > li > a').bind({
    mousemove: function (e) {
        $(this).css('cursor', 'pointer');
    },
    click: function () {

        if ($(this).parent().hasClass('monthExtended')) {

            $('.blogTitles').slideUp(200);
            $(this).parent().removeClass('monthExtended');
        } else {
            $('.blogTitles').slideUp(200);
            $('#monthlyArchive li').removeClass('monthExtended');
            $(this).parent().delay(220).addClass('monthExtended').children('.blogTitles').slideDown(200);
        }

    }
});

SEO lite (EE2 - Free)

I initially scoffed a bit at the idea of a separate module to deal with site metadata as I had always just created individual fields to deal with it but since using SEO lite by Bjorn Borresen for the first time I haven't looked back.  Firstly, it is actually much simpler to just install this module and paste the tags into your templates than fussing around with extra fields and conditional statements and secondly it just seems right for the client to edit meta data in a separate tab on the publish page rather than mixing it in with the main content. 

SEO lite for ExpressionEngine

The module itself is really easy to use, you just have a main settings page where you can input site-wide metadata and setup the format of titles etc... (I link to this from the EE main menu) then you have publish page tab for each article where you can change the meta data on a per entry basis.  Simple but very effective.

Twitter timeline (EE1 & EE2 - Free) + Time Ago (EE2 - Free)

From what I can tell, Twitter Timeline is the only viable plugin for server side Twitter integration with EE.  I must say that I have not always found it to be plain sailing and have at times struggled with PHP errors and non-updating timelines, but for the most part it is pretty good.  One issue I did have with it was when a client insisted they wanted their Twitter widget formatted with the time since last Tweet rather than just the date.  This didn't seem to be possible with Twitter Timeline but with a separate plugin called 'Time ago' I managed to get it working.

Tweeting with Time Ago and Twiter Timeline

To have Twitter Timeline tweet dates with Time Ago, you actually need to separate the date into a separate template (not ideal I know!) because otherwise the parse order messes things up.  The basic Twitter timeline tag would look something like this:

{exp:twitter_timeline screen_name="michaelsibley"  limit="1" create_links="user_mentions|hashtags|urls"}
<h3>LATEST TWEET</h3> 
<p class="tweetDate">{embed="embeds/tweet-time" tweetTime="{created_at format="%U"}"}</p>
<p>{text} </p>
{/exp:twitter_timeline}

and then the embedded template that provides the 'time ago' looks like this:

{exp:time_ago parse='inward'}{embed:tweetTime}{/exp:time_ago}

Zoo Flexible Admin (EE2 - $22)

I don't know about you but I always want to present my clients with the least options possible when they log in to avoid any unnecessary confusion.  I am also really keen that new users of a website CMS can get where they need to go quickly and understand where navigational links will take them. 

Zoo Flexible Admin for ExpressionEngine

This is where Zoo Flexible Admin comes in.  It enables you to have complete control over what the main ExpressionEngine navigation looks like on a member group basis.  This means that you can remove links that won't be obvious or useful to your clients (eg. 'Modules') and re-order / rename useful shortcuts into a more user friendly arrangement.  It also allows you to add custom links such as email for help links or external web links that may be of use.

Entry layout (EE2 - $25)

Now that publish layout aren't quite so buggy, they are actually proving to be very useful.  The one thing I find a bit irritating is when an entry needs almost the same set of fields as the rest of it's channel entries but with the addition of just one extra one.  You then have the dilemma of whether to create an entirely new channel just for that entry or to have the extra field showing on all the other entries for which it isn't required.  Entry layout solves this problem very eloquently.  You simply install the extension and you are then provided with the option to save the layout for the entire channel or to save it just for the specific entry.  Brilliant.

Mega Upload (EE2 - $10)

In my last post I outlined a method for adding an upload progress bar to EE1, but with EE2 there's no longer any need thanks to Mega Upload.  Once you've installed the fieldtype you can use it it pretty much the same way as any other file upload field apart from the fact that once you select the file to upload, a progress bar appears to show the user how the upload is going.  Once the upload is complete you just submit the entry as normal.

Mega upload for ExpressionEngine

Low no spam (EE1 & EE2 - Free)

Comment spam is inevitable, unless of course you use 'Low no spam'.  I rarely get any false positives and it saves an awful lot of comment moderating.  Installation is really simple although you do need to register with Askimet in order to get a free API key that is entered into the settings pane.

Stand-alone Member Register (EE1 & EE2 - Free)

It's kind of obvious that when a client requests some sort of user registration form they would prefer it to be styled in the same way as the rest of their site but strangely this isn't possible with the standard EE install.  This great add-on from Yuri Salimovskiy makes it possible to add your registration form to any template and best of all it's free.  He states in the description that you don't get all the bells and whistles of Solspace's 'User', but for the majority of the situations I have been in SAMR has been perfectly adequate.

 

Add your comment

Remember me?

Notify me of follow-up comments?

Hi Michael. Nice little write up of ExpressionEnghine add-ons and how you’ve used them. I was googling for a review of how Zoo Flexible Admin works. Sounds interesting. If only it would let you edit the buttons on the CP homepage too! 

Very interesting usage of session variables to handle multi language sites. I had to do something a little more complicated recently as I was working on site that only had some sections in other languages, so it had to be more of a page by page language switcher. It was a complete headache to be honest so I look forward to being able to do a fully translated site with session variables next time!

I didn’t know about the Twitter add-ons (didn’t think to look) - I’m using a client side embed, I’m sure server side would be better for performance, but at least it was easy to customise (hours ago etc).

I’d forgotten about Low’s yearly archives, and have a need for that on my current project so I’ll be downloading that one.

I disagree about using SEO Lite though. I was also hesitant to use an add-on in place of a couple extra fields. I did try it out but went back to the custom fields for the opposite reasoning to you: I think it is crucial that the Meta description input fields are on the same page as the rest of the content as they are just as important as ‘visible’ content and I want to emphasise this to the client/editor. In fact, I really want to make them required fields, and couldn’t do this with SEO Lite.

Posted by Emily Heath on Tuesday, 1st May 2012 at 9:56AM

Hi Emily,

I’m sure there is a tool to edit the CP buttons somewhere but agree it would be nice if it were built into ZFA. 

I think multi-language sites are generally a headache but I’ve just used this technique on another site and it seems pretty robust if not a bit long winded. There are some pretty good language switchers on Devotee but I just can’t bring myself to pay for them when this is free!

I see what you’re saying regarding the meta data - I hadn’t really thought of that.  I guess if a site is being posted to regularly it probably is best for it to be unavoidable so they do miss out on any SEO benefits.  It depends on the client though…if their site rarely changes and they need the CP to be as simple and uncluttered as possible then I still think there may be a case for SEO lite.

Thanks for taking the time to comment!

Posted by Mike on Tuesday, 1st May 2012 at 4:22PM

Hi. Interesting reading, I am fairly new to web development and especially EE. I’m just reading through your post above about Low Yearly Archives and I have a question about the embed that holds your unordered list of blog posts from a specific month. Can you tell me (or point me in the right direction) of what’s in that embed? I have the everything working as it should but I can’t figure out how you have coded your embed to show only posts from a specific month and year without it being one very, very long conditional. Any help would be appreciated. Thanks. Stephen.

Posted by Stephen O'Connor on Monday, 11th February 2013 at 7:54PM

Hi Stephen. The embed is actually pretty simple.  The channel entries tag has a parameter for ‘month’ and ‘year’ so we can just feed them in using the embed variables like this:

<ul class="blogTitles">
{exp:channel:entries channel="blog"  status="open|hidden|footer" 
dynamic="off"  month="{embed:blogMonth}" year="{embed:blogYear}"}
<li><a href="/blog/article/{url_title}">{title} <span>{entry_date format="%d%S"}</span></a></li>
{/exp:channel:entries}
</ul

Posted by Mike on Monday, 11th February 2013 at 8:38PM

Ah I see, very simple indeed, much simpler than my huge month and year specific {if}! Thanks for your time and help. Stephen.

Posted by Stephen O'Connor on Monday, 11th February 2013 at 9:04PM

Since you opened a comment section on your website, do you feel it is safe to enable users to submit comments?

Posted by Cow on Monday, 9th September 2013 at 9:08AM

Yes - I think it is pretty safe.  The main issue I have found is comment spam but there are some great add-ons to combat this such as Captcha and Freeform anti-spam.

Posted by Mike on Monday, 9th September 2013 at 9:51AM

Michael's Paintings

The High Sierra

The High Sierra
46 x 46 cm
Acrylics, ink and cotton on canvas

Michael's photos

Giant Clam

Giant Clam
Red Sea

Featured Web Project

Newland Chase - home page

Project: Newland Chase
URL: http://www.newlandchase.com/view/ho