Categories
Web Design Web Development WordPress

WordPress Widget Gallery Slideshow

WordPress Widget Gallery Slideshow

WordPress 4.9 was released last week with many new improvements. One of the new features is the ability to add a gallery in the widgets which is a very cool feature. Multiple images can be added at once and the images can be displayed in one or more columns along with the ability to select the size and order of images. This is useful if you want to display flyers for upcoming events or showcase sponsors, award winners etc.

But, the gallery widget also comes with its own limitations like not being able to create a slideshow with the gallery images. Making the gallery images into a slideshow allows you to add more images and not worry about losing space on the sidebar.

The gallery images can be converted into a slideshow/rotating images by adding some simple CSS and JavaScript code. Even if you are not a person who likes to code, don’t worry. This is very easy and simple.

First create your gallery.

  • Go to Appearance -> Widgets.
  • Drag the gallery widget onto the sidebar. Let’s give it a title of ‘Our Sponsors’
  • Then click on ‘Add Images’ and select the images you would like to add to the gallery.
  • Once you select the images, you can organize them in the order you would like.
    • Change the gallery settings if you wish. I set the ‘Link to’ field as none as I do not want to link the image. You can either link it to the attachment page or the media file.
    • Change the number of columns based on how you would like to place your images. Since I selected 4 images in my gallery, I set the columns to 2 so that the images will show up in a nice square. Of course, if we are making the gallery into a slideshow, set the columns to 1.
    • If you select the random order, every time you load your page, the order of the images will change.
    • You can also select the size of the images.
  • Click on ‘Insert Gallery’ to add the images to the widget.
WordPress gallery edit screen
Gallery Edit Screen
  • Click on the ‘Save’ button to display the gallery on your sidebar.

This is how the gallery will look on the front end.

Now it is time to add some code to make the gallery widget into a slideshow. We will be adding some custom CSS and JavaScript code. There are a number of ways to add custom CSS and JS to your WordPress site. You can either use a plugin or add it to your child theme.

Here are some plugins:

Here are some tutorials too if you do not want to use a plugin.

I used the Simple custom CSS and JS plugin to demo the slideshow.

Here is the markup of the gallery:

[php]
<section id="media_gallery-3" class="widget widget_media_gallery">

<h2 class="widget-title">Our Sponsors</h2>

<div id="gallery-1" class="gallery galleryid-7 gallery-columns-1 gallery-size-thumbnail">
<figure class="gallery-item active_slide">
<div class="gallery-icon landscape"><img class="attachment-thumbnail size-thumbnail" sizes="(max-width: 150px) 100vw, 150px" srcset="" alt="" width="150" height="150" /></div>
</figure>

<figure class="gallery-item">
<div class="gallery-icon landscape"><img class="attachment-thumbnail size-thumbnail" sizes="(max-width: 150px) 100vw, 150px" srcset="" alt="" width="150" height="150" /></div>
</figure>

<figure class="gallery-item">
<div class="gallery-icon landscape"><img class="attachment-thumbnail size-thumbnail" sizes="(max-width: 150px) 100vw, 150px" srcset="" alt="" width="150" height="150" /></div>
</figure>

<figure class="gallery-item">
<div class="gallery-icon landscape"><img class="attachment-thumbnail size-thumbnail" sizes="(max-width: 150px) 100vw, 150px" srcset="" alt="" width="150" height="150" /></div>
</figure>
</div>

</section>
[/php]

Since we can add any number of gallery widgets per page or per sidebar, we need to choose exactly which gallery widget we want to convert to the slideshow. For example, I have two gallery widgets in my sidebar, but I only want the first one as a slideshow. So, I will use the widget id to target that particular gallery. Here are a couple of ways to find out the widget id:

Once you have the widget id, you are ready to add the code.

Custom CSS:

[css]
#media_gallery-3 figure.gallery-item{
position:absolute;
display:none;
}
.gallery {
margin-bottom: 15em;
}
#media_gallery-3 figure.gallery-item.active_slide{
z-index:99;
display:block;
}
[/css]

JavaScript code:

[code lang=”js”]
jQuery(document).ready(function( $ ){
// Your code in here
jQuery("#media_gallery-3 .gallery figure.gallery-item").first().addClass("active_slide");
setInterval( "gcs_gallery_slideshow()", 5000 );
});

function gcs_gallery_slideshow(){
//var $next = $(‘.section.selected’).removeClass(‘selected’).next(‘.section’);
var $next = jQuery("#media_gallery-3 .gallery figure.gallery-item.active_slide").removeClass("active_slide").next(".gallery-item");
if ($next.length) {
$next.addClass("active_slide");
}
else {
jQuery("#media_gallery-3 figure.gallery-item:first").addClass("active_slide");
}
//console.log("test");
}
[/code]

There are a couple of things to remember.

  • Replace #media_gallery-3 with your widget id.
  • The number 5000 in the code is the speed of transition and equals 5 seconds. You can change the number as needed.

You can see a demo of the gallery slideshow here.

Leave a Reply