Rotating News/Image Feature

The featured slideshow allows you to create a set of rotating images and captions to highlight news articles, events, and other types of content on your site.

1. Enable the modules listed above. Be sure to include FlexSlider Views Slideshow and Views Slideshow Cycle.

Create a Rotating Feature FlexSlider Option Set

• Configuration > Media > FlexSlider > add Option Set
• Name it Rotating Feature
• Select flexslider_full under Image Style.
• Change the Animation, Animation speed (time between images), Slide direction etc. as desired.
• Click on Navigation and Control Settings and make sure all the checkboxes are checked.
• Save the Option Set.

Create the Rotating Feature Content Type

Content Type Export Download

1. Create a custom Content Type with the following fields:
   • Title (default)
   • Feature Image - Image field 978px wide by 540px. Image is responsive so it will resize based on region location and device.
   • Caption - Long Text with WYSIWYG toolbar.
   • Related Story URL - Link field, no title, open in new window.
     
2. Save and add a few Featured Images.

Create the Rotating Feature View

Views Export Download

1. Create a View in the following way:
   • View name: Rotating Feature
   • Show: Content of type Rotating Feature
   • Uncheck Create a page and click on Create a block
   • Click on Continue & edit
2. Click on Unformatted under Format and select Slideshow. Configure as shown:
    
3. Add the following Fields to the Fields list in the following order:
   • Related Story URL: URL as Plain Text - Exclude from display.
   • Feature Image: See configuration below
   • Title: Feature title
   • Caption: text that displays to describe the feature.
   • Edit link: so you can easily get to the feature to update.
4. Configure the Image field -
   • Use Image formatter
   • None (original image) Image style
   • Link image to nothing.
   • Use the Related Story URL token in the Output this field as a link of Rewrite Results.
     
5. Configure the Title Field:
   • Click the Exclude from Display check box
   • Uncheck the Link this field to the original piece of content 
   • Scroll down to Rewrite Results and click on Output this field as a link. 
     

   • Scroll down and set the Prefix and Suffix text as follows:
     

6. Configure the Caption Field:
   • Click Rewrite the Output of this field and add the following code:
     
7. Change sort date if desired (default is set to Post Date (asc)).
8. Adjust # of items in pager as desired.
9. Click on the Advanced text on the far right panel of the View
   • Scroll down and click on CSS Class and add caption-right
     

Configure the Block

When you are all done, you have a View: Rotating Feature: Home Block in the Disabled area of your Blocks listing. Click on configure:

• Assign to the Content Region
• Show block only on the <front> or other page you want.

Add Styles with CSS Injector

1. Enable the CSS Injector module and create a new rule - Rotating Feature
2. Download and add the following CSS to the rule.

Important Note: You can change the position of the caption to the left or right by adding the following class to the View - caption-right or caption-left. These styles are in the downloaded CSS file.

Download the Exported View and Content Type

You can save yourself the trouble of building the Content Type and View and import them using the following files. 

To Import the Content Type:

1. Structure > Content Types > Import
2. Copy the text from the Content Type Export download and paste it into the field. Do not change anything or add any characters.

To Import the View:

1. Structure > Views > Import
2. Copy the text from the Views Export download and paste it into the field. Do not change anything or add any characters.