|
Using SlideShowPro With CMS Builder
Note: This guide only works with setting up CMS Builder with SlideShowPro for Flash.
This guide will walk you through the steps required to use the SlideShowPro with CMS Builder on your site. Before beginning this tutorial, you should already have a section set up on your site that has an image upload field.
1. Create the XML File
The first step is going to be creating the XML file used by SlideShowPro to load its images. Create a new plain text file and paste this code into the first line:
<?php header('Content-type: application/xml; charset=utf-8'); ?><?php echo '<?xml version="1.0" encoding="UTF-8"?>'; ?>
While logged in to CMS Builder, go to the Code Generator page, select the section you want to set up the slide show for, and use the Detail page setting to generate the code - there is no need to adjust any other settings here. All we need from the generated code is the "STEP 1: LOAD RECORDS" code block, so copy this part and paste it below the first line. Now paste the following below that code block:
<gallery>
<album title="Slide Show" description="Slide Show" lgpath="/cmsb/uploads/" tnpath="/cmsb/uploads/thumb/">
<?php foreach ($yourSectionRecord['slideshow_images_field_name'] as $upload): ?>
<img src="<?php echo $upload['filename'] ?>" />
<?php endforeach ?>
</album>
</gallery>
A few items will need adjustment in this code block before we can continue. First, you'll need to adjust the $yourSectionRecord['slideshow_images_field_name'] part of the code. In the code you generated earlier, you should see a line that looks similar to this:
$yourSectionRecord = $yourSectionRecords[0]; // get first record
Use the first part of that line of code to replace the the text before the square brackets in this code chunk:
$yourSectionRecord['slideshow_images_field_name']
For example, if you were setting this up for a section called "News", the resulting code would look like this:
$newsRecord['slideshow_images_field_name']
You will also need to replace the "slideshow_images_field_name" text with the field name for this section's image upload field. If you're not sure what this is, you can go to Admin and then Section Editors to check the fields that are set up for your section.
If your file upload path is not the default of "/cmsb/uploads/", you'll also need to change the "lgpath" attribute to match your upload directory path. Likewise, the thumbnail image path would need to be adjusted for the "tnpath" attribute.
Save this file as "images.xml.php", upload it to your web server, and move on to the next step.
2. Set Up SlideShowPro
Now you need to set up your slideshow options and settings in SlideShowPro itself. If you need any help with this step, you can consult the SlideShowPro documentation. Once you've done this, grab the embedded Flash code used for displaying the slideshow on your site from SlideShowPro and add it to your section's detail viewer page where you'd like the slideshow to appear.
There are a couple of changes we'll need to make to this code. First, we need to add this line to it between the <object> and </object> tags:
<param name="FlashVars" value="xmlfile=http://www.yoursite.com/path/to/images.xml.php?<?php echo $yourSectionRecord['num'] ?>" />
As before, you need to change "$yourSectionRecord" to match the code used for your section, and you'll need to adjust the URL to your images.xml.php file used in the value attribute.
We'll also need to add another attribute to your <embed> tag. This tag will have several attributes in it already but you need to add this one in as well, making sure to adjust the "$yourSectionRecord" text and the URL for your XML file:
FlashVars="xmlfile=http://www.yoursite.com/path/to/images.xml.php?<?php echo $yourSectionRecord['num'] ?>"
Finally, you'll need to complete Step Four on this page of the SlideShowPro documentation (Flash CS3 users need to complete Step Three as well), and then upload the Flash file to your web server. Your slide show should now be up and running! If you have any questions or run into any problems while completing this tutorial, feel free to contact our support team.
|
