How to Create an image slider for Expression Engine

How to Create an image slider for Expression Engine

Andrew profile photo
Written by Andrew on 20th September 2010

I am going to show you today how to create a image slider with ExpressionEngine. We will be using Matrix by Pixel and Tonic, Lumis IMGSizer and Nivo Slider plugin for JQuery.

What is an Image Slider?

Image sliders and sliders have hit the internet over the last few years, this is mainly because of the rebirth of Javascript and the framework JQuery.

The main use of image sliders is to show a section of images. They can range from big photographic backgrounds such as imagery relating to the website to things such as recent work (like we feature on our homepage).

They can be found nearly everywhere these days, but be careful as Image Sliders are not to be used for content areas there are other plugins/ways of doing this.

Install and Set up

Download and install the ExpressionEngine extension and the plugin - both tell you how to do this on their website. Also install and add the Nivo Slider files to your page (The HTML and the CSS). A tip - I use snippits to house my code for speed of updating, will go over this in more detail on another post. The main ons are {meta} {css} {js} {pluginname} {body} {masthead} {footer}. The {pluginname} is where I add both the JS and css for a given plugin, this is so I can add and remove these for certain templates that the functionality is not needed.

Also we will presume that you know the following

  1. You will be running ExpressionEngine 2.0.
  2. You know how to install and enable extensions and plugins in ExpressionEngine.
  3. You will know how to add CSS & JS files to your site.

The HTML

The HTML is pretty straight forward for what we are going to be creating. It is a section with a ID, in this instance I have used portfolio (as we are showing portfolio work). A DIV will be fine, but we work with HTML5 so we are using SECTIONS.

As we are creating a slider the images will be in a set order so the best semantic code for this will be a Ordered List. Please not that I am having it in a container for styling reasons but can just be in a OL.

<section id="portfolio">
<ol> 
 
 <li><img src="/site-images/image1.jpg" width="698" height="279px" /></li>
 <li><img src="/site-images/image2.jpg" width="698" height="279px" /></li>
 <li><img src="/site-images/image3.jpg" width="698" height="279px" /></li>
 <li><img src="/site-images/image4.jpg" width="698" height="279px" /></li>
 <li><img src="/site-images/image5.jpg" width="698" height="279px" /></li>

</ol> 
</section>


The CSS

Next up is the CSS, I like to leave the Nivo slider default CSS and add the style edits in to my own style sheets. This is just a preference that I have.

The CSS from the Nivo slider is all you really need to make the Silder work but as this is an article I have created a quick demo based off what we have on the homepage.

This is as far as you can go if the functionality needs not to be updated by the client or images resized.

The JS

The JS for the plugin is pretty simple, all you need to do is follow the instructions on the website; but here is what we are using.

 $(window).load(function() { 
 $('#portfolio ol').nivoSlider({
 effect:'fade', //Specify sets like: 'fold,fade,sliceDown'
 animSpeed:1500,
 pauseTime:7000,
 startSlide:0, //Set starting Slide (0 index)
 directionNav:true, //Next & Prev
 directionNavHide:true, //Only show on hover
 controlNav:false //1,2,3...
 });
});

Adding The EE Functionality

So we have IMGSizer and also Matrix downloaded and installed and working on the EE install. You should also have your file upload preferences set up in the admin. Admin>Content Administration>File Upload Preferences.

We are going to need to create a channel so that we can post the entries in to the database.To do this go to Admin>Channel Administration>Channels and click on the "Create New Channel" button and fill out the information there. I called mine featured work.

Next up we are going to need to add a custom field group and assign it to the channel. To do this go to Admin>Channel Administration>Custom Fields and click on the "Create A New Channel Field Group" button located in the top left. I called mined Featured Work.

The next step is to add a custom Matrix field, to do this click the button "Create A New Custom Field" button in the same position as the other one (you should be in the group that you just created) and fill out the information.

This is the same as you do for all the other custom fields in ExpressionEngine (there are better tutorials by better people around and the EE Docs on this in more depth) so wont go in to that here.

The only difference that you need to do is make it a Matrix field when filling in the information the first option you have is "Field Type" select Matrix out of the options.

Next we want to make sure that we can upload multiple images, In the box "Custom Field Options", fill out the information as required, remember the name that you give "Col Name" to as we will need this later. The Most important one you need to change is the "Cell Type Options" This will allow us to upload images. After this hit Update.

The only thing left to do now is assign the channel and group together. To do this go back to Admin>Channel Administration>Channels and where it says "Edit Group Assignments" click on that link, it should then take you to the Edit page. Select on the "Field Group" the Featured Work group you created and click update.

We now should be all ready with the EE admin side of things, we now need to work on the HTML.

Templates

Open up your template (either inside EE or your template folder) and the page should be set up as before in the OL in the steps above.

We need to add the basic EE code to call the information from the database.

<section id="portfolio">

<ol>

{exp:channel:entries channel="featured_work" dynamic="no" limit="1" disable="categories|member_data|category_fields|member_data|pagination"} 

<li><img src="/site-images/image1.jpg" width="698" height="279px" /></li>

{/exp:channel:entries}

</ol> 
</section>

As you see it is pretty basic as we have just added the EE wrappers so it is easier to follow (for people not experienced in Matrix).

We will now add the Matrix and IMG Sizer.

<section id="portfolio">

<ol>

{exp:channel:entries channel="featured_work" dynamic="no" limit="1" disable="categories|member_data|category_fields|member_data|pagination"}

 {images} 
 <li>{exp:imgsizer:size src="{image}" width="698" height="279"}</li>
 {/images}

{/exp:channel:entries}

</ol> 

</section>


What you need to pay attention to is {images} this is the Field Label that you set the Matrix not in the configuration. This will let EE know that your calling the Matrix data.

Then the ImgSizer has been added, this will mean the images are always this size even if your client uploads a large file, it will be resized to the sizes that I have added. The SRC how ever is what we called Matrix Cell, this will now add the file uploaded in to place and resized.

That is it for the ExpressionEngine code, the way that it has been set up it will let you add multiple images throughout the admin and will show you in the final step.

Adding The Content

So now we should have everything set up, the templates, custom fields tied with the channel but we need to publish some content to see it all in action.

Go to Content>Publish>Featured Work, fill out the information such as Title, URL etc. Now on to the Matrix, there should be a + symbol with "Add Image" and follow the steps (you should have already set up the upload preferences and a cache folder) and upload the image. It will now sit there in the box.

Now you don't have just one image for a Image Slider so we will want to add some more images. Below the Matrix you will see another + symbol with no text displayed. If you click on that it will add another table row, this will let you add another image. Keep repeating until you have the desired amount of images and then click on "submit".

You should now go and check your page in the browser and everything should be working fine. If not there has been an error somewhere and go back and check the steps.

That is it, we hope that articled helped you create a Image Slider and understand ExpressionEngine a little more.