If you’re planning to build a showcase website with WordPress you’d probably insert at least in the home page some images with a sliding effect.
By using jQuery make them slide is pretty easy, but I had some trouble to choose a way to manage the images in the cms.
My goal was to use the fewest number of plugins possible, because i want something usable on most of website I have to develop.
WordPress put at our disposal a gallery tool which is reachable by clicking on the “Add Media” button on top of the body article.
By using this we have a big pro: WordPress takes care of re-sizing and cropping the images.
The con is that by default this system will show only a list of thumbnails linking to the fullsized image.
Here’s an example with Link thumbnails to: Image File option and no js to make it open in a modal window.
First Thumbnail Caption
Second Thumbnail Caption
Third Thumbnail Caption
To avoid those thumbs and make a real slideshow I used the thumbnail feature of WordPress combined with wp_get_attachment_image function.
Here’s the code:
Please take note that if you want to have a fixed size for the images you have to add a width and height set to the thumbnail system of WordPress.
This is explained here.
This is an example of the code above:
Third Thumbnail label
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
First Thumbnail label
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Second Thumbnail label
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
(many thanks to Twitter for sharing Bootstap ui 🙂 )
This will produce a markup like this:
Some improvement we can take care of
Let the user choose witch images show in the slideshow
If you need to choose which images put on the slideshow i suggest to install a plugin that let you assign a semantic tag to a media element: Media Tags (at this link you can also find the documentation for get_attachments_by_media_tags function).
The you can easily retrieve only the desired image by calling:
and pass $images as first parameter to the function showed above.
update: I suggest to prepend a ‘@’ to avoid php warnings if no image can be found.
Force images dimensions
You can easily avoid image dimension error by adding a new set of width and height to the re-sizing system of WordPress.
This is done with add_image_size function.
For Example in my case: