The Genesis Responsive Slider is a versatile slider, allowing you to display images added as “featured images” to pages, products, or posts. In this guide, I will show you how to set up the Genesis Responsive slider.
To get started, install and activate the Genesis Responsive Slider Plugin.
Go to Dashboard > Genesis > Slider Settings.
- Choose whether to Display Posts, Pages, or Products
- If choosing pages or products, select which categories or tags to display
- If choosing to include/exclude by Taxonomy (Category, Tag etc.), choose which to include/exclude
- Choose whether to Include/Exclude Post IDs
- Choose which Post ID to include/exclude
- Set number of slider images to display
- Set the time, speed and slider effect for the slides:
Set Maximum Slider Width & Maximum Slider Height according to the theme settings.
- Fun: 800px by 500px (CSS class of two-thirds first)
- Modern Blogger Pro: 700px by 400px
- Swank: 1200px by 500px
- Jane: 660px by 440px
- Pretty Chic: 800px by 400px
- Pretty Sweet: 740px by 500px
- Check whether to display Arrows in Slider
- Check whether to display pagination in slider. (If you are using Modern Blogger Pro, DO NOT check this box – there is a conflict between the Genesis Responsive Slider and the Genesis Grid plugin, which interferes with the display of posts on a mobile device).
- Check the following as appropriate:
- Link the slider to the Post/Page
- Display the Post/Page Title in Slider?
- Display Content in Slider?
- Hide Title & Content on Mobile Device?
- If displaying content, choose whether to display post excerpts, or post content.
Once the settings have been displayed, move the slider into the appropriate widget area:
- Dashboard > Appearance > Widgets > Home Page Slider (or other named widget).
To make sure your images fill the slider correctly:
- Make sure that your images are at least the size of your slider’s settings.
- Install & Run the Regenerate Thumbnails plugin.
- The Regenerate Thumbnails plugin will resize your featured images to fit into your slider (and other featured image sizes throughout the site.)
- The Genesis Responsive Slider will resize a wider image to fit into the slider. It will not enlarge a narrower image.
- The Slider will crop a taller image to fit into the slider.
- Images will display better if they are all the same aspect ratio – landscape images will work better, and are less likely to be cropped awkwardly. if you use a mix of landscape, portrait, and square images, the images will not fit the slider appropriately.
- This means, for example, if your slider is set at 700px by 400px, and image which is that ratio (for example 1400px by 800px) will display correctly. An image which isn’t that ratio (for example, 1400px by 600px) will be adjusted to be 700px wide, which means the height will then be displayed at 300px, and it will not fit into the slider area correctly)
If you are looking to display a slider which DOES NOT require the use a featured image from a page, post, or product, then I highly recommend the Soliloquy Slider. This is a premium slider, which will allow you to add unattached images. It will also allow you to add a slider into any page or post, without needing a special widget area.