Using Genesis Responsive Slider

If you would like to add a slideshow to your page, one of your options is “Genesis Responsive Slider”. Genesis Responsive Slider allows you to build a slideshow out of posts within your website, but it can offer a lot more than that.

If you’d like to build a slideshow out of your normal posts, you can easily do so. However, if you’d like to build a completely custom slideshow, which isn’t tied to any of the existing content on your site, you should probably start by creating a custom post type, just for the slides.

Creating the “Home Page Slides” Post Type

If you already see “Home Page Slides” in your administration menu, you can skip this step. If you don’t already see “Home Page Slides” in your administration menu, you can download the post type configuration, and then import it into your site. To import the configuration into your site, the Types plugin will need to be active. If it’s not active on your site (if you don’t see a “Types” menu in your administration menu), please email the webmaster and ask us to activate it for you (please provide the address of your site).

To begin importing the configuration, go to Types -> Import/Export in your administration area. Then, click the “Choose File” button, and locate the post type configuration ZIP file you just downloaded. Next, click the Import File button. Once you do that, you should see a screen that looks like the following screen shot.

01-import-post-type

Check the “Overwrite Settings” box under “General Settings”, and ensure that the checkbox next to “Home Page Slides” is checked. Once you’ve done that, click the “Import” button. At that point, you should see “Home Page Slides” in your administration menu.

Configuring the Slider

Next, you’ll need to configure the actual slider. To do so, you’ll need to go to Genesis -> Slider Settings in your administration menu. If you don’t see that menu item, please email the webmaster and ask us to activate Genesis Responsive Slider on your site (please provide the address of your site).

There are a total of four different sections on the Slider Settings page.

02-slider-general-settingsGeneral Settings

To begin with, you’ll need to choose what content type you want to pull the slides from. If you created the “Home Page Slides” custom post type, you should choose “home-slide” from that menu. If you would like to use your normal posts, you can leave it set to “post”.

Next, you can choose specific taxonomies to use in your slideshow. If you’re using the Home Page Slides content type, you can leave that option set to “All Taxonomies and Terms”. If you are using the “post” content type, you can narrow things down to a specific tag or category by selecting it from that menu.

In general, you can skip the next few options, until you get to “Number of slides to show”. There, you will specify how many slides you want in your slideshow. The default is 5, but you can set this to any number you desire.

You can also skip the “Number of posts to offset” option.

Finally, choose how you want the slides to be sorted; the default is to sort them most recent-to-oldest.

03-slider-transition-display-settingsTransition Settings

Next, you can choose how long you want each slide to appear on the page. This setting is in “milliseconds” (seconds * 1,000; so, the default of 4000 milliseconds is a total of 4 full seconds).

The next option is how long you want the transition between slides to take. The default is 800 milliseconds (0.8 seconds).

Finally, you can choose whether you want the slides to slide right-to-left when they transition from one slide to the next, or if you want them to fade into each other.

Display Settings

The maximum slider width should be set to 960 pixels for most usage throughout the UMW website. In some cases, the slider won’t need to be more than 700 pixels, but, setting it to 960 will still work fine.

For various gallery/arts/museum sites at UMW, the maximum slider height should be set to 200 pixels. For most other usage throughout the UMW website, the maximum height should be set to 400 pixels.

If you would like users to be able to advance/rewind the slideshow, check the box next to “Display Next/Previous Arrows in Slider.”

If you would like small dots to appear below the slider, one for each slide in the slideshow, check the box next to “Display Pagination in Slider.”

04-slider-content-settingsContent Settings

The content settings are the meat of this plugin. You have quite a few different options here, all of which determine what type of information will be included in the slideshow.

  1. Do not link Slider image to Post/Page – If you check this box, clicking on a slide will do nothing. If you leave it unchecked, clicking on the slide will take you to the original piece of content from which the slide was pulled.
  2. Display Post/Page Title in Slider – If you check this box, the Title that you give to the piece of content will appear in the caption area for the slide; if you leave it unchecked, the title will not be displayed at all.
  3. Display Content in Slider – If you leave this box checked, the content of the original post will be displayed in the caption area of the slide; if you uncheck the box, that content will not appear on the slide. If you leave the second box unchecked, and you uncheck this box, no caption will appear with the slide at all.
  4. Hide Title & Content on Mobile Devices – If you leave this box checked, the caption area (if applicable) will not appear on devices with small screens.
  5. Select one of the following – If you have the third box checked (to show the post content in the slider), this is where you would determine what shows up as the caption. You can choose to show the post excerpt (which will either be a truncated version of the full content, or will be the manual post excerpt, if set); or, you can show the full content of the post.
  6. More Text (if applicable) – Use this to specify what text you want to display at the end of any shortened excerpts/content within the slideshow. If you are not showing the content of the post in the slider, this will have no effect. If you are showing the full, non-truncated content of the post, this will not appear, either.
  7. Limit content to XXXXX characters – If you are showing the post content on the slides, you can shorten that content to a maximum number of characters (letters, numbers & spaces).
  8. Slider Excerpt Width (in percentage) – If you are showing a caption on the slides, you can specify how much of the total slide width you want the caption to take.
  9. Excerpt Location (vertical) – Here, you can specify whether you want the caption to appear at the top of the slide or the bottom.
  10. Excerpt Location (horizontal) – Here, you can specify whether you want the excerpt to appear at the left edge of the slide or the right edge.

Creating New Slides

Once you have the slider set up, you can begin creating content to populate your slideshow. Whether you’re using standard posts or the custom “Home Page Slides” content type, the process is basically the same; it’s also essentially the same as creating any piece of content.

Some things to keep in mind when creating content for slides:

  1. Be sure to set a “Featured Image” for the content. That featured image will be used as the image in the slideshow. As such, you should also make sure that the image is at least as large as the “maximum” width/height of the slideshow.
  2. If you are displaying titles in your slideshow, keep the titles of your content short. The longer the title, the more room it’s going to take up in the caption area (potentially leaving little-to-no room for the content, if applicable).
  3. If you are displaying content in your slideshow, and you don’t want that content to get cut off or overrun the caption area, you’ll need to keep it very succinct.
  4. If you would like your slides to link somewhere other than the original piece of content, you can potentially use the “Page Links To” area to redirect that piece of content somewhere else.