How to use Album with Dynamic Drive's Featured Content Glider (Customisable Animated Slideshow)

1. Visit Dynamic Drive's Featured Content Glider page, follow the instructions there and get Glider working on one of your site's pages with some embedded images as per their example.

2. Once you've got your images gliding successfully, it's time to replace the statically embedded images with dynamic images from CMSMS' Album module- find the following series of glidecontent DIVs (there is one for each image in your slideshow), which is where each image is embedded:

 <div class="glidecontent">
 <img src="http://i15.tinypic.com/72vilba.jpg" style="float: right; padding: 5px"/>Comment text.
 </div>

Remove them all and replace them with cms_module the tag to embed the photos from your Album:

 {cms_module module='album' albums='2'}

the above example will embed the album with the ID of 2- you get the Album's ID from going to Content > Photo Albums and on the Albums tab there you will see a list of the albums that you have set up. Each has a unique ID which is listed in the IDs column.

3. Now it's time to create an album template which will list the full size images from the albums that you referenced in step 2. Go to Content > Photo Albums and click on the Templates tab. Click on the Add a template link at the bottom left. In the next page, give your new album template a name- glider would be a good bet. Next paste the following code into the Template field:

{foreach from=$pictures item=picturesrow}
   {foreach from=$picturesrow item=onepicture}
     <div class="glidecontent">
       <img src="{$onepicture->picture}" alt="{$onepicture->name|escape:'html'}" style="float: left; padding: 5px" />
         {$onepicture->comment|escape:'html'}
     </div>
{if ($onepicture->number==$picturenumber and !$picture)}{assign var=picture value=$onepicture}{/if}
   {/foreach}
{/foreach}

Save your new template. The part --style="float: left; padding: 5px"-- allows text to wrap around the images.

4. Next is to reference the glider template that you just created in step 3. Click on the Albums tab in the album module to view a list of available albums. The album that is going to be used with the glider needs to have the glider template attached to it. Click on the album's name, then on the Properties tab. Choose the glider template in the template dropdown at the top.

5. Now reload the page on your CMSMS site which has the Glider code and Album code embedded- all being well, images should now be displayed from your chosen album.

If you would like the images to alternate between floating to the left and to the right then use the following code as the template:

{foreach from=$pictures item=picturesrow}
   {foreach from=$picturesrow item=onepicture}
     <div class="glidecontent">
       <img src="{$onepicture->picture}" alt="{$onepicture->name|escape:'html'}" 
{cycle values="style=\"float: left; padding: 5px\",style=\"float: right; padding: 5px\""} />
         {$onepicture->comment|escape:'html'}
     </div>
{if ($onepicture->number==$picturenumber and !$picture)}{assign var=picture value=$onepicture}{/if}
   {/foreach}
{/foreach}

Troubleshooting

How to fix problem with pictures not being added (on upgrades from old versions of Album):

The upgrade script was not written to handle upgrades from some versions, if pictures are not being added, try running this SQL code in phpMyAdmin:

ALTER TABLE `cms_module_album_pictures` ADD `thumbnail_width` VARCHAR( 20 ) NOT NULL , ADD `thumbnail_height` VARCHAR( 20 ) NOT NULL ;

There are 3 different template dropdowns.

• Album List Template: - Choose which template is used for the list of Albums
• Default Template: - Choose the default template that is used for new Albums that you create
• Template: - Choose the template that is used for a specific Album.

Here is how to choose the "Template:" that is used for an Album:

1. In the CMS Made Simple Admin Console go to [b]Content -> Photo Albums[/b]
2. Click on the [b]name of your Album[/b] on the Albums tab.
3. You will now see a list of the pictures in your Album, click on the [b]Properties[/b] tab.
4. You will see a dropdown next to the word "[b]Template:[/b]" ([i]not[/i] "Default Template" or "Album List Template:")
5. Choose [b]"Thickbox"[/b] from the list of templates
6. Click the [b]Save[/b] button

back to Modules

This page in: English - Deutsch - Español - Français - Italiano - Lietuvių - Nederlands - Norsk - Polski - Česky - Русский - Svenska - Tiếng Việt - عربي - 日本語 简体中文

User Handbook/Admin Panel/Content/Album

From CMSMS