Views+Slideshow

//The following 20-40 min tutorial is to show you how to develop a simple slideshow and activate a related jQuery dependency. You might be able to integrate this into your CV assignment somehow, but it is by no means required. It is recommended that you spend some time on some of the 'recommended next steps' at the bottom of this tutorial over reading week.//

So to get started...

1. You'll need to install the [|Views Slideshow] module. //When you enable it be sure to tick off Views Slideshow and Views Slideshow: Cycle – and any other required modules.// 2. Now that Views Slideshow is installed we'll need some content to display, so note the instructions below for creating a dummy 'slideshow' content type for demonstration purposes.


 * Creating a 'Slideshow' Content Type**

1. Navigate to Structure >> Content Types and click on '+ Add content type' 2. Name your new content type 'Slideshow' and within Publishing options untick 'Promoted to front page' and within 'Comment settings' set 'Default comment setting for new content' to 'Hidden' (and it probably makes sense to untick 'Main Menu' in 'Menu settings' as we'll be building a block rather than a page. Click on 'Save Content Type'. 3. Click on 'Manage Fields' next to the new 'Slideshow' content type. //Now to add an image field...// 4. In the field editing screen, enter 'Slides' in 'Add new field' and 'slides' in 'Field' – set 'Type of data to store' to Image and Click on Save. On the next screen just click on 'Save field settings' – we don't need to change any settings.

This next screen is important, we have to configure the rules for our slides.

//This is where we can set rules to streamline the image submission process. After you set up a few image publishing workflows (slideshows, jQuery carousels, whatever) you realize that you want to standardize incoming material so you have more options available to you as a designer.//

5. On the option configuration screen set the 'file directory' to 'slideshow' (this will store our uploaded slides to a specific folder in sites/default/files), set the 'Minimum image resolution' to 640x480 (this rule will ensure we don't receive images that are too small for our display), tick off the 'Enable Title' field. 6. In 'Number of values (underneath the bottom of the above image) set it to 10. Click on 'save settings' 7. Back on the 'Manage Fields' page click on 'Save'

To save us time, I have collected five (CC licensed) images from [|this photoset] on flickr. You can download them below...



...now to make our first Slideshow. Navigate to Add Content >> Slideshow. Name your Slideshow 'Slideshow' (Imaginative, I know) and enter a few sentences of filler text in the 'Body' field. Add each of the images in the photoset you downloaded and give them each a title (this will appear over images if you hover over them). Click on 'Save' to complete the slideshow. You'll be dumped on the 'node view' of this slideshow – it looks unruly, but don't worry as a site vistor would never have access to the content in this manner, we're going to feed it into our view.

Now to construct the view...

1. Navigate to Structure >> Views and click on '+ Add a new view'. 2. Enter 'Test Slideshow' in the 'View Name' field and set the view to Show 'Content' of type 'Slideshow' 3. Untick 'Create a page' and tick 'Create a Block'. (don't worry about the 'Display format' options) //We'll be displaying the slideshow as a block.// 4. Click on 'Continue & edit' to configure the view. 5. In the 'Format' Section Click on 'Unformatted List' ...

6. ...a popup will open up, change the view to Slideshow and click on 'Apply (all displays)'.



7. ...you'll notice the above message on the next popup (the 'Settings' options for the slideshow). We have not installed the jQuery cycle plugin yet – jQuery tools are never included within modules (Views Slideshow or otherwise) as they are developed and maintained outside the drupal community. We'll need to go download it before we do any more work on configuring the slideshow. Click on 'Apply (all displays)' and then on the view configuration screen click on 'Save'. 8. Navigate to http://malsup.com/jquery/cycle as per the warning prompt and click on 'Download the Cycle Plugin' – and download the 'Cycle Plugin' file to your desktop. 9. In FTP navigate to the local folder for your Drupal install and navigate to sites/all and create a new folder called 'libraries'. This is where we can place jQuery or plugins to compliment modules and site functionality. 10. As per the warning message above, you need to make a folder within 'libraries' called jquery.cycle and upload the file you downloaded to it (sites/all/libraries/jquery.cycle) 11. Now return to Structure >> Views and edit 'Slideshow'. Click on 'Settings' beside Format: Slideshow

//A number of options will be presented to us, we don't care about anything about but these options for the moment.//

12. Note that there are many effects available, we are only interested in 'Fade' for the moment. //You might want to play around with other options later.// 13. In the 'Actions' section just leave the settings as are but not the 'Pause on hover' and 'Pause on Clock' options. 14. As usual, Internet Explorer is not as forgiving as modern browsers – so tick off 'ClearType' and 'ClearType Background' under 'Internet Explorer Tweaks'. //Note the custom options available through the other download as well.//



//These are the options for setting up slideshow controllers. We can use some combination of a pager, controls (next/previous) and a slide counter and nd these can be placed above or below the slideshow.//

15. Tick off 'Controls' in 'Bottom Widgets' and click on 'Apply all Displays'

//Okay, we are ready to go – we just need content.//


 * Setting up our Slideshow**

1. Within the edit view click on 'add' beside 'Fields' and add 'Content:Slides' and untick 'create a label' on the following screen and then click on 'Apply (all displays). //Note the 'Image Style' options – as per last week's tutorials, you can customize how any image is displayed within a view or node. We'll come back to this later.// Additionally, click on 'Multiple Field Settings' and untick 'Display all values in the same roll' (otherwise your slideshow will just display a long vertical chain of images). Click on 'Save' 2. For the time being we'll just put this block on your CV page in progress. So do this on the Structure >> Blocks page. Put it in the 'content' section and ensure that it only displays on the CV page. 3. Navigate to your CV Page My slideshow looks like this. Note the controls in the lower left. These can be styled through CSS. Additionally if you let the slideshow cycle for a bit, you'll see it is a bit funky as one of the images is a different size than the others. Let's clean up our slideshow a bit...

1. Navigate to Structure >> Blocks and edit the Slideshow block. Enter to override the default title and make the clumsy title disappear. 2. Navigate back to Structure >> Views and edit the 'Slideshow' view. Click on 'Content: Slides' under 'Fields' and change the 'Image Style' to 'medium'. //By default images are often displayed as they are uploaded – as we learned last week, we can make Drupal auto-format any number of image styles to be used across the site in different ways.// Click on ' Apply (all displays)' and save your view.

If you go back to inspect your slideshow now it should be standardized now – but the slides are rotating very quickly, let's fix that...

3. Edit your Slideshow view, click on 'Settings' beside 'Format: Slideshow' and you'll get the following screen... 4. The 'timer delay' is the time in milliseconds between transitions change it to 15000 (15 seconds). //You can also adjust the speed of the actual transition in the 'Speed' field and set a delay to accomodate for the initial page load or randomize the order of the images in the slideshow.// 5. Click on 'Apply (all displays)' and then save your view.

If you navigate back to your CV page you should have a reasonably behaved slideshow now... and you now have the skills to apply this elsewhere. Once you are complete this exercise you should consider trying (or at least thinking about) some or all of the following:


 * Make an image size based off the width of the main content column and then apply it within the slideshow. //When you work with slideshows you have to do so while being mindful of where you will be putting them!//
 * Try to experiment with the various pager/control options and other transition effects.
 * There are other ways to deal with image content – instead of making a content type that contains a 'set' of images, you could make an individual content type for images, make a taxonomy for it and then send images to different slideshows versus the tags that are applied to them.
 * Feel limited by Views Slideshow? Note all the other options listed as 'Related modules' at http://drupal.org/project/views_slideshow
 * Finally – if you are interested in working with video, node the media module at http://drupal.org/project/media – there are loads of modules that utilize popular APIs (YouTube, Flickr, etc.) to plug into it and serve content in a similar fashion to the workflow above. In fact, in many cases (see Media: YouTube) the workflow to make a content type 'wrapper' for external content is more straightforward than the exercise you did.

//The takeaway lesson here, this exercise illustrates how you can build content types around the capabilities of specific modules/and or views. Please put some time into experimenting with this workflow and the suggested further steps above as it will open up numerous possibilities when you are working on your site after reading week.//