Monoslideshow and EE Gallery

published on Oct 07th, 2006 // 5 Comments

 
Monoslideshow and EE Gallery
 

Monoslideshow is a compact and extremely versatile Flash slideshow to view your images in a web page. In this tutorial I will be integrating it with Expression Engine's own gallery.

[Monoslideshow](http://www.monoslideshow.com “Monoslideshow”) is a great new Flash and XML slideshow. You do not need Flash to set up your own custom slideshow. The preferences included with Monoslideshow are great in number. That is why there is two parts to this tutorial. We will be dealing with the [ExpressionEngine](http://www.expressionengine.com/index.php?affiliate=5pieces“ExpressionEngine”) integration. When you have that much done you can customise your own preferences as to how you would like yours to look.

The slideshow won’t respect the category hierarchy but will list all categories.

Ok lets start

Go and purchase Monoslideshow () first if you haven’t already. It is $19.95 so is a bargain.
Have a look at the Monoslideshow Demo() and familiarise yourself with the custom settings, pretty eh?

EE Gallery Setup

Log into EE and goto modules > Photo Gallery
Create a gallery if you haven’t done so already. It will ask you to create a directory for your images on your server.
When that is complete goto Preferences and do whatever configuring you need to do there.
Add your categories, category description etc and images.

Things to take note of:

  • Your Gallery id -You can find this by clicking on any of the main menu items of your gallery (Categories, New Entry, Batch etc.). Now look up at your address bar. Read through it until you come to ‘gallery_id=1’. The number here is your gallery id
  • Your gallery short name
  • You will have added this in your preferences a while ago

Now come out of the gallery module and goto your ‘Templates’
You will see that a new template group has been added. Its name reflecting the name of your gallery.
Click once on the gallery template group name in the left hand column and all that groups templates will appear in the right-hand column.

The XML Template

In your gallery template group create a new RSS/XML template called mono_xml.
To this template we are going to add our XML but we have to dynamically generate it from our EE gallery.
you can download my template from here()

To explain the XML

{assign_variable:gallery_url="http://www.somesite.com/images/photos/"}
{assign_variable
:gallery_name="myphotos"}
{assign_variable
:gallery_number="1"}
<?xml version
="1.0" encoding="UTF-8"?>
<slideshow>
<
preferences /> 

Change variables above to suit your own gallery.
The preferences tag will be where we add our generated preferences from the Monoslideshow demo page.

{exp:query sql="SELECT cat_id,cat_folder FROM exp_gallery_categories WHERE gallery_id = '{gallery_number}'"}{exp:gallery:entries gallery="{gallery_name}" category="{cat_id}" limit="500"}
<album thumbnail="{gallery_url}{cat_folder}/{category}_thumb.jpg" title="{category}" description="{category_description}" imagePath="{gallery_url}{cat_folder}/" thumbnailPath="{gallery_url}{cat_folder}/"

Do you see the parameter for thumbnail in the album tag above? This is how we get our album images. Pick a suitable category image that you wish to have for an album image and replace the actual image name with the name of the category group it resides in.

Album Thumbnails

{entries}
<img src="{filename}.jpg" title="{title}" description="{caption}"/>
{/entries}
</album>
{/exp:gallery:entries}
{
/exp:query}
</slideshow

Slideshow Preferences

Head over to the Monoslideshow demo page() and make all your changes to the preferences refreshing the slide show there as you go. When you are happy with how it looks click on the download XML button. This will let you save an XML file to your computer. Open this file and do you remember I mentioned the preferences tag above. Copy and paste the generated preferences into your mono_xml template where I pointed out above. All you need are the preference

SWFObject

SWFObject() if you haven’t come across it before is a Javascript Flash Player detection and embed script.

SWFObject is a small Javascript file used for embedding Macromedia Flash content. The script can detect the Flash plug-in in all major web browsers (on Mac and PC) and is designed to make embedding Flash movies as easy as possible. It is also very search engine friendly, degrades gracefully, can be used in valid HTML and XHTML 1.0 documents, and is forward compatible, so it should work for years to come.*

Download SWFObject 1.5()
For the purposes of this tutorial I won’t be covering the detection variables but the site has a load of info on how to do this. We will only be using one file from the download (swfobject.js)
Upload this JavaScript to wherever you keep your scripts on your server e.g. http://www.somesite.com/scripts/swfobject.js

The Slideshow Template

Open Up the template where you want the slideshow to appear.
In the header of the template we are going to link to our SWFObject we just uploaded

<script type="text/javascript" src="http://www.somesite.com/scripts/swfobject.js"></script> 

To use SWFObject we have to add a div to the template with an id of ‘mssHolder’.
This is where our Slideshow will appear

<div id="mssHolder">
<
p>Temporary holder for the Flash object</p>
</
div

We then add the javascript to display it. Change the paths and size to reflect yours

<script type="text/javascript">
var 
so = new SWFObject("http://www.yoursite.com/images/monoslideshow.swf""mss"480360"7""#ffffff");
so.addVariable("showLogo""false");
so.addVariable("dataFile""http://www.yoursite.com/index.php/gallery/mono_xml/");
so.write("mssHolder");
</script> 

*[EE]: ExpressionEngine *[XML]: Extensible Markup Language

 

5 Comments

Manji says:

More then one category cause an error

My Code:

@{assign_variable:gallery_url=“http://v4.kgamer.net/images/screenshots/”}
{assign_variable:gallery_name=“screens”}
{assign_variable:gallery_number=“3”}
<?xml version=“1.0” encoding=“UTF-8”?>

{exp:query sql=“SELECT cat_id,cat_folder FROM exp_gallery_categories WHERE gallery_id = ‘{gallery_number}’”}
{exp:gallery:entries gallery=”{gallery_name}” category=”{cat_id}” limit=“500”}
<album thumbnail=”{gallery_url}{cat_folder}/{category}_thumb.jpg” itemPath=”{gallery_url}{cat_folder}/” thumbnailPath=”{gallery_url}{cat_folder}/”>

<configuration> <transition kenBurnsMode=“randomZoomOut” kenBurnsStrength=“0.4” > </configuration> <contents> {entries} <image source=”{filename}.jpg” title=”{category}”> {/entries} </contents> </album> {/exp:gallery:entries} {/exp:query} @

gravatar icon
 

Editor says:

Manji, Have you a link to the page? Can you remove the <configuration> and <contents> tags also. Just keep it simple like I have in my example above for now.

gravatar icon
 

Manji says:

Your code doesnt work for me… I check the manual of monoslidehow 2.0 and changed the code as decribed. Maybe your code is for an older version of the slideshow?

Links (with your code):
http://www.kgamer.net/index.php/screenshots/mono_xml
http://www.kgamer.net/index.php/screenshots/mono

gravatar icon
 

Editor says:

Manji,

Your XML has image files names with apostrophes in them. I would try and eliminate these in your filenames first and try and output valid xml this way first.
For example Assassinís Creed 2_thumb.jpg

I have not looked at Version 2. As you can see this tutorial is from 2006

gravatar icon
 

Casper Scholly says:

Hi John Henry I used your tutorial to setup previously on this site: www.duncanyard.co.za and it worked fine. Recently on ie8 (Vista) it does not show the slideshow, but in FF, Safari, Chrome and Opera and ie7 on XP it works fine. Any suggestions (monoslide 1.5 and ur tutorial to the letter).

I’d also like to upgrade to Monoslide 2.0 that uses swfobject 2… is there any update on your tutorial coming? wink I looked all over the place, but your site comes up and no other real good tutorials out there. Please, please……

gravatar icon
 
 
Commenting is not available in this section entry.