Short tutorial on how to build a jquery slideshow with Drupal 7 and Views 3. No coding needed.

1. Introduction to Drupal 7
Session 4.1
Making the slideshow
Drupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 1

2. Agenda
• Slideshows
• How can we make it in a nice way
• Setting up the image styles
• Setting up the content type
• Setting up the views
• Creating a feature from your work
Drupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 2

3. Slideshows
• Frequently wanted feature from clients
• Can have different effects, sizes and designs
• Main idea is to cycle a certain number of
images in a nice way
• In the past, flash was frequently used,
nowadays, only javascript or jquery is used for
better performance and many other reasons
Drupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 3

4. The good slideshow we can offer
• We are good website builders, we’ll make:
– Slideshow with nice fading effect
– Slides will be manageable as normal content
– Slides will have order number for the sorting
– Slideshow will have configuration options for
advanced users
– Slideshow will be using only configurations, so
that work can be modified by other Drupalists
Drupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 4

5. What do we need to make it happen
• Image style for fixed dimensions of the images
• Content type with fields for the slides;
• Views plugin to implement jQuery effects;
• Views view block holding the configurations;
Drupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 5

6. Setting up the image style
• As the slideshow images are quite specific in
size, we’ll create a new preset for it
• Let’s say that the dimensions will be strictly
915px by 400px, any above will be cut
• Go to admin/config/media/image-styles
• Create new preset “slideshow” and use the
scale and crop effect to restrict dimensions
after trying to resize the image
Drupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 6

7. The image style is ready
Drupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 7

8. Creating the content type
• We want a separate content type in order to
let the website content administrator manage
the slideshows in an easy way
• Fields are simple:
– Title (which is mandatory and in anyway)
– Image (taking the image for the slideshow)
– URL (link to go to a specific page if available)
– Order (number which will be used in the sorting)
Drupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 8

9. The image field
• Create a new field for the slideshow content
type image, do not re-use current images (why
is that?)
• Only 1 image per node should be possible
• The field should be required
• Enable the alt and title fields input for better
SEO meta descriptions on the image objects
Drupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 9

10. The URL field
• Can be a regular text field, even though there
is a Link module for advanced link creations
• The field should not be required, the user
should have the choice to fill it in or not
• If the field is filled in, then the given image is
linked to somewhere
• If the field is empty, then the image does not
link to anywhere
• Only 1 value per node should be possible
Drupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 10

11. Order field
• The field is used to control the order of display
of slideshow images in the slider
• The order will be implemented from the Views
• The order field should be an integer value
(why?)
• The field may not be required
• Only 1 value per node should be possible
Drupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 11

12. Tweakings
• You can do some things to make the content type
better for administrators
– Remove the body field from the content type – we
don’t‘ really need this one in this case
– Manage the displays better
• The image does not need label
• The image can use the slideshow image preset
• The image link can have label inline
• The order field can either be hidden or put inline too
• By the way, you can upload some content now 
Drupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 12

13. Making the views slideshow
• Download and install
– Views Slideshow
– Libraries API
– The jQuery Cycle plugin (install in /sites/all/libraries)
• Enable Views Slideshow and Views Slideshow:
Cycle modules (which require Libraries API)
• Go and create a new view block
(admin/structure/views/add)
• Use the slideshow formatter option
Drupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 13

14. Creating the slideshow view
Drupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 14

15. Slideshow views configurations
Drupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 15

16. Slideshow ready
Drupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 16

17. Creating the slideshow feature
• The slideshow view
• The image style
• The content type
Drupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 17

18. Time for questions
Drupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 18

19. Contacts
Kalin Chernev
– E: kalata@shtrak.eu
– T: twitter.com/kalinchernev
– U: http://shtrak.eu/kalata
Drupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 19