22 - Home Page

It may seem odd to wait until the later steps of implementation to tackle the home page but in this case it made sense. In this chapter we implement the home page using some new development and re-using some code already created for the Work section.

 
Download the EE Code for 22 - Home Page

We need some new code for the slider images on the home page, then we can re-use some code from the work section to drive the work thumbnails under the slider image.

Let’s tackle the slider first.


Chunk the Slider
Starting in the embeds/header template I created {snp_home_slider} to store the slider code chunk. This way my embeds/page_header is simpler and I can focus on just the slider code in the Snippet. My updated embeds/header calls the Snippet with a conditional:

{!-- Home page has a image sliderchunked out for simplicity --}
{if embed
:my_body_class=="home"
    {snp_home_slider}
{
/if} 

This leads to a parent template (site/main) calling an embedded template (embeds/header) which calls a Snippet (snp_home_slider). That’s a bit deeper than I typically prefer - once the site is all functioning I may or may not go back and un-chunk {snp_home_slider}.

We’ll get to the Snippet code in a moment.


Create The File Upload Destination
I created a new upload destination for my home page slider images. I named it Home Slider and used these paths:

Server Path:

/Applications/MAMP/htdocs/portfolio/assets/img/uploads/home_image

URL to Upload Directory:

http://localhost:8888/portfolio/assets/img/uploads/home_image/ 

Create the Field Group
Under Admin > Channel Admin > Channel Fields I created a new Field Group called Home Slider.


Add fields
Per my original content model I had just thought to do a one image per entry approach here.  But what about using a Grid field?

A Grid field would be easier for the content administrator to use. They could drag and drop to set the sort order. The Grid field also allows me as the developer to specify minimum and maxium number of rows which would prevent an empty or too-big slider area.

However using a one-image-per-entry development approach would offer benefits like per-image entry and expiriation dates. This would allow images to be scheduled - nice for holidays, etc.

I chose to go the Grid field route. I just like the ability to see all my images in one entry and easily set the sort order.

Hold on - a complete channel that will only ever have one entry?

Isn’t that inefficient?

No - adding a channel isn’t adding more tables to the EE database. The way the actual EE database works, adding a channel just extends existing tables. I have no issue with a channel that only ever holds one entry, and actually prefer it over other approaches that use add-ons for this type of content (which means users have to learn a different workflow to edit).

So - I created one Grid field named {home_slider}

In that Grid field I specified the following columns:

  • Slider Image / {slider_image} / File Field set to the new image upload destination.
  • Slider Title / {slider_title} / Text field.
  • Slider Text / {slider_text} / Textarea field, no formatting.
  • Slider Link / {slider_link} / Text field, no formatting.


Add Channel
I created a new channel named {home_page}, and assigned the new field group to it.


Publish Content
I published one entry with a few images and all the meta data loaded.


Update the Snippet
Here’s the updated code for the {snp_home_slider} Snippet:

{exp:channel:entries channel="home_page" disable="categories|pagination|member_data" limit="1"}

    {
!-- slider is only loaded on home page --}
    
<!-- SLIDER -->                
    <
div id="home-slider" class="lof-slidecontent">
        
        <
div class="preload"><div></div></div>
        
        <!-- 
slider content --> 
        <
div class="main-slider-content" >
        <
ul class="sliders-wrap-inner">
            
{home_slider} {!-- our Grid field --}
                
<li>
                      <
img src="{home_slider:slider_image:940px}" title="{home_slider:slider_title}" alt="{home_slider:slider_title}" />         
                      <
div class="slider-description">
                        <
h4>{home_slider:slider_title}</h4>
                        <
p>{home_slider:slider_text}
                        
<class="link" href="{home_slider:slider_link}">Read more </a>
                        </
p>
                     </
div>
                </
li>
            
{/home_slider}    
          
</ul>      
        </
div>
        <!-- 
ENDS slider content --> 
        
        <!-- 
slider nav -->
        <
div class="navigator-content">
          <
div class="navigator-wrapper">
                <
ul class="navigator-wrap-inner">
                    
{home_slider} {!-- Grid field again --}
                           
<li><img src="{home_slider:slider_image:188px}" alt="{home_slider:slider_title}" /></li>
                       
{/home_slider}
                
</ul>
          </
div>
          <
div class="button-next">Next</div>
          <
div  class="button-previous">Previous</div>
          <!-- 
REMOVED TILL FIXED <div class="button-control"><span>STOP</span></div> -->
        </
div
        <!-- 
slider nav -->                          
     </
div
    <!-- 
ENDS SLIDER -->
{/exp:channel:entries} 

This is pretty straightforward - due to how the HTML was laid out for the slider main photos and slidier thumbs I just repeated the Grid field twice within the same loop. Other than that there is nothing new that we haven’t covered in previous chapters of this series.

Now for the portfolio thumbnail sections that show up on the home page under the slider.


Create a New Snippet
I created a new Snippet named {snp_portfolio_thumbs}. In it I loaded the following code copied from the work/index template:

<ul id="filter-buttons">
    <
li><a href="#" data-filter="*" class="selected">show all</a></li>
    
{exp:channel:categories channel="work" style="linear" show_empty="no"}
        
<li><a href="#" data-filter=".{category_url_title}">{category_name}</a></li>
    
{/exp:channel:categories}
</ul>

<!-- 
Filter container -->
<
div id="filter-container" class="cf">
    
{exp:channel:entries channel="work" disable="member_data|pagination"}
        
<figure class="{categories backspace="1"}{category_url_title} {/categories}">
            <
a href="{route="work/project" project="{url_title}"}" class="thumb"><img src="{work_image:gallery}" alt="{title}" /></a>
            <
figcaption>
                <
a href="{route="work/project" project="{url_title}"}"><h3 class="heading">{title} </h3></a>
                <
div class="portfolio-cat">
                    
{categories backspace="8"}
                        {category_name}
,
                    
{/categories}
                
</div>
            </
figcaption>
        </
figure>
    
{/exp:channel:entries}
</div><!-- ENDS Filter container --> 


Update the work/index Template
Your work/index template can now be updated to the following:

{embed="embeds/header" my_body_class="" my_active_nav="work" my_page_title="Our Work"}                            
<!-- portfolio content-->
<
div id="portfolio-content" class="cf">                
    
{snp_portfolio_thumbs}
</div>
<!-- 
ENDS featured -->
                            
{snp_footer} 

Update site/index
Your site/index template can be similarly updated to the following:

{!-- embeds/header calls snp_home_slider that loads the slideshow area --}
{embed
="embeds/header" my_body_class="home" my_active_nav="home" my_page_title="Home"}    
    
<div class="home-featured"><!-- featured -->
        
{snp_portfolio_thumbs}
    
</div><!-- ENDS featured -->
{snp_footer} 

With these changes in place the Portfolio site is very near completion. From here we’ll cover some ways to optimize the site both in terms of the content people managing the content and how quickly EE loads up requested pages.

Category Navigation

<< Previous Entry   

Next Entry >>

 

Previous Comments

Picture of M. van Vijfeijken

by M. van Vijfeijken

Date: Wednesday, August 5th, 2015
Comment: #1

Thanx for these wonderfull, extended tutorials on how to build this portfolio-site, really appreciated!! Makes me wanna dive into EE more. Thanks for all the work put into it explaining it all so detailed!

Have to ask though, is it really completed? I’m having trouble with getting the homepage slider working, and in my (local) case I get to see this dummy portfolio thumb (see below) instead of my posted input images, and looking at the code that I downloaded from this site it has code in it that can’t be right (linking to dummies-dir):

<ul class=“navigator-wrap-inner”>
        <li>http://www.train-ee.com/assets/img/dummies/slides/01_thumb.jpg</li>
      </ul>

Even if I use the code from teh tutorail page (which doesnt have this dummies-ref), the thumbs don’t show although the dummie-img is gone now. But the main homepage slider won’t load the value within the “src” tag, so these images don’t show (rest of homepage image channel info like title, link, description do work). Looks to me (but I might be wrong!) some code is missing. Could you look into this? Much appreciated!

Picture of Boyink

by Boyink

Date: Wednesday, August 5th, 2015
Comment: #2

Hey - looks like the code shown here on the page is correct, while the .Zip file isn’t.

Images not loading usually means you have a naming mis-match or a image manipulation not created.

Picture of M. van Vijfeijken

by M. van Vijfeijken

Date: Wednesday, August 5th, 2015
Comment: #3

Thanks for answering so quickly; The images are being processed in their “home_images” folder, so that seems to be going ok, but the front-end code (for both home slider images as well as thumbs) goes like:
” title=
Could that be because of a mistake on my part? What can I do to check this further?

Picture of Boyink

by Boyink

Date: Wednesday, August 5th, 2015
Comment: #4

Sorry..not much I can do remotely. Consult the docs, double-check the code, double check quotes and closing quotes, double check variable names and image maniulation names, pull out the entries loop in a test template and play around with it until you find the issue.

Picture of M. van Vijfeijken

by M. van Vijfeijken

Date: Wednesday, August 5th, 2015
Comment: #5

Ok thanks I’ll try!

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>