How to create a pager of thumbnail images in Views Slideshow

Description

Collection: Advanced Site Building in Drupal 7Chapter: Building a Slideshow Using Views Slideshow

In this video we go through the steps of creating a thumbnail pager in Views Slideshow. Once we get this squared away, you'll be able to tell that we're getting close!

Transcript

So next let's get our pager looking right. So we want to change the size of the images. So we're going to need a unique image style for that and then we need to set the pager to display using that image style.

And we'll have to use a hidden field for that because we can't reuse the image field that's being used for the node display without changing the image style for it as well. So first let's save this. So I'll scroll up and click save and let's go to image styles.

I'll open up coffee with ALT D, type in image and hit enter to go to image styles. So now we could use thumbnail here, right? It sounds like it makes sense these are thumbnail views of this particular image. But the context here might have some very specific requirements for the display.

It might need to be a particular height or particular width. We're also going to crop it down so that it's a square instead of simply a full thumbnail of either a portrait or a landscape image. So there could be some specific settings that don't apply to thumbnails everywhere.

So we're going to add a new style. So I'll click add style. For the style name we'll type blog slideshow pager and I'll click create new style.

Now just as a quick note, if we thought that we would reuse this style for other slideshows on our site, we might want to rename this to slideshow pager instead of blog slideshow pager. This is a very specific context we're implying with the style name and we might want to broaden that out if we think we'll use it other places. For now I think this is good.

So let's select the new effect. Again we're going to use scale and crop and I'll click add. For width we'll select 40 pixels and because this is going to be a square we'll set 40 pixels for height as well and I'll click add effect.

Okay. Now just for kicks let's add one more effect to make these thumbnails bl ...

When you have an active membership, you will be able to see your progress here.

Skill focus: Site BuildingSkill level: Intermediate - Advanced

Get ready for a dive into some of Drupal's most powerful tools for site builders. Here we look deep into Views, Panels, Display Suite, and Context modules for laying out Drupal pages. We uncover importing content into a Drupal site with the Feeds module, build and customize a slideshow with Views Slideshow and immerse ourselves in ways to spam-proof our site. Most importantly, we look at how all of these tools work together and how to decide which tools are best for which situation.

Before watching this series, you will need a fresh Drupal 7 installation. Follow the videos in the Setting Up a Web Environment With Drupal to get Drupal set up on your Windows, OSX (Mac) or Linux machine.

Some of the key points we'll be covering include:

How to set up administrative tools to speed up your building process.

How to configure content types and decide when to share fields and other configuration.

How to use the Panels modules to position content

How to use Display Suite for positioning content and building new view modes without code!

Working with advanced Views tools like relationships and argument-passing

How to build a slideshow with Views

How to import content into your site using the Feeds module

Who this collection is for

This collection is for anyone who wants to learn the most powerful tools and techniques for organizing and positioning content on a Drupal site. This will of course be useful for determining which techniques to use on your own projects, but because we will cover the most common techniques you will be likely to run into when working with existing Drupal projects, this collection will help you tremendously when working on a team.

Prerequisites

A basic familiarity with Drupal concepts and terminology will be useful. If you start to feel lost, you may want to review the "Build Your First Drupal 7 Web Site" collection where we cover these. This collection is intended as a kind of sequel to that collection, so we build off of the ideas from it.

It looks like there might be an issue playing videos in this browser. We're working on better cross-brower experience, but in the meantime please try the latest Chrome or Firefox browsers. Or, you may be able to watch the video directly without progress tracking or transcript: