23 - Pulling Events to the Home Page

Continuing with the events theme, this chapter looks at pulling church event information to the site’s home page.  While I’m there I’ll also replace the Mission Statement area with the latest posts from the Weblog, as I don’t think mission statements are the best use of home page real estate - ever.  New coding approaches covered in this chapter include the use of plugins - which will allow the reuse of content while keeping the site design happy.  I’ll also use a new parameter on the weblog entries tag - the start_on parameter.

 
Download the EE Code for 23 - Pulling Events to the Home Page

First, an Editorial Decision
As the template came designed it had left-column space for an event title, short description and an image.  While this is certainly do-able with EE, I’ve decided to eliminate the image.

Why?

Well - past experience.

If I implement an image for events here’s what will happen: the person wanting to get the event posted on the site won’t have an image available, or it will be the wrong size and format, or they will provide a cheesy clip art or Microsoft Word Art abomination that will do nothing but distract from the overall site look and feel.  I’m not sure what it is about the church environment that engenders this sort of “creativity;” but, if I never see a church bulletin or website filled with poor-quality squished and stretched words running in all different directions on the page, it’ll be too soon.

Actually - I’ve already created the opportunity for this situation on the ministry detail pages by allowing images there. For that matter any time a content administrator is allowed in to the EE Control Panel to enter text they’ll usually be able to upload images as well.

Tip: Create Guidelines
Put together some editorial guidelines for the site and go over them with each content contributor.  Schedule regular meetings if need be.  Do whatever it takes to communicate to this group that the intent of the website is to tell the church story, and the God story, in a professional manner to visitors.  Part of doing the job in a high-quality way is to not use low-quality graphics that come out of tools like Microsoft Word. 

If your church is large enough I’d recommend appointing a graphic designer - someone the others can go to when they need some sort of imagery.  The goals here are graphics that are high quality, consistent, and inline with the overall site design.  Also appoint a site editor - someone who has the authority to say “no, sorry” to a cruddy graphic. Think of this person as a gardener - someone with a loving vision for this space but willing to pull weeds, pinch dead leaves, and prune growth that’s heading in the wrong direction.

It won’t be an easy chore - in many churches the leaders of individual departments or ministries are used to generating their own marketing materials and doing so without any kind of guidelines or approval processes.  The results, however, speak for themselves.  Walk through the entryway of many churches and pick up a sample of all the different pieces of literature being set out - and you’ll probably find there is no consistency in colors/fonts/logo treatment, etc.  I’ve seen cases where the church name wasn’t even consistently used.  Church websites are typically no different.  Do what you can to change that.

OK - enough of Mike’s ranting.

Overall Approach

  • Update embeds/events to replace static content with EE code to pull events dynamically
  • Update site/index to replace mission statement with EE code to pull weblog entries


Updating embeds/events
First - remember that I created an embedded template from this code in case I wanted to use it multiple times across the site.  I’m still uncertain if that will happen - so for now I’ll leave it embedded.  If it ends up only being used on the home page I’ll just move the code back to live in site/index again.

Here is the new code -

<div class="events"><!--BEGIN EVENTS SECTION-->
{exp:weblog:entries weblog="events" limit="5" disable="categories|trackbacks|pagination|member_data" 
dynamic="off" start_on="{current_time format='%Y-%m-%d %g:%i %A'}" show_future_entries="yes" sort="asc"}
    
<h4><a href="{url_title_path=events/details}">{title} on {entry_date format="%M %d"&nbsp;@{entry_date format="%g:%i%A"}</a></h4>
        
{exp:word_limit total="10"}{exp:html_strip}{event_details}{/exp:html_strip}{/exp:word_limit}<br />
        <
br />
{/exp:weblog:entries}

<a href="{path=events}" class="redBglink">Complete Event Calendar &raquo;</a>&nbsp
<
a href="newsletters.html" class="redBglink">Newsletter Signup &raquo;</a></b

</
div><!--END EVENTS SECTION--> 

Let’s tackle the weblog:entries tag first.  After specifying the events weblog I have it limited to only showing 5 entries.  This might change depending on how the home page progresses - I’ll show more or fewer events in order to keep the design holding together.

After that is the disable parameter - always a good idea to turn things off that you don’t need for performance reasons.

The dynamic=“off” ensures that this tag won’t try to read anything from the URL.  The URL for the home page should never contain a url_title that would confuse this tag, but again it’s just a good habit to get into.

Skipping the start_on for the moment, the show_future_entries is required here; otherwise only events from today and older will show.

Events are sorted “asc” in order to get the one happening soonest to be first.

OK - now back to that start_on parameter.  This might be flogging the obvious, but I don’t want to show any past events.  I want them to drop off the home page as soon as they pass.  In order to achieve that, I can use the start_on parameter.  However, this can’t be a fixed date, it has to be a rolling start date such that it’s always starting on the current date.  In order to do that the current_time global variable is used as a value for the parameter.  Note that code is straight from the EE Docs.

With the weblog:entries tag now configured let’s move on.  The h4 tags are straightforward - just displaying the entry title and date/time using some date formatting.

Next up is displaying the event details, and this is where I’ve used some plugins.

What’s a Plugin?
ExpressionEngine was designed to be modular, which would allow both EllisLab and 3rd parties to extend its functionality in different ways.  There are basically three different ways to add functionality to ExpressionEngine - plugins, modules, or extensions.  What’s the difference?  The EE KnowledgeBase has this to say:

Plugins are small run-time enhancements. They are simple to create and free to be distributed. The plugin architecture is designed to enable you to affect the output of ExpressionEngine in a wide variety of ways.

Modules are larger systems that can be integrated into the ExpressionEngine control panel. Almost anything that can be achieved as a stand-alone application can be designed as an ExpressionEngine module.

Extensions are “hooks” in the system that allow you to pass information and add functionality to existing interfaces (like the Publish page for example).

So - why plugins here?

In short - to get EE to return weblog contents in a form that the template was designed around.

Here is the event code coming into this chapter:

<img src="images/events-pic1.jpg" alt="pic 1" width="300" height="60">
<
h4>Duis autem vel eum</h4>
Vulputate velit esse molestie consequatvel illum eu feugiat nulla. <br>
<
br

I’ve dropped the image, which would leave:

<h4>Duis autem vel eum</h4>
Vulputate velit esse molestie consequatvel illum eu feugiat nulla. <br>
<
br

The h4 tag is being filled with the title and date code, so that’s set.  This leaves the description blurb:

Vulputate velit esse molestie consequatvel illum eu feugiat nulla. <br>
<
br

There are two constraints with this code.  First is the length - if I plug the event_description field in directly, the events area would quickly trash our home page design because the event_description will likely have multiple paragraphs of text (and possibly images).

Second, this code is not marked up with paragraph tags, and the event_description field is set to a format of “XHTML”, which means its content will be returned marked up paragraph tags.

What to do?

One solution would be to create a custom field just for this purpose.  You could limit its length and set the formatting to “none” and be done.  However, that creates another chunk of content that has to be created and entered for each event, and I like to reuse content where possible.

So - it’s plugins to the rescue. If you are new to using plugins, you can get an overview of them in the documentation.  There is also a list of available plugins on ExpressionEngine.com.  The list is the “official repository” - you’ll also find plugins in the EE forums.  My recommendation is to only use what you find in the list as they should be more reliable and offered by more reliable providers than what you might find in the wild.

I’ve used two that should be installed by default in EE, but if not you can find them in the library (installation instructions found at the above link):

HTML Strip
Word Limiter

Note that these are both “first-party” plugins, which means they were created by the EE programmers.  This means they should be safe to use, won’t break with future upgrades, and are eligible for support in the EE forums.

So let’s look at that line of code again:

{exp:word_limit total="10"}{exp:html_strip}{event_details}{/exp:html_strip}{/exp:word_limit} 

It’s easiest to visualize this in an “inside-out manner”.  First take the contents of event_details and return them.  Then strip the HTML - so the p tags are removed.  Then, limit the words returned to 10.  Note that you can change the parse order (or order in which the plugins are evaluated) if need be - the Using Plugins page has the details on how to do that.  I will say that I’ve only ever needed to do that once.

Results
You can view the rendered index page, but here also is the rendered code for one event now:

<h4><a href="http://church.train-ee.com/index.php/events/details/picnic-in-the-park/">Picnic in the Park on Aug 17 &nbsp;@10:00AM</a></h4>
Nam erat magnamalesuada utsuscipit inporta interdumdolor.&#8230;<br />
<br /> 

Aha - now I’m getting content returned in a manner that the templates were designed around, while not increasing my content entry workload.  This is what good content management is all about.

Now I will say - the home page is less interesting without the images for each event.  I’m thinking when I get to the gallery implementation I’ll come back and add some “latest photos” thumbnails to the home page - just for another splash of imagery.  But for now it’ll do.

Oh—you can update the link to the full event calendar while you’re here.  The code is:

<a href="{path=events}" class="redBglink">Complete Event Calendar &raquo;</a>&nbsp

Cool?  Cool.

Adding Weblog Posts
You’re over the hump now - pulling weblog entries to the home page is a simple matter.  Here’s the new chunk of code:

<h3>Weblog Latest</h3>
<
ul class="home_page_blog">
{exp:weblog:entries weblog="weblog" limit="2" disable="trackbacks|pagination" dynamic="off"}
     
<li><a href="{url_title_path=weblog/comments}">{title}</a
        <
div class="post_meta">
            
By {url_or_email_as_author}  on {entry_date format='%F %d, %Y'} in 
            {categories} 
<a href="{path=weblog/index}">{category_name}</a> &nbsp;&nbsp;{/categories}
            
            {if allow_comments}
            
({comment_total}
            <
a href="{url_title_path=weblog/comments}#comments">Comments</a>
            
{/if}
        
</div>
    </
li>
{/exp:weblog:entries}
</ul

Nothing new to see here - I’ve just whittled it down to two posts and used some existing CSS styles for formatting. 

Looks like the photo gallery is next!

Category Navigation

<< Previous Entry   

Next Entry >>

 

Previous Comments

Picture of Brent

by Brent

Date: Sunday, August 31st, 2008
Comment: #1

Mike—this tutorial has been invaluable! Great stuff! I’m interested to see when you think you’re going to get to the podcast? I know a lot of us are looking into implementing a podcast into our sites, and want to see what the best practices might be for doing so in EE!

Mike Boyink

by Mike Boyink (Author)

Date: Monday, September 1st, 2008
Comment: #2

Hi Brent - thanks for the comment.

I know I’ve slipped a bit on getting this series out, and that’s due to putting the curriculum for the EE classroom training together.

I hope to get back to this series after the class is done, but still with no set schedule.

For my next trick, I’ll develop the photo gallery (and am leaning towards a custom weblog-based approach rather than the photo gallery module), and soon after that will be the podcast.

Picture of Joe

by Joe

Date: Monday, September 1st, 2008
Comment: #3

Great to see that you haven’t forgotten about this tutorial.  I understand your need for the classroom curriculum as it has paying customers and a deadline.

A couple of quick questions regarding your EEA.  In a couple of the blogs you have contact name, phone, email.  Any reason you didn’t just make a relationship to the staff weblog?

Also I just reread where you hinted that it would be possible to pull that information from the user database.  While that maybe complicated, it would be an invaluable resource for many of us to see how that is done.

Mike Boyink

by Mike Boyink (Author)

Date: Monday, September 1st, 2008
Comment: #4

Yep - if you mean in the ministries area anyway. 

In the churches I’ve been part of the ministries weren’t led by staff but rather by volunteer leads who wouldn’t have a church phone extension and email address.

But if in your case ministries are led by staff are, or if you want to categorize the staff weblog to include volunteers, then the relationship would be a good way to go.

At this point I don’t plan to get into integrating with the members/member profiles.  That’s just more complex than I want to get into and support going forward.

Picture of tristan bailey

by tristan bailey

Date: Tuesday, September 16th, 2008
Comment: #5

Mike, are you going to be adding any micoformats to the design for events and calendar export or subscription and for the address or is that a step too much for the intended audience?

Mike Boyink

by Mike Boyink (Author)

Date: Tuesday, September 16th, 2008
Comment: #6

Hi Tristan - not sure.  I actually hadn’t thought of it but it would be a nice addition. 

I hope to get back into the groove on this series this week - I’m done with the EE class but Ike gave us a nice wet basement to deal with.

Picture of T-ee.G-ee.

by T-ee.G-ee.

Date: Friday, October 3rd, 2008
Comment: #7

Hi Mike & Gang, hey sorry to hear about your wet basement, down here in NW-Ohio we got all wind, up to 65 mph gusts, parts of Central OH and down to Cincinnati were without power for days.
My only complaint is it must of blew in a bunch of dust, I’m still getting over allergy problems or some kind of hurricane crud, who knows.
Nothing compared to down South.

I’m sure the Train-ee Train-er will have some new tricks for us soon. :)

Picture of Gaurav

by Gaurav

Date: Thursday, December 25th, 2008
Comment: #8

Hi,

Merry Christmas to you Mike. I think you forgot to add the stylesheet with this attachment. This is because we don’t seem to have the ‘home_page_blog’ styles with the earlier attachments.

Picture of Bryan Rankin

by Bryan Rankin

Date: Sunday, January 11th, 2009
Comment: #9

Hey Mike I really appreciate all the help you give.  I have been able to do a lot for website of the church I work for since finding your blogs and EE.

I am having one issue when pulling formatted event text to the home page.  Whenever something is in a

<i><u><b><ul

the closing tag, though present, is not recognized and the styling is applied down the rest of the page.
I am completely at a loss trying to figure out why, and didn’t know if you might have run into this before.

Running Personal 1.6.6 if you need to know that

Thanks for your help and the tuts.

Mike Boyink

by Mike Boyink (Author)

Date: Monday, January 12th, 2009
Comment: #10

Hey Bryan -

Have you run your page through the W3C validator?  My first guess is that you’ve a unclosed tag somewhere in the template.

Picture of Bryan Rankin

by Bryan Rankin

Date: Wednesday, January 28th, 2009
Comment: #11

Hey Mike,
I have just had the chance to actually try and figure out what the issue is.  It seems like it is fixed as far as closing the styling tags from a blog post, but I do have a question about why I am having to put a closing

</p

tag after embedding the event details for the page to valdiate.

<div class="events"><!--BEGIN EVENTS SECTION-->
    
{exp:weblog:entries weblog="events" limit="5" disable="categories|trackbacks|pagination|member_data" dynamic="off" start_on="{current_time format='%Y-%m-%d %g:%i %A'}" show_future_entries="yes" sort="asc"}
        
<h4><a href="{url_title_path=events/details}">{title} on {entry_date format="%M %d"}  @{entry_date format="%g:%i%A"}</a></h4>
        
{exp:word_limit total="10"}{event_details}<!--{/exp:html_strip}  remove comment tags when this plugin is installed -->{/exp:word_limit}</p>
        <
br />
    
{/exp:weblog:entries}

    
<a href="http://www.train-ee.com/courseware/events/" class="redBglink">Complete Event Calendar »</a>  
</div><!--END EVENTS SECTION--> 

Thanks
Bryan

Picture of Bryan Rankin

by Bryan Rankin

Date: Wednesday, January 28th, 2009
Comment: #12

That posted horribly. Sorry a </p> tag is the closing tag that I am having to include.

Picture of Bryan Rankin

by Bryan Rankin

Date: Wednesday, January 28th, 2009
Comment: #13

Ok… last try a closing “paragraph” tag.

Mike Boyink

by Mike Boyink (Author)

Date: Wednesday, January 28th, 2009
Comment: #14

Heh…try code tags but in brackets ( [ and ] ) instead - that should help the formatting issues.

I’m not sure you have the two plugins nested correctly in there.  The HTML Strip should be the inner plugin, and it will pull all the paragraph tags off that the XHTML field formatting is supplying.  The outer plugin is the Word Limit:

{exp:word_limit total="10"}{exp:html_strip}{event_details}{/exp:html_strip}{/exp:word_limit}<br /> 

If the validator needs that to be a paragraph you’d then put the paragraph tags on the outside of all of it:

<p>{exp:word_limit total="10"}{exp:html_strip}{event_details}{/exp:html_strip}{/exp:word_limit}</p
Picture of Bryan Rankin

by Bryan Rankin

Date: Wednesday, January 28th, 2009
Comment: #15

Thanks a lot Mike.  I’ll give it a try.  Also I know you just finished up a class but are there plans to ever do one out towards the east coast (near NC).

Mike Boyink

by Mike Boyink (Author)

Date: Wednesday, January 28th, 2009
Comment: #16

Oh - nothing yet.  We’re planning on the next one being back here in W. MI, and then a west-coast destination (probably Portland).  You’re the second or third person who has mentioned the more eastern locations though so we’ll have to put that in the long-range sights.

I will say this though - I’ve had local guys in both classes in and both cases I don’t think they got as full of an experience as the others.  Much of the class value happens outside the hours where I talk…but those guys took off for home and missed out on the class meals and other evening activities.

Picture of Andy Foster

by Andy Foster

Date: Thursday, January 29th, 2009
Comment: #17

Hey - great tutorial.

One quick question that I’ve been banging my head on the wall. How would I display one event that have two different dates. it’s the same event, same location, same time, but it’s held twice.

Any ideas? I’ve tried repeet but that didn’t work out so well.

Thanks!

Mike Boyink

by Mike Boyink (Author)

Date: Thursday, January 29th, 2009
Comment: #18

If repEEt doesn’t work then your only option is to enter the event twice.

Picture of littlered

by littlered

Date: Friday, June 5th, 2009
Comment: #19

great! this line of code exactly what i needed!!!

start_on=”{current_time format=’%Y-%m-%d %g:%i %A’}” show_future_entries=“yes”

Picture of parsoncraig

by parsoncraig

Date: Friday, June 12th, 2009
Comment: #20

MIke,
I have copied your code for the event highlights but my page always puts a line break after the title that is within the h4 tags.  I can’t make the event description appear on the same line as the title the way you can.  Any ideas why this is happening?

Mike Boyink

by Mike Boyink (Author)

Date: Friday, June 12th, 2009
Comment: #21

Hey Craig -

Have you compared the source code, and are you using the html strip plugin?

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>