Introduction to Drupal 7                               Session 4.1                           Making the slideshowDrupalist...
Agenda•    Slideshows•    How can we make it in a nice way•    Setting up the image styles•    Setting up the content type...
Slideshows• Frequently wanted feature from clients• Can have different effects, sizes and designs• Main idea is to cycle a...
The good slideshow we can offer• We are good website builders, we’ll make:       – Slideshow with nice fading effect      ...
What do we need to make it happen•    Image style for fixed dimensions of the images•    Content type with fields for the ...
Setting up the image style• As the slideshow images are quite specific in  size, we’ll create a new preset for it• Let’s s...
The image style is readyDrupalist: Kalin Chernev   Course by Init Lab (http://initlab.org)   7
Creating the content type• We want a separate content type in order to  let the website content administrator manage  the ...
The image field• Create a new field for the slideshow content  type image, do not re-use current images (why  is that?)• O...
The URL field• Can be a regular text field, even though there  is a Link module for advanced link creations• The field sho...
Order field• The field is used to control the order of display  of slideshow images in the slider• The order will be imple...
Tweakings• You can do some things to make the content type  better for administrators       – Remove the body field from t...
Making the views slideshow• Download and install       – Views Slideshow       – Libraries API       – The jQuery Cycle pl...
Creating the slideshow viewDrupalist: Kalin Chernev   Course by Init Lab (http://initlab.org)   14
Slideshow views configurationsDrupalist: Kalin Chernev   Course by Init Lab (http://initlab.org)   15
Slideshow readyDrupalist: Kalin Chernev      Course by Init Lab (http://initlab.org)   16
Creating the slideshow feature• The slideshow view• The image style• The content typeDrupalist: Kalin Chernev   Course by ...
Time for questionsDrupalist: Kalin Chernev       Course by Init Lab (http://initlab.org)   18
ContactsKalin Chernev       – E: kalata@shtrak.eu       – T: twitter.com/kalinchernev       – U: http://shtrak.eu/kalataDr...
Upcoming SlideShare
Loading in …5
×

Introduction to Drupal 7 - Making a slideshow with Views 3

2,593 views

Published on

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

Published in: Technology, Art & Photos
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,593
On SlideShare
0
From Embeds
0
Number of Embeds
205
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Introduction to Drupal 7 - Making a slideshow with Views 3

  1. 1. Introduction to Drupal 7 Session 4.1 Making the slideshowDrupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 1
  2. 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 workDrupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 2
  3. 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 reasonsDrupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 3
  4. 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 DrupalistsDrupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 4
  5. 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. 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 imageDrupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 6
  7. 7. The image style is readyDrupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 7
  8. 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. 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 objectsDrupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 9
  10. 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 possibleDrupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 10
  11. 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 possibleDrupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 11
  12. 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. 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 optionDrupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 13
  14. 14. Creating the slideshow viewDrupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 14
  15. 15. Slideshow views configurationsDrupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 15
  16. 16. Slideshow readyDrupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 16
  17. 17. Creating the slideshow feature• The slideshow view• The image style• The content typeDrupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 17
  18. 18. Time for questionsDrupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 18
  19. 19. ContactsKalin Chernev – E: kalata@shtrak.eu – T: twitter.com/kalinchernev – U: http://shtrak.eu/kalataDrupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 19

×