Introduction: Add Dynamic Image Slideshows
This Tutorial will discuss how to create an animated JavaScript slideshow of images in Drupal 8 using the Views Slideshow, jCarousel, & FlexSlider modules.
Problem: How to use Views to create JavaScript slideshow animations from image files stored on a Drupal 8 website? What options for image ordering, frame speed, & transition effects?
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. Drupal 8 site builders will need to establish a publishing system for Slideshow Images.
Let’s get started.
Step One: Install the Drupal 8 Modules & Add Image Content
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
Note: If you are using File Manager & cPanel, you may need to change the /sites/default folder permissions to 755 in order to create the ../libraries folder for the JavaScript dependencies.
Next: After installing the JavaScript libraries & other dependencies, prepare to create the Views by creating a custom Image content type and an associated list of Taxonomy terms.
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: Create a Block with Views Slideshow.
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):
- Skin:Default
- Slideshow Type:Cycle
- Effect:Fade
- Action: Pause on Hover
Q
Finish: Compare Views Slideshow to other solutions to use different JavaScript animations in Drupal 8 Theme regions or for separating campaigns, managing ads, decoration, icons, etc.
Step Three: Create a jCarousel Animation in a Block
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
- Scroll: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: Create a FlexSlider Animation in a Block
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: Embed Slideshow Blocks on Drupal Pages
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.
Finish: Use Panels & Block regions in Drupal 8 to position JavaScript image slideshows using Views Slideshow, jCarousel, & FlexSlider wherever required for website design.
Conclusion: Drupal 8 & JavaScript Image Slideshows
Summary: Which JavaScript animation solution you choose for Drupal 8 depends on the Theme, Graphic Design, & Image Quality. Each slider has features for a GUI element.
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.
Check out these top 3 Drupal hosting services:
- To end your queries about Top web hosting, simply click on this link.
