Posted on

How I Used WordPress Superb Slideshow Plugin In Template



In one post here, I wrote about my fascination for the wordpress slideshow plugin: superb slideshow and how I used it in a post. This superb slideshow plugin can both be used in posts/pages and in the template itself. A wordpress website I am currently pre-designing for our prospective client needed a little animation effect, this time in the index page, specifically in the header area. I thought again of the superb slideshow plugin and I realized I have never tried using it on an index page before.

Going over Gopi’s instructions did not make things easier as he really did not give a step by step guide for us php-challenged folks. I found myself puzzling over how to use the plugin and which xml file he used and where the images were stored. Actually, I was impatient as usual and so I really did not explore all information sources before erroneously deciding that the superb slideshow is a difficult plugin to use in a template. To make the story short, I finally found out how to use the superb slideshow plugin in a template.

How I used the superb slideshow plugin in a template

  1. I created the images I used for my slideshow, making sure all the images are of the same dimensions.
  2. I went to the superb slideshow settings/configuration in the dashboard and found that the default xml file that contains the data for the slideshow is the ‘superb-slideshow-v2.xml’ file.
  3. Instead of creating a new xml file, I just editted the existing ‘superb-slideshow-v2.xml’ file and inputted my images’ data there.
  4. Back in the plugin’s settings page, I adjusted the width and height entries to the actual dimensions of my images.
  5. Finally, I went to my template and inserted the following line of code in the place where I want the slideshow to appear:

Voila! I got some sort of animation effect on my template. The animation effect looked like the one below:

[superb-slideshow=filename=sss.xml&width=403&height=161]

Portion of header in the subject template…

Since the header of the site I was designing gave the effect of one ‘whole’ picture with an animated portion, I divided the picture into two. The left side is fixed and the other is a slideshow. It is here where I found that the plugin created a default top margin of 5px, which destroyed the ‘one whole picture’ effect I was trying to build. I tried messing with the css file of the plugin and, php-challenged as I am, was not able to come up with the right solution (or perhaps I just gave up a little too early). So, I just went the route of actually (physically) adjusting the picture itself (its size) instead of its coordinates.

A note on upgrading to newer versions

The wp superb slideshow plugin’s creator, Gopi, seems to be still keen on updating the plugin as he has created at least 2 updated versions of this plugin since I first used it. Thing is, he seemed to have never really cared about his users’ suggestion of fixing the problem where everytime you upgrade the plugin to the newest version, all files are overwritten and all images and xml files you have created and added are deleted. In the latest version, he still warns old users to backup their xml and image files before updating. This means he has still not addressed this issue. Thus, everytime you update the plugin:

  1. You must first access your server and do a backup of your previous slideshow xml/image files,
  2. Go to your wp plugin dashboard and click the superb slideshow ‘update’ link.
  3. When the update is done, go back to server and restore the xml/image files.

All in all, the plugin is cool, but it’s not necessarily your average user-friendly plugin. Hopefully the next versions would fix this shortcoming. And although presently one can create multiple slideshows in a post or page, we are still limited to only one on a template. Again, hopefully this issue will be given attention by Gopi. Man, I can’t help but be awed by these people. They must be geniuses – these plugin creators.

[nb]

Posted on

WordPress Slideshow Plugin: Superb Slideshow

Best WordPress Slideshow Plugin

slideshow codes removed 12/23/2011

After a suggestion was made to revamp the design of my boss’ company website to which the boss agreed, I immediately googled out for some inspiring website designs that would be both functional and pleasing to the eyes. One employee showed me some website designs she liked. Most involved a lot of animated images, most probably embedded flash elements. And all of them have black backgrounds. Having earlier known some of my boss’ likes and dislikes, I am not sure if he would agree to these suggested designs. Just the same, it wouldn’t hurt to give it a try.

Since there seems to be a focused attention on animated elements, based on the suggestions, I fear I may have to research on the area of embedding flash files in a wordpress web site. But before embarking on that mission, I had this idea of trying out the available wordpress slideshow plugins first. A slideshow of course is not as flashy and flexible as the real flash apps, but these just might work in place of embedding flash files. I discovered this plugin called the superb-slideshow plugin which can output a slideshow of images plus the following major features:

  • Automatically pause the slide show on hover.
  • Insert a line of text at the bottom portion.
  • Insert link code so that the whole slideshow box is a link for each particular image.
  • Multiple slideshows.

WordPress Slideshow Plugin Test

I tested the wordpress slideshow plugin and it does work. Gopi, the plugin’s author promptly responded to some questions I threw at him and helped me with the effects I wanted to output. I have yet to see of course the implementation, if it could be done and if he has the time to work on it, of some of my suggestions like the following:

  • Option to choose to have the current black background of the text into ‘transparent’.
  • Option to choose the vertical location of the text. e.g. middle, or top.

All in all, I think the plugin is pretty good. In the sample slideshow above, I choose not to use text since the black background bar tends to ruin the irregular shape effect.

You can download this wordpress slideshow plugin at the wordpress site, or you can visit the author’s homepage: Gopi’s Homepage.

(Note: The last time I updated this wordpress slideshow plugin, all the newly created files (xml and images) within the slideshow directory were deleted. The plugin author, Gopi, may have to re-do some coding in order to address this issue. So, in the meantime, should you decide to use this plugin, be sure to backup your xml and image files under the slideshow directory especially prior to updating to a newer version of the plugin.)

Update: As of version 4.0, the coder of this plugin still hasn’t addressed the issue of the deleted images and xml files. As soon as I updated, the images and xml files I created were gone, and a slew of error messages got displayed in this post. What I did is to create a folder of my images outside the plugin’s folder. This way, it won’t get deleted on update. As for the xml file, I got no choice but to backup before an update.

Update: 12/23/2011. By some careless lapse, I accidentally updated the plugin. Like before, the slideshow again messed itself up. Like before Gopi the plugin’s author have updated his plugin but never addressed the complaint of many users about his inability to correct a glaring error in his code design. All created xml are wiped out on each update. Since, the update I made was accidental, I was not able to back up my xml file. Darn.

Planned future posts: wordpress gallery plugin, slideshow pro wordpress plugin, wordpress album plugin, flickr slideshow plugin, wordpress plugins images, jquery cycle, wp slideshow plugin, jquery slideshow plugin.