Slideshow Setup (Framework v.2)

  • Posted on May 01, 2011

Our Themes incorporates the Slides jQuery plugin from Nathan Searles.

To access the slider options navigate to Appearance > Theme Options -> Slider (tab). Here you will see many options to display your slider content. This article will walk you through the various settings.

Enable the Slider

Check this box to enable the slider. The slider is displayed on your front page only.

Slider Retrieval Method:

You may display the slider using selected Pages or choose a Category that will contain your slides.

Display Method:

Slides can be displayed in three ways; Manual Control, Thumbnail Mode, or Images.

By choosing manual control, all HTML before the "more tag" is displayed in the slide. By default, each slide will link to the specified Page or Post. You may also define the total slider height based on the length of your content.

By choosing thumbnail mode, all HTML before the "more tag" is displayed in the slide with a thumbnail image of your choice. To set the thumbnail image for the given slide, type the FULL URL to the image in the "Custom Page (or Post) Image" meta box. When selecting thumbnail mode, the slider options panel will ask you for a defined width and height. Images are automatically resized. You may also define the total slider height based on the length of your content.

By choosing image mode, a single image is displayed in for each slide. To set the image for the given slide, type the FULL URL to the image in the "Custom Page (or Post) Image" meta box. When selecting image mode, the slider options panel will ask you for a defined width and height. Images are automatically resized.

Jump to: How to create slides

Slider Width

Our themes are based on a 24-column grid system, therefore the slider width is determined by a specific grid number (14-24). If you want your slider to be displayed at full width, you would set the grid count to 24. For advanced users: If you modify the width of your sidebar or content column, you can specify the corresponding grid size here.

Slide Navigation

You can opt to show or not show navigation for your slides by enabling the "Prev/Next" or "Paginated Dots". If you choose not to show any navigation, be sure Auto Start is enabled.

Pause on Hover

Select whether the slideshow should automatically pause on mouse hover.

Transition Animation

Available options are Slide, Fade, and Crossfade

Animation Speed

Duration of animation (default: 1000 = 1 second)

Delay Time

Delay time in between animations (default: 3000 = 3 seconds) *This setting requires Auto Start to be enabled

Slides Setup

Setting up the slider requires no additional plugins. The integrated slider uses the core WordPress Pages (or Posts) to deliver your slide content. To set up your slides, you must first decide which method you will use e.g; images or text. If you want to show a series of graphics or photos, you will want to use "Image Mode". If you want to use freeform text as your slider content, you should use the Manual or Thumbnail modes.

You'll also want to decide where you're slides will "live". As described above in retrieval method, you can either use single Pages or Posts from a defined category. These are essentially the same. It's just a matter of preference in how you like to structure your content. In the examples below, we'll be using Pages.

Creating Image Slides

To set up your slider with static graphics or photos, you'll first need to create a few Pages (Pages → Add New). When a user clicks a slide, by default it will take them to that Page.

As an added option, you can have the slide link elsewhere on your site or to external link. To do this, you will need to set the Page Template to "Redirect" (example) and add a Custom Field named "redirect" with the value set to the link the Page will be redirected. (example).

To specify the images that will appear as your slides, create a Page and upload an image via the "Add an Image" button. Once the image is uploaded, copy the FULL URL PATH to the image.

The image must exist on your domain. No externally linked images are allowed. Images will be automatically resized as specified in the theme options so be sure the orientation is the same.

While the image upload modal window is still active, look toward the bottom and copy the full path to the image (example) to your clipboard. You don't have to click "save changes" or anything. Just click the "x" to close the modal window.

Now, in the Page Image Settings field (example) paste the URL to the image you just copied. Save the Page and your slide is ready. You can now select this Page in the "Select Pages" option of the slider configuration (Appearance → Theme Options → Slider).

Creating Text Slides

There are two methods to display your custom text as slides: Thumbnail Mode or Manual Mode. These two are essentially the same, except in thumbnail mode, a custom image will appear as a thumbnail image inline with your text. (The size and alignment of the thumbnail can be changed in the slider options). When using Thumbnail or Manual modes, the text of the slide will be cut off at the "more tag" while Everything before the "more tag" will be shown in the slide and is not shown on the linked Page. You can insert your own HTML, however be sure to equally limit the amount of content as the slider height is fixed.

Assigning thumbnails to slides is done the same way as outlined above (in Creating Image Slides).

Was this tutorial helpful? Share it with your friends on Twitter & Google!

 
comments powered by Disqus