Introduction: Add Dynamic Image Slideshows
Solution: Install the Views Slideshow, jCarousel, & FlexSlider modules for Drupal 8. These modules will make it easy to build image slideshows from Views & use as Blocks in Panels.
There are different filtering methods with Image content types and Taxonomy categories. [tool]Drupal 8[/tool] site builders will need to establish a publishing system for Slideshow Images.
Let’s get started.
Step One: [stepName]Install the Drupal 8 Modules & Add Image Content[/stepName]
Start: Using either the Upload, FTP, URL, Git, Composer, etc. methodologies, install the three required modules Views Slideshow, jCarousel, & FlexSlider for Drupal 8.
mkdir -p libraries/jquery.cycle && cd$_ && wget https://malsup.github.io/jquery.cycle.all.js && mkdir -p ../../libraries/jquery.hoverIntent && cd$_ && wget https://raw.githubusercontent.com/briancherne/jquery-hoverIntent/master/jquery.hoverIntent.js && mkdir -p ../../libraries/json2 && cd$_ && wget https://raw.githubusercontent.com/douglascrockford/JSON-js/master/json2.js
Settings for New Content Type: “Slideshow Image”
- No Promoted to Front Page, Sticky at Top of Lists, or Revisions.
- No Display of Author Name & Post Information.
- No Comments.
Hint: Create a new content type named Slideshow Image and add an image field to the display to hold the files that will be used in Slideshows. Makes sure to configure the Thumbnail sizes.
Optional Modules – Image Cropping:
Note: If you prefer to crop images on upload to meet every slideshow animation size, install Image Widget Crop & Crop API. It may also help to have more than one image content type.
- Image Widget Crop:https://www.drupal.org/project/image_widget_crop
- Crop API:https://www.drupal.org/project/crop
- Cropper Library:https://github.com/fengyuanchen/cropper
—> upload to /libraries/cropper/dist
Next: The same Image content type can be used for multiple slideshows by adding Taxonomy terms. You can also associate Taxonomy with different sized images for Theme regions.
Finish: Build the Taxonomy terms that will be used to filter slideshow images, i.e. Frontpage, Sidebar, Header, Footer, etc. and add it to the node type via CCK fields customizing the display.
Step Two: [stepName]Create a Block with Views Slideshow.[/stepName]
Start: When the Taxonomy is created & the slideshow images are uploaded, go to Views and create a new content filter for Slideshow Image files & choose Views Slideshow as display.
Hint: You can change the settings on the animation, including frame speed, filter & page turn effects, etc. in the Views Slideshow settings, while using Views for number & randomization.
Recommended Settings for Views Slideshow (Drupal 8):
- Slideshow Type:Cycle
- Action: Pause on Hover
Step Three: [stepName]Create a jCarousel Animation in a Block[/stepName]
Start: In this Tutorial, we will be using Views Slideshow, jCarousel, & FlexSlider interchangeably with the same image filters in Views to demo the software.
Next: Clone the Views Slideshow Block and save the new Views Block with jCarousel as the display. Use the provided configuration settings to change the animation effects & speed.
Recommended Settings for jCarousel in Views (D8):
- Wrap Content:Circular
- Skin: Default
- Number of Visible Items:Auto
Finish: Save the View and compare the differences between jCarousel & Views Slideshow for your web design requirements. Create custom animations & slideshows for each image size.
Step Four: [stepName]Create a FlexSlider Animation in a Block[/stepName][step]
Recommended Settings for FlexSlider in Views (D8):
- Option Set:Basic Carousel
- Caption Field:Content: Title
Hint: Test your image slideshows with Views Slideshow, jCarousel, & FlexSlider as display engines to see which one matches your Theme, Block region, or Sidebar animation.
Finish: Upload new images for each slideshow size (header, footer, sidebars, etc.) or advertising campaign. Create new the slideshow animations ready for Panels & Blocks.
Step Five: [stepName]Embed Slideshow Blocks on Drupal Pages[/stepName][step]
Hint: Create different sized image slideshows for the header, footer, & sidebar regions in the theme. Display different slideshows for site sections, ad campaigns, or as GUI navigation.
Views Slideshow, jCarousel, & FlexSlider are all open source & free to use, allowing artists & developers to experiment with the variables for a wide range of custom animation effects.