Image Slider

In those circumstances where the need arises to present a strong visual experience but a video is too much, a visual slider is the answer. The Xidipity solution is quick and easy for most slide projects but has the flexibility to create sophisticated solutions to “Wow” the visual senses.

Disclaimer

Xipidity does not include a content slider out of the box and relies on the installation of a third party plugin to achieve this functionality. With numerous choices available on WordPress.org we shopped for a product which offered solutions from simple to sophisticated.  Smart Slider 3 by Nextend satisfied our requirements and has a free version available. However, if you are serious about sliders the “Pro Version” is probably a better alternative. 

 

In the web design community there are some who state sliders should not be used. I believe their objection is in many cases a slider fails to deliver a message and becomes nothing more than window dressing.

 

Experts state a good slide presentation has the following characteristics. 

 

  1. Consistent style

    For the experience to work the images should be the same size. I like using images framed in a cinemascope aspect ratio with the dimensions of 1630×699.  The main reason is I want to fill the screen horizontally but leave space for other content vertically. If I need to make a bigger impact such as showcasing products, I would consider a standard HD 1600×900 or full size 1630×917 image.

    ½×

  2. Make it visual

    If the slide contains a text message, make the message stand out.

    ½×

  3. Disclose the purpose of Slideshow

    Disclose within the slide show or display in the same visual space, the purpose of the slide show. Failing to do so places the presentation at risk of becoming window dressing.

    ½×

  4. Show, don’t tell

    In many cases images are better than words and rather than saying “my favorite color is blue”, show your favorite blue item as well.

    ½×

  5. Continuous Story

    The message needs to be a continuous stream from start to finish. Don’t jump from topic to topic or thread to thread. When the slide show is finished the viewer should feel it was a valuable use of their time. 

 

Smart Slider does not require images be assigned to a media category, but I find by doing so provides consistency and keeps the images better organized. 

 

The following are the media gallery categories created for these use cases.

 

Image Category

Verbose View

Animal Snapshots

Slug View

m-s-500px-animal-snapshots

 

The slug in this case is translated as follows:

  • m = media
  • s = slider
  • 500px = group name
  • animal = slider title
  • snapshots = slider title

Installation

  1. Install Smart Slider 3 Plugin if not installed
  2. Click the “Smart Slider” menu option from the admin left panel or admin panel menu bar
  3. Click the “Create Slider” button (values for this use case are in parenthesis)
    1. Slider Name: Name of Slider (Animal Snapshots )
    2. Alias: Name of Alias (m-s-500px-animal-snapshots)
    3. Width: your value (1630)
    4. Height: your value (699)
    5. Preset: Default
  4. Click “Create” button
  5. Click “New Slide” button
    1. Select 1st slide from Media Library (Image Slider – Image 000)
  6. Click “New Slide” button
    1. Select 2nd slide from Media Library (Image Slider – Image 010)
  7. Click “New Slide” button
    1. Select 3rd slide from Media Library (Image Slider – Image 020)
  8. Click “New Slide” button

    1. Select 4th slide from Media Library (Image Slider – Image 030)
  9. Click “New Slide” button

    1. Select 5th slide from Media Library (Image Slider – Image 040)
  10. Optionally click “AUTOPLAY” from the menu bar
    1. Click the “Autoplay” switch to enabled
  11. Click the “Save” button to save

 

Optional Text

The addition of text or a tag line is common in slide presentation. This is accomplished in Smart Slider by either adding a “text bar” or a text layer. The primary difference between the two is a text bar is applied to the entire slide deck and pulls it message from the slide “Name” and “Description”. A text layer is applied to a single slide and the message is created specifically for that slide. Although this presentation does not contain a text layer, the text layer method is what I prefer.

 

At this point the slider has been created and needs to be added to your content. To do so, go to the place where the slider is to be placed and click the smart slider button from the editor menu bar. Select the slider just created and the short code will be added. For your awareness slide decks do not display in the editor.

 

Slide Deck

Demonstration

Animal Snapshots from 500px

 

Xidipity Slide titled "Introduction", labeled as image #000 presented in Cinemascope
Xidipity photograph by Gaby Barathieu, labeled as image #010 presented in Cinemascope
Xidipity photograph by Iza Łysoń, labeled as image #020 presented in Cinemascope
Xidipity photograph by B C, labeled as image #030 presented in Cinemascope
Xidipity photograph by Marsel van Oosten, labeled as image #030 presented in Cinemascope
Slider

 

Attribution: 500px

 

Leave a Reply

Your email address will not be published. Required fields are marked *