38 - Pulling Latest Photo to the Home Page

In this shorter chapter I’ll use up a bit of free space on the church site home page to bring in the latest photo from the photo gallery.

 
Download the EE Code for 38 - Pulling Latest Photo to the Home Page

When I last left the church site home page, the left column had only a list of upcoming events.  The left column wasn’t as long as the right column so there was a bit of free space in the left/lower portion of the page.  In this installment I’ll use that space to show the most recently uploaded photo to the photo gallery.

This is a pretty quick update, only made a bit longer because while I was at it I decided to undo the embedding out of the home page events listing.  Why?  I typically only embed code if it can be reused in another template or if creating an embed makes the parent template much easier to understand.  When I started this series I embedded out the events listing thinking I might use it in the sidebar of another template but as it turns out I didn’t.  The parent template isn’t that complex, so by leaving the embed in place I just have a slightly more complex template structure to come back to later if I want to make changes to the event listing.  By putting the code back into the parent template I’ll save myself a couple of clicks to find the code and it’ll also reinforce the fact that the code is only used in this one template.

Which actually brings up a good point—if you ever need to know which templates use a specific embedded template you can use the Control Panel search function (the search box is under the template group listing on the left-bottom of the templates tab).  Enter the name of the embedded template name and EE should filter the template groups and templates down to just those that contain the embed statement with that template name.  To get the full unfiltered list back again just click the templates tab.

So for the task at hand I’ll need to update three templates:

  • site/index
  • stylesheets/style
  • embeds/html_header


Updating site/index
I first added the gallery code to embeds/events and then consolidated embeds/events back into site/index, but you could choose to do that in the reverse order.  I’ll provide the complete site/index templates in the companion files and just focus on the net change here with the new gallery code:

<div class="home_latest_photo">
{exp:gallery:entries gallery="photos" limit="1" orderby="date"}
    
<h3>Latest Photo{title}</h3>
     <
a href="{image_url}" rel="lightbox[recent]"  title="{exp:html_strip}{title}: {caption}{/exp:html_strip}"><img src="{thumb_url}"  class="border" width="{thumb_width}" height="{thumb_height}" title="{title}" alt="{title}" /></a><br />
{/exp:gallery:entries}

<a href="{path='photos'}" class="redBglink">All Photos &raquo;</a>&nbsp
</
div

I’m using the exp:gallery:entries tag pair in single-entry mode here, which avoids having to worry about the rows and columns of multiple entries.  For the image itself since I wanted to also use the Lightbox effect on this image I just copied the code from photos/index.  With this code in place I could re-load the site home page and get the latest image popping in. 

Updating stylesheets/style
I wrapped the image code in a new div class so that I could do some styling - mainly just to add margins. 

Updating embeds/html_header
In order to get the Lightbox javascript to work on this image I had to update embeds/html_header and change the conditional that looks at the current url and loads the javascript files if the current page is in the photos section.

Since segment_1 should only be empty when the home page is being viewed this code:

{if segment_1=="photos" 

Needed to change to:

{if segment_1=="photos" OR segment_1==""

Reloading the page and clicking the image thumbnail should now load the full-size image using the javascript Lightbox effect.

And that’s it!  I now have a home page that feels just a bit more balanced design-wise and features the latest photo uploaded. 

 

 

Category Navigation

<< Previous Entry   

Next Entry >>

 

Previous Comments

Picture of Jan

by Jan

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

Is there a simple EE way to make that a “random” photo?

Mike Boyink

by Mike Boyink (Author)

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

Yes.

But I’m going to let you find out how…;)

Picture of Jan

by Jan

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

Hmm, it would have taken me less words to try the obvious than writing a comment to you! Maybe I just needed a little people interaction?! Thx

Mike Boyink

by Mike Boyink (Author)

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

Heh…I know the feeling!

Picture of Efrain Barcena

by Efrain Barcena

Date: Tuesday, July 7th, 2009
Comment: #5

Hey Mike,

How can I display the two latest pictures in the home page? Changing the limit to 2 is not doing the trick

Thanks

Mike Boyink

by Mike Boyink (Author)

Date: Tuesday, July 7th, 2009
Comment: #6

Hey Efrain -

Look back at how the gallery entries tag pair has been implemented here..;)

Picture of Efrain Barcena

by Efrain Barcena

Date: Tuesday, July 7th, 2009
Comment: #7

So you mean that table elements are a must to be able to accomplish this?

Mike Boyink

by Mike Boyink (Author)

Date: Tuesday, July 7th, 2009
Comment: #8

The docs say “typically” - but it looks like you might get around it with some experimentation….

Picture of tamalita

by tamalita

Date: Tuesday, November 3rd, 2009
Comment: #9

Once again, thank you , this is EXACTLy what I was looking for!!

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>