Club Drupal

<p>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 <em>Views Slideshow </em>and <em>Image Styles</em> to display images.</p>

<p>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 <em>Views Slideshow</em> and at least one plugin is installed and activated.</p>

<h3>Creating the image styles</h3>

<p>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:</p>

<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>

<p>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 <strong>Next</strong>:</p>

<dl>

  <dt>View name</dt>

  <dd>Photo Slideshow</dd>

  <dt>Description</dt>

  <dd>Slideshow of images from Photos.</dd>

</dl>

<p>Choose <strong>Show</strong> <em>Content</em> <strong>of type</strong> <em>Photos</em>. You can choose any way you wish to sort the content.</p>

<p>Untick the box next to <strong>Create a page</strong> and tick the box next to <strong>Create a block</strong>. Enter a block title and choose Slideshow from the <strong>Display format</strong> select box. Select <em>fields</em> from the other select box. Leave the remaining settings as they are.</p>

<p>Click on <strong>Continue &amp; edit</strong>.</p>

<h3>Editing the view settings</h3>

<p>Turn off the pager by clicking on <strong>Display a specified number of items</strong> in the middle column and selecting <strong>Display all items</strong> in the next screen, and applying the settings.</p>

<p>Enter a Block name by clicking on <strong>None</strong> at the top of the middle column.</p>

<p>Next, remove the <em>Content: Title</em> field from the fields list in the left column by blicking on <strong>rearrage</strong> under the arrow.</p>

<p>Next we have to add the thumbnail image field. Click on <strong>Add</strong> under the fields section and select your image field from the list. In the next screen, turn off the label, select <em>Exclude from display</em> and select <em>slideshow_thumbnail</em> from the Image Style select box. Under MORE, enter <em>Thumbnail</em> under Administrative Title.</p>

<p>Click on <strong>Apply (all displays)</strong>.</p>

<p>Now we have to add the image field to display in the slideshow. Clcik on <strong>Add</strong> under the fields section and select your image field from the list. In the next screen, turn off the label and select <em>slideshow_image</em> from the Image Style select box. Under MORE, enter <em>Display Image</em> under Administrative Title.</p>

<p>Click on <strong>Apply (all displays)</strong>.</p>

<h3>Editing the slideshow settings</h3>

<p>Click on <strong>Settings</strong> next to Format: Slideshow in the first column. In the screen that opens we can choose the options for our slideshow.</p>

<p>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 <em>Pager</em> under Bottom Widgets. Select <em>Fields</em> from the Pager Type select box. Select the tick box next to <em>Thumbnail</em>.</p>

<p>Click on <strong>Apply (all displays)</strong>.</p>

<h3>Saving &amp; testing the view</h3>

<p>Click on <strong>Save</strong> to save the view.</p>

<p>You can test the view by adding the block you have created to your theme.</p>