21 - Site Footer

In which we implement the footer of the site - which is a mix of blog posts, tweets, static content and some links.

Our work here is all within the snp_footer snippet. Let’s look at the implementation here in a column by column, left to right approach.

 
Download the EE Code for 21 - Site Footer

Recent Blog Posts
The blog section on this portfolio site is a bit different than most. It’s really a Tumblr-style content area with photos, links, quotes, blog posts, and media clips. We’ve managed to implement that mix of content in the main Blog area nicely but not all of those content types work well in the footer. Rather than puzzle out the other media types I chose to only display actual blog posts.

Here is the EE code that pulls in the most recent blog posts:

<h4>RECENT BLOG POSTS</h4>
{exp:channel:entries channel="blog_post" limit="3" dynamic="no" disable="categories|member_data|pagination"}
    
<div class="recent-post cf">
        
{if blog_post_image !=""}
            
<a href="{url_title_path='blog/post'}" class="thumb"><img src="{blog_post_image:footer}" alt="{title}" /></a>
        
{/if}
        
<div class="post-head">
            <
a href="{url_title_path='blog/post'}">{title}</a><span>{entry_date format="%M %D, %Y"}</span>
        </
div>
    </
div>
{/exp:channel:entries} 

Nothing really new here - just make sure to disable everything you don’t need and set dynamic to no so that EE won’t try to filter this content based on the URL the template is loaded with.

The conditional is a bit of error-trapping to avoid empty HTML being returned if this particular blog post doesn’t have an image asscociated with it.

The image uses the footer manipulation we setup earlier, which should return a 54px version of the blog image.


About
OK - so this content is an odd piece from a management perspective. Should it be an abbreviated version of an entry in our About channel? I’d hate to see truncated content in the footer showing on every page in the site. 

So it needs to be custom-written content for this purpose, but where to store it? A Snippet? Global Variable? Miscellaneous Content channel? Low Variables?

I say..none of the above.

My experience with this sort of “blurbular” content is that once it’s written and in place it will never be changed again. I used to go to great lengths to make all content on a site manageable by the client, but over time have realized a bit of tough love is really better. While managed content is great and is why we are all here learning ExpressionEngine, the less content EE needs to manage the easier things will be for the client and the more efficiently the site will load.

By not making this content managed we have prevented the template from requiring more queries to load so in a way have made a decision to optimize the site for performance.

It’s interesting to me that of all the “how to make your EE site run faster” talks I have seen and blog posts I have read none of them have asked the question “does this content need to be managed?” That question should be part of any performance optmization process.

This is one of those times I will make a decision without necessarily asking the client. If you present a client with the choice to manage or not manage any particular piece of content they will almost always choose to manage it. More control is a more seductive option than a simplified management experience. If the client wants to manage that content in the future it’s an easy enough change down the road.


Recent Tweets
Ah - recent tweets. These seem so “2012” (and keep the comments about how long this series has taken me to write to yourself…) but since the design calls for them let’s look at our options for implementing.

The first option is to use the provided Javascript approach. When the Portfolio HTML was created it looked like all you needed to do was edit the provided html/js/custom.js file to specify the Twitter user name you wanted to retrieve tweets for. When I tried this however I got SSL related errors and it appeared that since the HTML was written Twitter increased its requirements for loading tweets this way.  Rather than puzzle out the SSL requirements I chose to look at using an ExpressionEngine add-on instead.

So - what does the aftermarket offer in the way of Twitter add-ons?

There used to be a 1st party (aka developed by EllisLab) Twitter Timeline add-on, but reading that page the addon was deprecated after an authentication change by Twitter. That page recommends Embedded Timelines straight from Twitter, and while we can keep that as a last-ditch option I don’t care for it. Embedded Timelines assume you want Twitter’s branding and you have to undo the branding to get the list of tweets to fit your design.

I’d rather find a way to use EE template language and have the Tweets naturally fall into our design. Searching around Devot-ee leads to a few other options:

Three possible candidates. How to choose?

First - a disclaimer. While I have not used any of these particular add-ons I do know and have spent a bit time hanging out with Aaron of Causing Effect. I also met one of the Click Rain developers over a meal at the recent ExpressionEngine conference (and spent the night at the WalMart in their home town, but that’s another story…).

I’ll start by looking at the various comments and ratings of add-ons. TGL Twitter hasn’t been updated since 2011 and that’s when the only review was posted as well.  With only 2 votes…I can pretty quickly say this one wouldn’t be my first choice. Following through the links to GitHub I don’t see the “TGL” name either…so I wonder if some job or business changes happened and that makes me nervous to use the code.

EE Twitter is looking better with a release date and positive reviews from 2014.

CE Tweet is the only commercial one of the bunch at $22/license. I have used other CausingEffect add-ons and have needed and gotten timely tech support from Aaron with them.

It really comes down to the free EE Twitter and not-free CE Tweet. I have always been more comfortable with commercial add-ons because I expect that if the developer is making some money from them they are more concerned with their reputation, more likely to keep them updated, and more timely with responding to any support requests.

So in this case if this were for a client site I would prefer CE Tweet. If this were my own site I would give EE Twitter a try.

For our purposes here on Train-ee I’ve used EE Twitter.

Here is what it took to get tweets loading in the footer:

  • Read and follow the instructions on GitHub. I had to add a mobile phone number to my main Twitter account, found that it had already been used on a forgotten test account, so had to resolve that before proceeding.
  • Edit the snp_footer snippet. I added EE Twitter template tags to retrieve and display the tweets.
  • Hook up the styles. I used the styles that came with the Portfolio HTML and specified in jquery.tweet.css.

Here is the revised snp_footer code:

<li class="third-col">
<
div class="widget-block">
<
div id="tweets" class="footer-col tweet">
    <
h4>@BOYINK TWEETS</h4>
    <
ul class="tweet_list">
        
{exp:twitter:user screen_name="boyink" limit="3"}
                
<li>{text}<br />{better_relative_date}</li>
        
{/exp:twitter:user}
    
</ul>
</
div>
</
div>    
</
li


Categories
What to do with the right-column ‘Categories’ links? The blog has categories and the work section uses categories, so what should these link to? Those sections already have other category-based navigation so repeating it in the footer seemed redundant.

I chose to punt and re-created my main navigation links there instead.  Here is that code:

<h4>NAVIGATION</h4>
<
ul>
    <
li class="cat-item"><a href="{site_url}" >Home</a></li>
    <
li class="cat-item"><a href="{path='blog'}" >Blog</a></li>
    <
li class="cat-item"><a href="{path='about'}" >About</a></li>
    <
li class="cat-item"><a href="{path='work'}" >Work</a></li>
    <
li class="cat-item"><a href="{path='contact'}">Contact</a></li>
</
ul

With these changes in place our site footer is fully implemented and it should be working across the entire site.

Category Navigation

<< Previous Entry   

Next Entry >>

 

Add Your Comment

Commenting is not available in this channel entry.

Unless otherwise stated all content is © Michael Boyink of Train-ee.com & Boyink Interactive. Please don't steal - I've got kids to feed...

dy>