Animations make websites vibrant and user-friendly. If you’ve designed your website using Drupal 8, you might be wondering if you can create animated slideshows. The answer is, yes, you can. There are a few modules that allow you to create slideshows with ease. You’d be able to set image ordering, speed of the frame, and effects during transition.
In this tutorial, learn how to create animated slideshows for your Drupal 8 website.
Step-by-Step Process
Here are the steps you need to take for this purpose:
Install Drupal 8 Modules and Add Image Content
The first thing you need to do is install the modules. You can install them using FTP, URL, Git, Composer, or directly upload the files. The modules necessary for creating animated slideshows are:
Views Slideshow
jCarousel
FlexSlider
Execute these codes to install:
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
In case you’re using cPanel or File Manager, you may be required to change the folder permission for /sites/default to 755. After this, you’d be able to create the …/libraries folder for JavaScript dependencies.
Once completed installing the libraries and their respective dependencies, proceed to creating Views. This requires creating a custom image content type along with a list of correlating Taxonomy terms.
When creating the new content type, here are the settings to apply:
No prompted to Front Page, Sticky at Top of Lists, or Revisions
No Comments
No Display of Author Name & Post Information
Again, you’d have to create a new content type and name it Slideshow Image. Then create an image field that will hold the image files to be used in the slideshow. Finally, it’s necessary that you specify the Thumbnail sizes.
Optional modules you may want to use are the Image Widget Crop & Crop API. These are preferred modules for those who want to crop images to meet the slideshow animation size.
Create a Block Using Views Slideshow
The next thing to do is create a Block. For this, go to Views and start with creating a new content filter. You need to select Views Slideshow as display.
In the Views Slideshow, you can change settings and configure aspects like frame speed, filter, and page turn effects. You’ll find settings for number and randomization in Views.
Here are the settings you should select for Views Slideshow:
Skin - Default
Effect - Fade
Slideshow Type - Cycle
Action - Pause on Hover
You can use slideshow animations for other purposes.
Create the jCarousel Animation in Block
For this tutorial and for demonstration purposes, the image change filter settings is the same across all the modules, namely, Views Slideshow, FlexSlider, and jCarousel.
So you should proceed with cloning the Views Slideshow Block and then create a new Views Block and set jCarousel as display.
Here are the settings we recommend to apply:
Wrap Content - Circular
Skin - Default
Number of Visible Items -Auto
Scroll - Auto
Save the changes you’ve made. You may want to compare the settings in jCarousel and Views Slideshow to adjust your web designs.
Prepare a Block for a FlexSlider Animation
Similarly, you’d have to create a FlexSlider Animation in a Block. Here are the settings we recommend to apply:
Option Set - Basic Carousel
Caption Field - Content:Title
It’s better to test your image slideshows and see how they appear with Views Slideshow, jCarousel, and FlexSlider as display engines. See which slideshow matches your requirements.
Then, go ahead and upload images for each slideshow size. Make the images ready for use in Panels & Blocks.
Embed Slideshow Blocks on Drupal Pages
Once you’ve created the slideshows, next step is to embed them in the web pages. You’d have to embed them for the header, footer, sidebar and other regions.
You’d have to use Panels & Block for positioning the slideshows. Use the three modules wherever required.
So that’s how you create and start using image slideshows animation for your Drupal 8 website. Which animation solution you adopt will be influenced by what theme and graphic design you’ve used and the image quality you expect.
For more assistance, get in touch with the customer support team.
In this tutorial, learn how to create animated slideshows for your Drupal 8 website.
Step-by-Step Process
Here are the steps you need to take for this purpose:
Install Drupal 8 Modules and Add Image Content
The first thing you need to do is install the modules. You can install them using FTP, URL, Git, Composer, or directly upload the files. The modules necessary for creating animated slideshows are:
Views Slideshow
jCarousel
FlexSlider
Execute these codes to install:
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
In case you’re using cPanel or File Manager, you may be required to change the folder permission for /sites/default to 755. After this, you’d be able to create the …/libraries folder for JavaScript dependencies.
Once completed installing the libraries and their respective dependencies, proceed to creating Views. This requires creating a custom image content type along with a list of correlating Taxonomy terms.
When creating the new content type, here are the settings to apply:
No prompted to Front Page, Sticky at Top of Lists, or Revisions
No Comments
No Display of Author Name & Post Information
Again, you’d have to create a new content type and name it Slideshow Image. Then create an image field that will hold the image files to be used in the slideshow. Finally, it’s necessary that you specify the Thumbnail sizes.
Optional modules you may want to use are the Image Widget Crop & Crop API. These are preferred modules for those who want to crop images to meet the slideshow animation size.
Create a Block Using Views Slideshow
The next thing to do is create a Block. For this, go to Views and start with creating a new content filter. You need to select Views Slideshow as display.
In the Views Slideshow, you can change settings and configure aspects like frame speed, filter, and page turn effects. You’ll find settings for number and randomization in Views.
Here are the settings you should select for Views Slideshow:
Skin - Default
Effect - Fade
Slideshow Type - Cycle
Action - Pause on Hover
You can use slideshow animations for other purposes.
Create the jCarousel Animation in Block
For this tutorial and for demonstration purposes, the image change filter settings is the same across all the modules, namely, Views Slideshow, FlexSlider, and jCarousel.
So you should proceed with cloning the Views Slideshow Block and then create a new Views Block and set jCarousel as display.
Here are the settings we recommend to apply:
Wrap Content - Circular
Skin - Default
Number of Visible Items -Auto
Scroll - Auto
Save the changes you’ve made. You may want to compare the settings in jCarousel and Views Slideshow to adjust your web designs.
Prepare a Block for a FlexSlider Animation
Similarly, you’d have to create a FlexSlider Animation in a Block. Here are the settings we recommend to apply:
Option Set - Basic Carousel
Caption Field - Content:Title
It’s better to test your image slideshows and see how they appear with Views Slideshow, jCarousel, and FlexSlider as display engines. See which slideshow matches your requirements.
Then, go ahead and upload images for each slideshow size. Make the images ready for use in Panels & Blocks.
Embed Slideshow Blocks on Drupal Pages
Once you’ve created the slideshows, next step is to embed them in the web pages. You’d have to embed them for the header, footer, sidebar and other regions.
You’d have to use Panels & Block for positioning the slideshows. Use the three modules wherever required.
So that’s how you create and start using image slideshows animation for your Drupal 8 website. Which animation solution you adopt will be influenced by what theme and graphic design you’ve used and the image quality you expect.
For more assistance, get in touch with the customer support team.
