Slideshow Efforts Compared

I have tried a few different slide show efforts for Drupal and now they are all running together in my mind. These are some notes on the different configurations to hopefully save some time later after the details become foggy.

Views Slideshow without Flex Slider

This setup is shown here and uses only Views with Views Slideshow. The View is called Featured Slider and is in a block. Views Slideshow is 7.x-3.0+18-dev. Views is 7.x-3.5. Width of the slideshow is 960px which is the same as the site width. To edit admin can edit block "View:  Featured Slider" or edit the view itself named "Featured Slider (Content)".

  • View Format: Slideshow | Settings -- Settings covers control placement top or bottom, but most is default.
  • The Content Field: Slider Image  is of the most interest with Formatter set to "Image" (only option) and the image style set to "fullslider".
  • In Configuration>Media>Image Styles I added a new style called "fullslider" (done prior to above step). "fullslider has one effect which is "Scale and crop", and it's set to 935 Width and 293 Height. This is the same dimensions as the images that were uploaded for the slideshow.
  • The images are introduced via a new content type named "Featured Slider". Interesting fields are "Slider Image" (Field type: Image-- Widget: Image) and "Slider Link" (Field type: Link-- Widget type: Link). The Link field is Hidden, but the Slider Image is displayed and with an Image Format. Image style is set to None (original image).

This was a fairly quick effort that worked well for the effort spent. I didn't try to change the size of the whole slideshow and let it fill the entire block. Also is a worry in relying to heavily on Views Slideshow when it hasn't  had a commit to the dev version in the last 9 months. It is an important module with 153,496 users at this time.

Using Colorbox Alone

The Colorbox module allows Drupal to use the Colorbox project which is developed outside of Drupal. The module looks well maintained and has 115,643 users at this time. The latest commit only hours ago.

My effort is under the Dust heading here. It's a neat little slideshow that is linked to from an inline image in the body and opens in a nice overlay. I's been a while since setting this up an it doesn't run automatic. There are buttons to scroll through the images.

  • Used the Insert module and in Colorbox settings set Image style to "None (original image).
  • Images are shown at 400px x 267px (original size) with thumbnails loaded in the browser at 100px x 67px. One of the thumbnails is the little inline image in the article that links to the slideshow, but I'm not sure what the others are for.
  • Colorbox has the ability to load some common forms in a JavaScript popup overlay, but it won't work with Captcha-free which I always use.
  • In conclusion it's for me not a full blown slideshow solution, but works well for what it does.

Flex Slider Outside of a View

Flex Slider can be used without Views, but the Flex Slider Views Slideshow of course can not. This example uses Flex Slider as a stand alone and not in a view. Flex Slider runs in a field attached to a properly configured content type in this case "Article".

  • The Article content type has a field named "Slider" (Field type: Image-- Widget: Image) added at the bottom. Manage Display has the field "Slider" set to display with the Format: flexslider. This uses the Option set: Hawk slider. That option set came with the Flex Slider module in a Features module entitled Hawk Slider. The main thing I see with that option set is that it uses the Normal image style: flexslider_full that comes with Flex Slider. "flexslider_full" has only one effect and it calls for Scale and crop 800x500 and can't be edited.
  • Images are loaded up on the Article creation form and they are 800px × 500px (scaled to 518px × 324px) in Firefox image information..
  • 3/11/2013 Updated Flex Slider to 7.x-2.0-alpha1 and disabled Hawk Slider option set.

Flex Slider Inside a View In a Mini-Panel

If the MAYO theme is default then the Slider discribed below will be here:

This is the set up for the Adaptive Theme that I'm trying and is the most complex. I have it on the home page here and am having trouble only with getting the  whole thing the size  I want.

  • Content type Slide has been created and each image is published with that content type.. 2 fields are added. Slide caption is the first with Field type: Image and Widget: Test area (multiple rows), The second is Slide image and it has Field type: Image -- Widget: Image. Manage Display has the Slide image field display with an  Image format. The style is None (original image).
  • The Mini panel is named "Mission slider" and has 2 columns. The left is a block with text, and the one on the right is a View named nodequeue_1. Can't see any settings in Mini panel that would effect the width of the block or the view. The mini panel itself is treated as a large block on the blocks administration page.
  • The layout of the Mini panel is provided by the Adaptive theme in the mini panel layout setting. It's set for Two column 33/66. No other real interesting settings in the Mini panel area.
  • Conflicts for me seem to arise in the Views settings verses the Flex slider option set. All works fine with the images and settings provided in the ATQQ demo site. The solution was to simply crop some of the height off the original images to keep  the slider from getting too tall.

 

Tags: