Need to create a visually stunning slideshow for your Drupal 8 site? One that you should be able to effortlessly customize to your liking?
Luckily, this rhetorical question suggests to you its own answer: the Views Slideshow module in Drupal 8!
An empowering tool which enables you, after just a few intuitive steps to take for setting up the right context and for pulling off the due configuration, to create your own slideshow (of any type of context, not exclusively images).The one to appear in a View.
Moreover, it grants you almost unlimited power of customization, as well! Practically you get to put together a personalized “combo of settings” for each one of the Views that you'll create.
Now let us proceed with our step-by-step guide on how to build a slideshow in Drupal 8 using the Views Slideshow module (had to specify this, since there's also the Slick method for building slideshows in Drupal):
1. First and Foremost: Install All The Needed Modules and Libraries
First things first: before you rush in and “play” with all the settings put at your disposal, you need to properly download and enable everything you'll need for building your slideshow.
Well, these are the main steps to take:
1. Start by making up your mind on how you'll download your Views Slideshow module, (its Drupal 8 version obviously): will you download it directly from its module page on Drupal.org or by using Drush? If you prefer the Drush alternative, these are the lines what you'll need to enter: drush dl views_slideshow then drush en views_slideshow -y (for enabling your module)
2. Now if you've chosen the first method instead, simply unzip the file you will have downloaded from the module page and paste it to your Drupal 8 site's directory: yoursitesname/module
3. Keep in mind that you'll need to enable Views Slideshow Cycle, as well
4. Can you spot the “Download ZIP” button on the top right corner of your screen? If so, just click on it!
5. Unzip the library that you've just downloaded
6. Once you've unzipped it, create its future folder, naming it "jquery.cycle"
7. Now pay particular attention to this step (since it's in this aspect that the two apparently identical installations processes, Drupal 8's and Drupal 7's, differ): you'll need to upload your resulting files to the libraries/ folder in the root of your website
8. And this is what you should be looking at right now if everything went well with all the downloading and enabling steps you've completed so far
9. Now you'll need to create a brand new content type that should contain your slides: Structure > Content Type > Add content type
10. Next, you'll inevitably get to the Manage Fields section. Go to “Add a Field” and make sure you'll have a content type with an image field attached.
2. Build A Views Block
1. Head to Structure > Views > Add new view
2. Think of a suitable name for it
3. Click on “Create a Block”
4. In the block's settings- “Display format”, select “Slideshow”
5. “Save and edit”
6. Can you spot the “Field” section, on the left side of the screen? It shows only “Content:Title” by default right now; feel free to delete that default title if you don't find it necessary to have it displayed on your Drupal site
7. Click on the “Add” button
8. Next, look for your image field, then scan through all the available fields there and select the one(s) you'd like to include in your slideshow
9. Then click on “Add and configure fields”. Also, in order to set up your slideshow's style (all its future effects here included, as well), go click on "Slideshow", under “Format”.
10. Click on “Apply”
11. There! Now you should be able to vizualize your recently added image in the Preview section that you have in the bottom of your page!
12. As soon as you're done adding all the fields that you consider a “must” to your slideshow, just click on “Save”.
And voila! You've just built your Views block!
Let's move on to the next key step to take as you build a slideshow in Drupal 8:
3. Configure and Then Publish Your Slideshow Block
Finally! You're closer than ever to getting your View displayed on your Drupal 8 site:
1. Go to Structure > Block layout
2. Once there, click on the "Demonstrate block regions"
3. Next, carefully select the area on your website that you'd like your slideshow to show up. Do you want it displayed in “Sidebar first” or maybe in “Content” or rather in the bottom of the page?
4. Once you've decided upon the region that you'd like it published on, just click on the “Place block” button (you'll find it next to “Content”)
5. Another more key selection to make are we're almost done! Choose the page that you'd like your slideshow to get published: scan through the list of web pages displayed under “Pages” and... make up your mind.6. If you're dealing with a block region including several regions, ensure that your block is properly placed, as well!7. Once you've made your decision, click the “Save block”
At this point you must be looking at your slideshow published on your Drupal site!
4. Set Up Image Styles for Your Slideshow
By now you must have already noticed that the images that you will have included in your slideshow are of different sizes.
The solution, so that they should all fit into the block region? Creating an image style!
1. Go to Configuration > Image styles > Add Image style
2. Name your image style
3. Next enter a "Machine readable name"
4. Click on the “Create new style” button
5. Next go to “Effect” and select an image effect from those listed in the drop-down menu (Crop, Resize or... another one)
6. Then set up your image's width and height (keep in mind that they will depend greatly on your chosen block region's sizes)
7. Finally click on “Update effect”
8. Now it's time to edit your View
9. Click on your image field (under the “Fields” area) for getting it edited
10. Next in the “Image Style” field simply select the style you've just created
Click “Save” and feel free to check your slideshow on your website.
Useful Tip: in case you're facing the challenge of building a responsive slideshow in Drupal 8, remember to enable the “Responsive images” module in Drupal core.5. Add Some Controls, too, As You Build a Slideshow in Drupal 8
Since it must be more than just a visually impressive slideshow that you might want to put on your Drupal 8 site, but a user-friendly one, too, aimed at enhancing users' navigation on your website, some controls are definitely a must.
Therefore, here's how you add them:
1. Go back to the screen where you get to edit your view
2. Click on “Settings” (neighboring “Slideshow”, under Format)
3. There, select your controls: go for a pager, a counter or for previous-next buttons...
TADA! This is how you build a slideshow in Drupal 8!
Give it a try! If we've skipped adding any crucial information to our our step-by-step guide, feel free to “warn” us. Also, if you encounter any type of problems through the process, don't hesitate to let us know. We're ready to use our Drupal expertise to “save the day”, your day!
We do Web development
Go to our Web development page!
