The Community Media Slideshow module is designed to be use with the Community Media Theme, but can be used with any theme.

The module creates:

  1. Slideshow Slide Content Type (with Headline, Subhead, and Weight fields)
  2. Frontpage Slideshow View (with Block)
  3. cm_slideshow Image Style
  4. cm_slideshow Flexslider preset
  5. Picture mappings to image styles for different breakpoints

Flexslider requires downloading the Flexslider jQuery Library and copying it into a directory named flexslider in sites/all/libraries/flexslider/. Using a CM Starterkit this is done automatically, by placing the Flexslider library in the libraries folder under the profile.

In addition to the Flexslider library making sure you have these other modules and themes installed will ease the slideshow installation. The list is:

Modules

breakpoints
cm_slideshow
ctools
features
flexslider
libraries
picture
strongarm
styles
views
views_slideshow

Themes

cm_theme_zen (sub-theme to cm_theme)

Install

  1. Once you have these resources together, enable the cm_slideshow module and click ok. Any dependencies will show up in a prompt from Drupal asking if you want to enable them all.
  2. Click yes and Drupal will enable all of the modules at the same time.

Configuration

  1. Go to content => add content => Slideshow Slide.
  2. Fill in the fields; make sure you use a large picture for the image as it will be scaled to 1200 x 500. Now save.
  3. Now go to Structure => Blocks and click Configure next to the CM Slideshow block.
  4. In the vertical tab Pages select the radio button for Only the Listed Pages.
  5. Under 'Region settings', select a region from the select list that appears below the name of your theme.
  6. Enter to make the slideshow only appear on the front page.

Responsive images with the Picture module

The 2.x version of the theme requires the Picture module for responsive images including the Slideshow.
Visit https://www.drupal.org/node/1902264 for Picture Module Configuration.

cm_slideshow installs the picture mapping called Slideshow (admin/config/media/picture/list/slideshow), which is used as the field formatter for the image field of the view. This picture mapping decides which image is served to the browser depending on the browser width. They are based on the image styles cm_slideshow_mobile (by default up to 48.25em/772px), cm_slideshow_narrow (up to 60em/940px) and cm_slideshow_wide (anything wider than 60em/940px).

You can edit these image styles to use other image dimensions. But remember that the breakpoints are the ones mentioned above.

Troubleshooting

The cm_slideshow module now requires the Picture module to automatically display the best image size for the current browser width. If you are upgrading from earlier versions than beta3, you may have to set the following manually:

  • Make sure that the breakpoints are ordered from larger to smaller in admin/config/media/breakpoints/groups/cm_theme_zen.
  • Make sure that the image field in the slideshow view is using the Picture formatter and the Slideshow picture mapping.