SlideShowPro Integration with a Weblog in EE
I have wanted to know how to do this for about 6 months now so I finally sat down and figured it out. I also have some handy tips that will help you format the look and feel of SSP. So click on the link to read how you can Integrate SlideShowPro into ExpressionEngine. Before we get started make sure to head on over to the SlideShowPro website and purchase the Flash Package for use with this tutorial
Create a Weblog Named SlideShowPro
From the Control Panel Home Page click on Admin->Weblog Administration->Weblog Management. Click on the Create a New Weblog button. Fill in the name and Click on the Submit button.
Create a New Weblog Field Group
From the Admin Tab click on Custom Weblog Fields. Click on the Button to Create a New Weblog Field Group. Fill in the name and Click on the Submit button.
Create New Fields for SlideShowPro Field Group
Click on the Add/Edit Custom Fields link
Create New Fields for SlideShowPro Field Group
Create a SSP Image and SSP Caption Custom field by clicking on the Create Custom Field button and filling in the Field Name and Field Label. The Field Type should be Text Input and the Default Text Formatting for this Field should be set to None. It is not a Searchable Field.
Add the Custom Field Group to the Weblog
From the Admin Tab select Weblog Administration->Weblog Management. Click on the Edit Groups link.
Change the Field Group
Make sure that the Field Group is set to SlideShowPro
Create a new Template Group
After you get this set up you may decide that you do not need a new Template Group but for the purposes of this tutorial please create a Template Group called slideshowpro. You will do this from the Templates Tab. Click on the Create New Template Group button. Enter in the Name and do not change the other two settings. Just click on the submit button.
Create a new XML template
Once you have created the New Template Group you will be returned to the Templates tab. Make sure that slideshowpro is highlighted on the right hand side and click on the New Template link. You will create a new template called images and it will have a Template Type of XML. Click on the submit button.
Drop this code into the new template
Of course I am going to give it to you in text 
We will review this later so you know what you can change.
<?xml version=“1.0” encoding=“UTF-8”?>
<gallery>
<album id=“1” title=“Photo Gallery” description=“description” lgPath=”http://eetemplates.com//images/photoGallery/”>
{exp:weblog:entries weblog=“slideshowpro” orderby=“date” sort=“desc” limit=“20” disable=“member_data|trackbacks”}
<img src=”{sspimage}” title=”{sspcaption}” caption=”{sspcaption}” />
{/exp:weblog:entries}
</album>
</gallery>
Grab the XML file's URL
Make sure to click on the update button to save the changes to the template. Then when it comes back click on the View Rendered Template button. When the new tab opens with the rendered xml file make sure to copy the URL. You will need it for the next step. Your link should be something like http://yourdomainhere.com/index.php?/slideshowpro/images/
Adding Images - Create the folder
For the next part you will want to have 2-3 images in the ExpressionEngine CMS so that you can see your work. Keep in mind that you have stated the folder on your server where the images will go when you pasted in the code. It was defined in the lgPath=”http://eetemplates.com//images/photoGallery/” parameter. So log into your server and create a folder called photoGallery in the images directory. While you are at it upload a few images. Make sure to make note of their name.
Add some images to the Weblog
Hover over the Publish tab and select SlideShowPro from the drop down menu. Fill in the fields. Make sure that the SSP Image field is just the name of the image file. The SSP Caption is whatever you want to appear in SSP when you hover over the image in the player. Click on Update. Repeat as necessary…
Now for the fun part…
Open up your favorite browser and head on over to http://easyssp.com. Feel free to spend some time getting familiar with the site. If you have never worked with SlideShowPro before this is an excellent site to peruse.
Let's create a custom looking SSP interface…
Click on the launch link
Use your XML link
Once the Launch link has opened you will see that this tool allows you to configure every conceivable paramter for SlideShowPro. At the very bottom of the parameters is Your XML File Path. Paste the URL for your XML file into that field and click on the Apply button. You should start to see your images in the player. If not then you probably need to place a crossdomain.xml file in your hosting. Use the following link for that information http://www.easyssp.com/docs.php
Have fun making the SSP interface look how you want it.
Change the settings and see how it affects the player. Just click on the apply button to see the changes take effect immediately.
OK… Now bring the changes into your site…
Once you are done playing with the settings click on the Get Config button.
Grab the generated XML
These are the parameters that are going to format your SlideShowPro instance.
When you downloaded the player.
There was a folder called standalone. You need to open the param.xml and paste the config information you got from EasySSP.
Upload the files.
You need to upload the param.xml and slideshowpro.swf files to your server.
Now just call the slideshowpro.swf file
Now all you have to do is call the slideshowpro.swf file from within a template or from a entry in another weblog. The weblog would have to have xHTML enabled (the default weblog does). I still use the following code… Make sure to change the width and height in both locations otherwise it may appear smaller or larger than you wanted.
<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=“517” height=“400” id=“slideshow” align=“middle”>
<param name=“allowScriptAccess” value=“sameDomain” />
<param name=“movie” value=”http://eetemplates.com/slideshowpro.swf” />
<param name=“quality” value=“high” /><param name=“bgcolor” value=”#ffffff” />
<embed src=”http://eetemplates.com/slideshowpro.swf” quality=“high” bgcolor=”#ffffff” width=“517” height=“400” name=“slideshow” align=“middle” allowScriptAccess=“sameDomain” type=“application/x-shockwave-flash” pluginspage=“http://www.macromedia.com/go/getflashplayer” />
</object>
That's it.
You should be able to go to whatever page or post you created and see your slide show in action. Hope this helps!
Learning Things the Hard Way - Upgrading from 1.7 to 2
This is just a quick blog post to relay some info I just learned. I am in the process of upgrading Show-ee from 1.6.8 to 1.7 and then to 2.1.4b. As part of that site we used to use FieldFrame from Pixel & Tonic. Specifically we were using the CheckBox Group fields for the checkboxes that tell what add-ons a developer used. Well as part of the process I upgraded from 1.6.8 to 1.7 but neglected to upgrade all of the add-ons before moving to 2.1.4.
Creating Installable Templates for ExpressionEngine 2
This is the second installment in our Creating installable templates tutorials for ExpressionEngine. In this post we are going to talk about the actual package that needs to be delivered to the end user and all of the associated files. Plus we even have a bonus of some useful code for you.
Removing Index.php from the URLs of Expression Engine websites
For a long time now I have struggled with removing index.php from my EE websites. I have used a mix bag of the include/exclude method and add-ons that deal with making the include/exclude method easier.
Creating your own installable templates for ExpressionEngine 2
A year ago I was perusing the user guide and wiki over on ExpressionEngine’s website for any information regarding creating your own installable templates. At that time there were none. At I just did a quick search for some of the files involved like theme_preference.php and default_content.php and the information available is still minimal.
Related Articles