Monoslideshow and EE Gallery

Monoslideshow and EE Gallery

Posted on October 07, 2006 in ExpressionEngine, Tutorials // 21 Comments // Post Comment
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 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 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
1. {assign_variable:gallery_url="http://www.somesite.com/images/photos/"}
2. {assign_variable:gallery_name="myphotos"}
3. {assign_variable:gallery_number="1"}
4. <?xml version="1.0" encoding="UTF-8"?>
5. <slideshow>
6. <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.
1. {exp:query sql="SELECT cat_id,cat_folder FROM exp_gallery_categories WHERE gallery_id = '{gallery_number}'"}
2. {exp:gallery:entries gallery="{gallery_name}" category="{cat_id}" limit="500"}
3. <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.
2. {entries}
3. <img src="{filename}.jpg" title="{title}" description="{caption}"/>
4. {/entries}
5. </album>
6. {/exp:gallery:entries}
7. {/exp:query}
8. </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
1. <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
1. <div id="mssHolder">
2. <p>Temporary holder for the Flash object</p>
3. </div>
We then add the javascript to display it. Change the paths and size to reflect yours
1. <script type="text/javascript">
2. var so = new SWFObject("http://www.yoursite.com/images/monoslideshow.swf", "mss", 480, 360, "7", "#ffffff");
3. so.addVariable("showLogo", "false");
4. so.addVariable("dataFile", "http://www.yoursite.com/index.php/gallery/mono_xml/");
5. so.write("mssHolder");
6. </script>
TOP OF THE PAGE ˆ

21 Comments

On 21-10-2006 Irina said:
1

A great thing!!! I love animation very much! Thanks for such good news!!!
On 24-10-2006 Lea said:
2

Thanks for the wonderful tutorial and introducing me to this new type of Flash slideshow. Very interesting!
On 26-10-2006 Ryan Masuga said:
3

Point 3 (XML template) above makes sense, but instead of assigning variables at the top of the file, isn’t there a way to pass variables to the XML file? I would love to be able to use one common XML file throughout my site (common like a footer or header include) that just takes the gallery and category info and pulls up the correct pics.

I thought one way to do this would be to use flashvars, but I’m not clear on how to get a flashvar into the XML file (if that’s even possible). Any tips on making as generic and reusable an XML file as possible would be appreciated!
On 26-10-2006 Editor said:
4

Ryan,
I answered your question here in the forums
On 31-10-2006 Mariny said:
5

Thank you for the information about slideshow!I am fond of novelties and photo making.I’ve seen your image gallery,where you have been on honeymoon.I also were on Cyprus,you can see my photos as well on this two blogs. Good luck!Waiting for new photos!
On 25-12-2006 roblumba said:
6

Step 3 talks about downloading your XML template from here. However, I don’t see anything to download. Where is it?
On 09-01-2007 Editor said:
7

roblumba,
Sorry about that. Link is now going to my template exmaple.
On 15-01-2007 Eric said:
8

Hi! having problem with trying to add background music. I added soundPath and also backgroundMusic in album tag but nothing plays.. (((
soundPath="./sons" backgroundMusic="diferente.mp3"
Have an idea of what happens?
Thxx
On 24-01-2007 Christy said:
9

Hey thanks so much for this. I’m setting this up for someone who is using albums and naming the album indicator image the same as the category name was really problematic. Often his category names had unacceptable characters. I just changed “{category}” in the album thumbnail path to “album” and instructed him to name that image “album.jpg”. Thought I’d mention it in case others had the same problem.
On 08-06-2007 michael Montesa said:
10

I use movable type for my blog. I’m having problem embedding the monoslideshow. do you have any suggestion
On 20-06-2007 Thomas said:
11

Hey, many thanks for this tute and sharing your knowledge . . .

one concern . . . is it true the SWF files created with MS won’t render with IE7 ?? !!

If so that seems very problematic, esp in near future.

My readership is roughly 30% IE7 and growing daily.

Cheers,

Thomas
On 14-03-2008 Annika said:
12

Thanks for a great tutorial & templates.

I have one problem: My client needs to have categories (album names) that consists of several words, i.e. “My new product”.

How can I name the category.jpg to match the multi word category name so that it automatically gets shown when viewing all albums, or is there some other way? It doesn’t seem possible to add a category image to the category preferences.
On 30-03-2008 Euan said:
13

Have you any plans to write the second part of this tutorial?
On 31-03-2008 Euan said:
14

Following your instructions and having bought Monoslideshow I’ve now got it up and running at my site.

Just need to play around with some settings and add a few more images but overall very happy with it.

Thank you.
On 12-06-2008 Matt Jeans said:
15

Brilliant tutorial, had a couple of instances of it working fantastically on my Wedding Photography site for a while. However I’ve had this message from the host “As previously announced this did include a major upgrade from PHP4 to PHP5 so if you run a website that uses PHP scripts we do recommend you take the time to have a look and check it is still functioning as expected.” and no all it says is “No images found in .XML-file.”

Is there a different XML file for PHP5 (or am I barking up the wrong tree?) - Thanks
On 12-06-2008 John Henry said:
16

Matt, what version of ExpressionEngine are you running as the problem is more likely to be the having that lastest version of that installed as the slideshow XML uses just EE tags and no extra PHP other than that .
On 16-06-2008 david solomon said:
17

The screen capturing technique was indeed helpful for tutoring....but Im still not too comfortable with the XML template.
On 19-06-2008 showupnow said:
18

Hi, i just purchased monoslideshow. What is the EE Gallery? Where could I access it?
On 21-06-2008 John Henry said:
19

Showupnow, EE is ExpressionEngine which is a website publishing tool. The Gallery is an included module in the CMS
On 21-07-2008 Res said:
20

hi
thanks for this great possibility to combine the monoslideshow and EE gallery.
my question: i can not figure out how to sort the categories? EE seems not to accept my sort in the EE gallery admin. Thank you.
On 20-08-2008 Carlo said:
21

Hi there, is there any chance it could work with swfobject.js v.2?

TOP OF THE PAGE ˆ

5pieces

5pieces.com - Web design and coding, Articles, Tutorials, Reviews. Expression Engine Specialist.

Posted on October 07, 2006 in ExpressionEngine, Tutorials // 21 Comments // Post Comment

Ok lets start

EE Gallery Setup

The XML Template

Slideshow Preferences

SWFObject

The Slideshow Template

21 Comments

On 21-10-2006 Irina said:

On 24-10-2006 Lea said:

On 26-10-2006 Ryan Masuga said:

On 26-10-2006 Editor said:

On 31-10-2006 Mariny said:

On 25-12-2006 roblumba said:

On 09-01-2007 Editor said:

On 15-01-2007 Eric said:

On 24-01-2007 Christy said:

On 08-06-2007 michael Montesa said:

On 20-06-2007 Thomas said:

On 14-03-2008 Annika said:

On 30-03-2008 Euan said:

On 31-03-2008 Euan said:

On 12-06-2008 Matt Jeans said:

On 12-06-2008 John Henry said:

On 16-06-2008 david solomon said:

On 19-06-2008 showupnow said:

On 21-06-2008 John Henry said:

On 21-07-2008 Res said:

On 20-08-2008 Carlo said:

Post Comments

Members

Related Entries

Categories

Most popular entries