The guide to implement a slideshow in Drupal 8

Jul 27, 2017
admin
The guide to implement a slideshow in Drupal 8

If you want to present your content in the form of a slideshow on your Drupal website, then the following information will be useful for you.

We post from time to time some step-by-step guides with the screenshots to help you manage complicated modules and enjoy new capabilities on your site. For example, we have previously showed how to set up a Panels module in Drupal 8. Today we’ll show how to implement a slideshow, especially a sponsor slideshow, on your Drupal 8 site with the help of the Views Slideshow module. This sponsor slideshow will display information about your sponsoring organizations and serve to promote them.

How to implement a sponsor slideshow on your Drupal 8 site:

  1. Download and install the Views Slideshow module as you usually do with Drupal modules, or use the installation guide for D8 modules. Enable this module on your admin page.
  2. Download jQuery Cycle and install the libraries, because otherwise Views Slideshow module won’t work.
  3. On your admin page navigate to Manage → Structure → Content types. 

    implement a slideshow in Drupal 8
     
  4. Click on the blue button called “+ Add content type”. You should see this:

    implement a slideshow in Drupal 8
     
  5. The “Display settings” tab allows you to specify which of your staff accounts was used and when, but this information isn’t important for your end users. If you manage all settings from the site admin account, this field is not necessary.
  6. The “Menu settings” tab can also be skipped in order to avoid overloading your slideshow with unnecessarily information.
  7. Click on the blue button named “Save and Manage Fields.” The content type “Sponsor” has been successfully added.
  8. As you can see, the “Title” and “Body” fields are added by default. If you want to add an “Image” field, click on “+ Add field” blue button.

    implement a slideshow in Drupal 8
     
  9. Choose “Image” from the drop menu and click “Save and continue.”

    implement a slideshow in Drupal 8
     
  10. If you agree with all the default requirements of the image (size, format, alt text, etc.), then just click “Save settings.” Otherwise, adjust them according to your needs on this page.

    implement a slideshow in Drupal 8
     
  11. Go to Structure → Views.
  12. Click “+ Add view” button.

    implement a slideshow in Drupal 8
     
  13. In the “View name” field type the name of your slideshow, for example, sponsor slideshow.
  14. Choose the “Content,” then select the type — say, “Sponsor,” sorted by “Newest first”.
  15. In the “BLOCK SETTINGS” area tick “Create a block”.

    implement a slideshow in Drupal 8
     
  16. “Display format” should be “Slideshow” of “fields.”
  17. Here you may also select a number of items per block.
  18. Hit “Save and edit” to save your view.

    implement a slideshow in Drupal 8
     
  19. The only thing that remains to be set is to exchange the “Title” and the “Logo” field. To do this, click the “Add” button, which is highlighted on the screenshot below.

    implement a slideshow in Drupal 8
     
  20. In pop-up window find “Logo.”
  21. After that click "Add and configure fields."

    implement a slideshow in Drupal 8
     
  22. Go to Structure → Block layout.
  23. Click on “Place block” to add this logo to your home page.

    implement a slideshow in Drupal 8
     
  24. Type “Sponsor” as a search query to find “Sponsor Slideshow.”
  25. Click on “Place block” in this pop-up window.

    implement a slideshow in Drupal 8
     
  26. Type <front> on the text box as shown below:

    implement a slideshow in Drupal 8
     
  27. Click “Save block” and it’s all finally done!

If you have any questions about the settings of a slideshow or any other feature on your Drupal website, feel free to contact Drudesk specialists, who are always ready to help with any questions related to your web resource.

Category
 Get new blog posts by email