How to Create Beautiful Promoted Content Slideshows

Adam Moore will lead the first part of this session with Introduction to Views Slideshow.

This session will cover some techniques that can be used to create attractive slideshows for promoted content. These are very useful for website homepage, section homepages or anywhere that content needs to be featured in an attractive way.

I will be demonstrating how to set up, configure and theme these slideshows using the Views Slideshow: Dynamic Display Block module http://drupal.org/project/views_slideshow_ddblock. I will be demonstrating the use of the 2.x branch which is still in a dev state.

I will show some custom template files and discuss the kinds of customizations you may want to make to them.

Lastly, I will provide some other general tips about methods and modules that work well in conjunction with this type of setup, such as configuring node types to hold details about your slides and slideshows, and removing the slides from website search results. Some of the discussed modules will include:

Embed Views (http://drupal.org/project/embed_views)
Search Config (http://drupal.org/project/search_config)
FileField Sources (http://drupal.org/project/filefield_sources)
External Links (http://drupal.org/project/extlink)
Node Blocks (http://drupal.org/project/nodeblock)

SESSION NOTES

Example Sites with Views Slideshow DD Block in use

http://headstrong.s702.sureserver.com/
http://www.evolat.com/
http://www.retrobabble.com/
http://www.junikind.com/
http://www.themeshark.com/demo/deepsea/
http://www.themeshark.com/demo/stingray/

Slideshow Capabilities

Reuse slides in multiple slideshows.
Slides can link to any URL, internal or external. Other methods are better for featuring nodes on the site.
Multiple Slideshow Styles – It is easy to create news styles for use in different features of a site. Admin can select the style for each slideshow that they create.

Modules

Primary Functionality

Views Slideshow (http://drupal.org/project/views_slideshow)
Lets you turn views into very cool slideshows. Lots of configuration options. Uses the jQuery Cycle plugin.
Views Slideshow Dynamic Display Block (http://drupal.org/project/views_slideshow_ddblock)
This module plugs into the Views Slideshow module, which is gaining a large number of plugins that extend its capabilities. It takes the place of the existing ddblock module, and makes it much easier to create the cool, sophisticated slideshows.

Foundations

Views – of course!
CCK – duh!
FileField
ImageField
ImageAPI
ImageCache
Link
jQuery update

Extra Features

The following modules are not required but provide nice enhancements for this configuration.

Embed Views (http://drupal.org/project/embed_views)
We are creating views displays which we will be embedding directly into node templates. We do want to generate blocks which will clutter the blocks interface and impede performance.

Search Config (http://drupal.org/project/search_config)
Since we are creating nodes which are really only for promoting other content, we do not really want those nodes showing up in the search results for the site. This module makes it easy to hide specific node types from the search index entirely.

FileField Sources (http://drupal.org/project/filefield_sources)
This slick little module adds the ability to pull images directly from other websites or from an existing image used on another node.

External Links (http://drupal.org/project/extlink)
This handly little module will use jquery to automatically detect links to external sites and make them open up in a new window when clicked. This is really useful in this situation since we do not know whether the slide link will be set to internal or external.

Node Blocks (http://drupal.org/project/nodeblock)
This module can be useful on sites where you need to be able to embed the slideshows into regions of the theme. If using panels, this is not needed.

Custom Content Types

The approach I take to creating these promoted content slideshows involves 2 content types, one for the slides and one for the slideshow.

Promo Slide

The fields on the promo_slide content type get mapped by views_slideshow_ddblock into the appropriate variables which get output into the templates for the slideshow.

node_title – Tab Link Text
field_promo_image – Slide Background Image
field_promo_title – Full Slide Title
field_promo_teaser – Promo Text
field_promo_link – Link URL – The admin can specify either an internal or external link.

Promo Slideshow

There are only 2 fields on the promo_slideshow content type.

field_slide_ref – Manage Slides (node reference, ) – this field allows the admin to attach slides to the slideshow and to easily rearrange the order of the slides.
field_ddblock_display_style (text, Select Dropdown) – Display Style – this allows the admin to select the display style for the slideshow. These style are each represented by a different views display.

Create Views Slideshow Display

We will create views which use the Views Slideshow DD Block display style to configure the type of slideshow that we want to use.

DEMO the Views Slideshow interface.

Slideshow Theming using Embedded Views

This technique require creating a custom template file for the promo_slideshow content type. The template is very simple. The only thing we need in the template is the output from the view display that we created above.

<?php
print views_embed_view(‘promo_slides_noderef’, $node->field_ddblock_display_style⁰[value], $node->nid);
?>

$node->field_ddblock_display_style⁰[value] specifies which display style has been selected. We pass in the node id as an argument.
Alternative Considerations

There is of course the option to use modules like Views Attach or Viewfield or Node Reference Views, but these modules only allow for a single views display to be associated with all nodes. With the embedded views combined with the display style field, each node can have its own display type.

Creating Custom Slideshow Templates

The Views Slideshow DD Block module comes with several useful templates for creating different type of slideshows. You can use these as a starting point for creating your own custom templates.