aDriv4 - MANAGER

Edit File: example-slideshow-thumb-pager.html

In this example you will create a views block that displays images in a slideshow using thumbnails of the images as a pager underneath the slideshow. This will demonstrate using Views Slideshow and Image Styles to display images.

For this example, we are going to display a single image from each content item of the type &quot;Photos&quot;, which we assume you have already set up with an image field. We are also assuming that Views Slideshow and at least one plugin is installed and activated.

<h3>Creating the image styles</h3>

The first step is creating the right image styles to display the images from the node. We will create one for the slideshow image, and one for the pagers. Go to <a target="_blank" href="base_url:admin/structure/views/add">Image Styles</a> and create the following two styles:

<dl>
 <dt>Style name</dt>
 <dd>slideshow_image</dd>
 <dt>Effects</dt>
 <dd>Scale and crop: 600px wide, 400px high</dd>
</dl>
<dl>
 <dt>Style name</dt>
 <dd>slideshow_thumbnail</dd>
 <dt>Effects</dt>
 <dd>Scale and crop: 30px wide, 20px high</dd>
</dl>

<h3>Creating the View and block</h3>

The next step is creating a view for the slideshow. Because the block will show the images in content, this view is considered a "Content" view. Go to <a target="_blank" href="base_url:admin/structure/views/add">add new view</a>, enter the following properties, and click Next:
<dl>
 <dt>View name</dt>
 <dd>Photo Slideshow</dd>
 <dt>Description</dt>
 <dd>Slideshow of images from Photos.</dd>
</dl>

Choose Show Content of type Photos. You can choose any way you wish to sort the content.
Untick the box next to Create a page and tick the box next to Create a block. Enter a block title and choose Slideshow from the Display format select box. Select fields from the other select box. Leave the remaining settings as they are.
Click on Continue &amp; edit.

<h3>Editing the view settings</h3>

Turn off the pager by clicking on Display a specified number of items in the middle column and selecting Display all items in the next screen, and applying the settings.
Enter a Block name by clicking on None at the top of the middle column.
Next, remove the Content: Title field from the fields list in the left column by blicking on rearrage under the arrow.
Next we have to add the thumbnail image field. Click on Add under the fields section and select your image field from the list. In the next screen, turn off the label, select Exclude from display and select slideshow_thumbnail from the Image Style select box. Under MORE, enter Thumbnail under Administrative Title.
Click on Apply (all displays).
Now we have to add the image field to display in the slideshow. Clcik on Add under the fields section and select your image field from the list. In the next screen, turn off the label and select slideshow_image from the Image Style select box. Under MORE, enter Display Image under Administrative Title.
Click on Apply (all displays).

<h3>Editing the slideshow settings</h3>

Click on Settings next to Format: Slideshow in the first column. In the screen that opens we can choose the options for our slideshow.
For the purpose of this example, we will only add the thumbnails as a pager, and leave the remaining slideshow settings as they are. Select the tick box next to Pager under Bottom Widgets. Select Fields from the Pager Type select box. Select the tick box next to Thumbnail.
Click on Apply (all displays).

<h3>Saving &amp; testing the view</h3>
Click on Save to save the view.
You can test the view by adding the block you have created to your theme.