If you're getting started with Drupal 8, there are some key features you'll need to master.
You'll probably want to learn how to set-up calendars, contact forms, comments, multi-lingual sites and of course, slideshows.
In this tutorial, I'll show you how to build your first Drupal 8 slideshow.
Step #1. Getting set up with Views Slideshow
First, we need to install the modules and libraries needed for our slideshow:
- Download the Drupal 8 version of the Views Slideshow module.
- Install and enable the module.
- Go to https://github.com/malsup/cycle
- Click the Download ZIP button as seen below:
- Extract the folder you just downloaded.
- Rename the folder to /jquery.cycle/
- Upload the files to the /libraries/ folder in the root of your site. This is different from Drupal 7, so be careful.
- When you're finished, your folder structure will look like this:
- Within directory, libraries create directory named jquery.hoverIntent
- Download the latest version of the JQuery hoverIntent plugin
- Place it inside the jquery.hoverIntent directory.
Now you can go back to your Drupal site and start setting up the slideshow:
- Go to Structure > Content types.
- Make sure you have a content type with an Image field attached:
Step #2. Create the view
Now we're going to use Views to create our slideshow:
- Go to Structure > Views > Add new view.
- Enter a "View name".
- Click "Create a block".
- For "Display format", choose "Slideshow".
- Click "Save and edit".
- On the left-hand side, look for the "Fields" area. Only "Content: Title" will be showing.
- Click "Add".
- Search for your image field and choose that field.
- Click "Add and configure fields".
- Click "Apply".
- Scroll down to the Preview area at the bottom of the page and you will see that the image has been added.
- Click "Save" to finish creating your View.
Step #3. Publish your slideshow block
Now let's publish our View so that people can see it:
- Go to Structure > Block layout.
- Click "Demonstrate block regions".
- Choose the region you want to use for your slideshow. In my example, I'll use "Content":
- Find the block region you want to use and click "Place block":
- Find the block that you just created and click "Place block":
- Under "Pages", choose which pages you want the slideshow to appear on:
- Click "Save block".
- If your chosen block region has multiple regions, make sure your block is correctly placed. In this case, I want it at the top:
- Click "Save blocks".
- Go and see your slideshow published on your site:
Step #4. Create image styles for your slideshow
At the moment our images are all different sizes and don't fit into the block region. Let's create an image style to ensure that all the images have the correct size.
- Go to Configuration > Image styles > Add Image style.
- Enter an "Image style name".
- Enter a "Machine readable name".
- Click "Create new style".
- Choose an image effect. In my example, Resize will guarantee that all the images are the correct size:
- Choose a Width and Height for your images. This will depend on the size of the block region you've chosen.
- Click "Update effect".
- Go back to edit your View:
- Under "Fields", click on your image field to edit it.
- Set "Image style" to the style you just created.
Save your view and visit the front of your site. Your slideshow should be working:
Pro tip: if you need help to make your slideshow responsive, enable the "Responsive images" module in the Drupal core. That will provide more image style options under Configuration > Responsive image styles.
Step #5. Add controls to your slideshow
Finally, let's add some controls so that our slideshow is easier for visitors to navigate:
- Go back to edit your view again.
- Under Format, click "Settings" next to Slideshow".
You'll now be able to add controls to your slideshow, including Previous / Next buttons, a counter, and a pager:
About the author
