Embedding image slideshow in your WordPress site

Last updated on November 28, 2011. Tags: ,

Company owners, marketing managers or whoever is in charge of running the company website are usually fond of putting some sort of eye candy in their homepage. A slide show showcasing your products, services or anything you would like to emphasize about your company is a good idea.

Examples of such slide show can be found in my web services website Digital Concoction. In websites that run on WordPress CMS, you can insert a slideshow using the WP-Cycle plugin by Nathan Rice. You can download the plugin from WordPress' website.

When the plugin was installed and activated, you will see a new option WP-Cycle under the plugin menu of your dashboard. Clicking on it will bring you to an interface called WP-Cycle setting where you can upload image files as slides, set the size of the image and the transition effects:

wp-cycle-screen

The slides are image files; meaning you must upload JPEG, GIF or PNG files. You also need to insert a tag <?php wp_cycle(); ?> somewhere in your theme where you want the slide show to appear.

Image slides as links

You can turn the images into links by inserting URL to the "Image Links To" field at the right of the image and clicking update. If you put different links on different images, it means clicking the slide show can lead to different pages depending on which image is being currently shown. You can make them non-link images by simply leaving the field blank.

Depending on where you put the <?php wp_cycle(); ?>, the image may or may not render the same way if you make them links as oppose to making them non-links. When not defined in the CSS, major browsers (IE, Firefox, Chrome and Safari) do not put border on non-link image but put blue border on link images (violet for visited links). If the block element where you put the <?php wp_cycle(); ?> tag didn't define the attributes of the link and non-link images, you would encounter this problem.

The solution to this problem is to add #rotator { } in your CSS file and define the attributes of the link and non-link images; "rotator" is the ID of the division that contains the slide as generated by the <?php wp_cycle(); ?> PHP code. You can change the name of the ID in the WP-Cycle setting (it's at the bottom). If you wish to control its attribute in the CSS, you must replace #rotator with the ID that you defined in the WP-Cycle setting.

Image width and height restrictions

You can define the dimensions of the image in the WP-Cycle setting. After defining the dimensions, the images that you upload must be of these dimensions. You can upload image that are of greater dimensions, but they will be automatically scaled down to the defined dimensions. If the width and height of the image is not in proportion with the defined width and height, it might distort the image.

While the WP-Cycle will not allow you to upload images that has smaller width or height than the ones that were defined, you can bypass this by defining a smaller width and height, upload the image and then changing the defined width and height. The end result is that you will see the image being stretched to fit the defined dimensions.

The best thing that you can do with regards to size is to define the width and height based on the layout of your theme and stick to them. Then, resize the images that you will use as slides to your defined width and height using Photoshop or any similar image editing software.

Order of image slides

The WP-Cycle pluggin currently does not have the capability to control the order in which the images will appear. It works in a way that the image that was uploaded first is the one that is shown first. If you want to display images in a specific order, you need to dowload the image slides in your computer (assuming that you don't have a copy of these images, if you do you can bypass this step), delete them and upload them again in order that you want them to appear.

Posted by Greten on December 23, 2009 under WordPress

Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Google
  • StumbleUpon
  • Technorati

Related Posts

You might also be interested (randomly generated):

Read Comments

  1. Posted by Christopher Joel on 01.06.10 4:29 pm

    Hey Greten, I’ve been trying to work with WP-Cycle and it just doesn’t seem to work for me. Does your http://digicon.hub.ph/ site use the most current WordPress version (2.9.1)? I’m using the correct code (according to Nathan Smith’s site), but the plugin doesn’t do anything but display one image. Do you have any ideas?

    You can see my site at http://christopherjoel.com

    Thanks
    CJ

  2. Posted by Greten on 01.09.10 9:02 am

    Hi CJ

    I cannot see your site. When I got there, I encountered a bunch of error message. Maybe it’s your WordPress, either the core files or the theme that is not working properly. Perhaps you should reinstall WordPress, use another theme or both.

Post Comments





Comment Rules and Reminders

  • The links to the commentator's e-mail do not have nofollow tag. However, I will be very strict in approving comments.
  • When you comment, please say something that indicates that you indeed read my post. If your comment is a general statement that can fit to any blog post about any topic, it will be regarded as spam.
  • What you write in the name field may include keywords to your website provided that (1) it's only up to four words long and (2) at least one of these four words is your first name or nickname. I rather reply to Bob or to Joe Smith than to Online Marketing Tips.
  • Please double check your comment before clicking the "Post" button. Once you clicked it, there will be no way for you to edit your comment.
  • Fields marked with asterisks (*) are required. Your email will never be displayed in public.