Hostingheaderbarlogoj
Join InMotion Hosting for $3.49/mo & get a year on Tuts+ FREE (worth $180). Start today.
Advertisement

Create a Slideshow with SlideShowPro and Expression Engine

by

There are many options available for creating and displaying slideshows online (such as here and here, for example). For this tutorial, I've decided to integrate SlideShowPro with Expression Engine.


Screencast Preview



Step 1: Create a Database

In order to install and use Expression Engine, you will need to first create a database. For this tutorial, I created a database called eeTuts.



Step 2: Install Expression Engine

Download the installation files from expressionengine.com. Depending on your needs, you may need to pay for a license. Once you have unzipped the installation files into your web directory, the structure should look similar to this:


Before proceeding with the install, it is good practice to rename the system directory to another name. The system directory provides access to the control panel and changing the name may help to hide this directory from general users. I've gone ahead and changed the name to control.

Point to the install.php file with your web browser to begin the installation. In this case, we are using version 1.6.7. For more info on the install process, please see the Expression Engine documentation, located here: http://expressionengine.com/docs/installation/installation.html

From my experience, installation errors occur most often due to not having the proper folder/file permissions and/or not having access to the database.

Once Expression Engine has been installed, you should see several tables in the database. If you did not change the table prefix during the install process, all tables should begin with "exp_". Once installed, 68 tables are created.


Upon successful install, the control panel and the default site are available.


Login to the control panel with the credentials setup in the install and the admin screen should appear.


Full Screencast



Step 3: Download a File Uploader Extension

Although Expression Engine comes with a file uploader by default, I'm going to install a popular file extension, found here. I'm doing this mainly to demonstrate how to install extensions, but secondarily, this file extension provides additional options that might be useful to you. Please see the documentation of this extension for more information. Once the extension file has been downloaded and unzipped, scroll to the control directory and place the ext.mh_file_ext.php in the extensions directory, the lang.mh_file_ext.php in the language->english directory and the icons folder in the images directory (located above the control directory). Next, enable this extension by going to Admin -> Utilities -> Extensions Manager, click Enable Extensions and then enable the particular extension, in this case, the file uploader extension.
Now, let's create a custom directory to where the files will be uploaded to.


Step 4: Setup a File Upload Directory

Create a new folder within the images directory and call it Portfolio. Make sure to give this directory Write permissions. Now, click on Admin -> Weblog Administration -> File Upload Preferences. Create a new file upload destination with the following credentials:

Server Path to Upload Directory: /path/to/images/Portfolio/

URL of Upload Directory: http://example.com/images/Portfolio/

Make sure Images only is selected. Leave everything else alone and submit.



Step 5: Setup a Weblog

Within the control panel, click on the Admin tab (on the right hand side of the control panel) -> Weblog Administration -> Weblog Management. Click on "Create a New Weblog" and call it Portfolio and make the short name portfolio. Leave the remaining options alone and hit submit.


Step 6: Setup a Custom Field Group

Click on Admin -> Weblog Administration -> Custom Weblog Fields, click on the "Create a New Weblog Field Group" button and call it Portfolio Group. We need to assign this group to the Portfolio weblog. Note, you should be prompted with a link to the location to assign the group, but if not, just go to Admin -> Weblog Administration -> Weblog Management and click Edit Groups for the Portfolio weblog. Assign the Portfolio weblog to the Portfolio Group.

Think of a weblog as a data container. The beauty of these containers (weblogs) is that you can customize the data container to utilize various field types (input box, text area, etc). The field group defines what fields (input box, textarea, etc) are assigned to the weblog. Once a weblog is created, it then needs to be assigned to a field group, so the proper field types will appear. Upon creating an entry in the weblog, the fields created in the assigned field group will appear. This is one of the awesome parts of Expression Engine, in that you can create custom data containers and field types, and have that information display with ease.

Note: If you don't like the term weblog, you can change that reference name within the control panel (some folks refer to these data containers as sections.). Once Expression Engine version 2.0 arrives, the term weblog will no longer be used to refer to these data containers (channel will be used instead).


Step 7: Create two fields within the Portfolio Field Group:

  1. Field Name = image_caption, Field Label = Image Caption, Field Type = Textarea, Set Formatting to None, Submit
  2. Field Name = image_file, Field Label = Image File, Field Type = File (this option appears because of the extension we installed), Choose the Portfolio Upload directory that we created, make the field required, hit submit


Step 8 —Add Data to the Portfolio Weblog

Click on Publish -> Portfolio. The screen should look similar to the following image. Post a few records to the weblog. Check your Portfolio Upload directory to make sure the images are being posted to that directory. After a few images are posted to the weblog, let's then create the templates.



Step 9: Create the Template Group and Templates

Click on the Templates tab. Click on the "Create a New Template Group" button (right side of the screen). Call this group "main" and check the box to make the index template the site's home page. Now, click on the index template from within the "main" template group and paste the following code in this textbox:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<link rel="stylesheet" type="text/css" href="css/default.css" /> 
 
<!--[if lt IE 7]> 
<script type="text/javascript" src="js/unitpngfix.js"></script> 
<![endif]--> 
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script> 
 
<title>Expression Engine Slideshow</title> 
 
</head> 
 
<body> 
Hello! 
 
<div id="container"> 
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="800" height="400" id="slideshow" align="middle"> 
<param name="allowScriptAccess" value="sameDomain" /> 
<param name="movie" value="{site_url}slideshow.swf" /><param name="menu" value="false" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" /><embed src="{site_url}slideshow.swf" menu="false" quality="high" bgcolor="#ffffff" width="800" height="400" name="slideshow" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> 
</object> 
</div><!--end container--> 
 
<script type="text/javascript"> 
$(function() { 
 
}); 
</script> 
</body> 
</html>

Click update to save the file. Note: In this case, I already generated the Flash file and the Flash code. You might prefer other ways of integrating Flash code, such as using swfobject (http://code.google.com/p/swfobject/).

Now, within the "main" template group, create a new template (middle section of the screen), call it portfolio_xml and set the type to xml (You can name it whatever you want, I'm just using _xml to help me further identify the file). Paste the following xml code into this template:

 
    <?xml version="1.0" encoding="UTF-8"?> 
<gallery> 
<album title="Portfolio" description="My special portfolio" lgpath="{site_url}images/portfolio/" tnpath="{site_url}images/portfolio/"> 
{exp:weblog:entries weblog="portfolio"} 
<img src="{image_file}{file_name}{/image_file}" title="{title}" caption="{image_caption}" /> 
{/exp:weblog:entries} 
</album> 
</gallery>

You'll notice that the Expression Engine weblog entries tag is used, that it is referencing the portfolio weblog and that it is pulling back the custom fields we created (image_file, title, image_caption). The "caption" tag within the image tag is what feeds into SlideShowPro's caption section. The {image_file}{file_name}{/image_file} format is specific to the file extension that we installed. Using this code, the full name of the uploaded file is captured. The xml gallery, album, lgpath and tnpath are specific to SlideShowPro. Update the file to save it. Now, render the file and view the source. Upon viewing the source code of the xml file, the data that you added to the weblog should appear, similar to this:


If the data doesn't appear, please review the steps again, and make sure that you have the data in the correct weblog, the correct weblog short name is referenced, that all tags are spelled correctly and that all tags are properly closed. Copy the address for this rendered xml file, as we will add that to the SlideShowPro component.


Step 10: Edit the SlideShowPro Flash Component

SlideShowPro is not free, and although that might turn some users off, there are several possibilities for integrating other solutions that are free; once you understand how entries and weblogs work, it is only a matter of linking other tools to the entries and capturing that data. More info on SlideShowPro can be found here. Once you have installed the SlideShowPro extensions (see the site's documentation for more info), open the component and scroll to the bottom to edit the XML settings. Paste in the address that you just copied from the rendered xml file into the XML File Path line. Leave the XML File Type at Default. Customize the other settings as you see fit. Save and publish this file to generate the swf.

At this point, the rendered swf file should be displaying the images. If not, verify that your xml file has data in it. Also note that you should use jpg files, as png files seem to not be supported. Place the rendered swf file within the root directory of the site, to match it up with where the flash file is being referenced in the index template code.

Finally, if you would like to add music to the slideshow, simply add the following to the xml template (Make sure that you have the sound file in the correct directory. In this case, I created a sound directory, in the root, above the control directory and put the sound file there.):

 
    <gallery> 
<album title="Portfolio" description="My special portfolio" lgpath="{site_url}images/portfolio/" tnpath="{site_url}images/portfolio/" audio="{site_url}sound/song.mp3" audioCaption="Song info">

Additional Links

There are a few other examples (that I've come across at least) that give additional information on utilizing SlideShowPro with Expression Engine. For further reading, you may find these links helpful:

Advertisement