Slideshow

These instructions are for creating a rotating slideshow on your IndieCommerce site using a View. ABA will need to enable the modules for you, so if you have not done so already, please contact us with a request to enable the module.

IMPORTANT NOTES BEFORE STARTING YOUR VIEW SLIDESHOW BANNER:

1. We highly recommend you save your 'view' after every step, as you create it. Especially when you see this message come up:  “* All changes are stored temporarily. Click Save to make your changes permanent. Click Cancel to discard the view.”
2. When working in settings always change the ‘For’ option from ‘All Displays’ to ‘This block (override)’ so that the changes you make only alter the block (or page) you are working on.

CREATE THE CONTENT TYPE

Navigate to: Structure > Content Types > Add Content Type

1. Fill in the ‘Name’ - Example: Slideshow Banner
2. Enter a ‘Title’ - Example: Slideshow Banner
3. Save and add fields
4. Add a field for: Image
   1. Label: Slideshow Banner Image  
   2. Select Field type: Image    
   3. Widget: Image
   4. Save
   5. Field Settings: leave as default - Save field settings
   6. Leave everything above Slideshow Banner Image Field Settings as default, then Confirm ‘Number of Values’ is 1 - Save settings

CREATE IMAGE STYLE

Navigate to: Configuration > Media > Image Styles > Add Style (if you do not have a menu option for 'Image Styles' please contact us so we can grant you permissions).

1. Fill in the ‘Name’ we recommend including the size in the name for easy reference - Example: Banner Image 800x300 - Create New Style
2. Select ‘Scale and Crop’ under Effect - Add
3. Enter the width and  height you want your slideshow to be - Example: 800 x300 - Add Effect

CREATE THE CONTENT

Navigate to Content > Add Content > Slideshow Banner

1. Fill in the ‘Name’ - Example: Slideshow Image 1 (If you will be linking the slideshow image back to this content we recommend using appropriate names and adding details about it in the body).
2. Use the image field to choose your file locally and upload it
3. Save

Repeat steps 1-3 until a Slideshow Banner page has been created for each image you would like to include.

CREATE THE VIEW

Navigate to: Structure > Views > Add New View

1. Enter the ‘Name’ - Example: Slideshow Banner
2. Select ‘Slideshow Banner’ as the ‘Type’
3. Deselect ‘Create a Page’ and Select ‘Create a Block’
4. Select ‘Slideshow’ under ‘Format’ and 'of' to 'Fields'
5. Enter the number of slides you want into ‘Items per Page’
6. Continue and Edit
7. Under ‘Fields’ select ‘Content: Title’ - choose ‘Exclude from Display’ - Apply this display
8. Under 'Fields' select the ‘add button’ - Select ‘Content: Slideshow Banner Image’ - Apply this display - Configure the fields for ‘Content: Slideshow Banner Image’
   • Deselect ‘Create Label’ - Select ‘Image’ for ‘Formatter’
   • 'Image Style’ should be set to the image style you previously created (Example: Banner Image 800x300)
   • Set your Link Image to 'Content'
   • Apply this display
9. Under ‘Filter Criteria’ confirm you see both ‘Content: Published’ and ‘Content: Type Slider Show Banner’  - if you do not, use the ‘Add’ button to select them

You are now finished with the view.  You should see the images that you added earlier appear in the preview below. Make sure your view is saved and visit Structure > Blocks to place the view in a suitable region.

ADD A LINK PATH

If you want your banner image to link to something other than its original content you will need to add a ‘Link Path’ field to both the content itself and the view.

CONFIGURE THE CONTENT TYPE

Navigate to: Structure > Content Type > Select your banner content type > Manage Fields

1. Add new field
   1. Label: Link Path  (this will be the path you can assign to the images in the banner)
   2. Select Field type: Text
   3. Widget: Text field
2. Save
3. Adjust the ‘Maximum Length’ to your preference, we recommend keeping it to at least 255
4. Save field settings
5. Scroll down to Link Path Field Settings and set the ‘Number of values’  to 1
6. Save settings

CONFIGURE THE VIEW

Navigate to: Structure > Views > Select your banner view

1. Under ‘Fields’ select ‘Add’
2. Search for Content: Link Path and select it
3. Apply (this display)
4. Deselect ‘Create label’
5. Choose ‘Exclude from Display’
6. Apply (this display)
7. Under fields select ‘Banner Image’
8. Expand 'Rewrite Results'
9. Select 'Output this field as a link'
10. Place the token  [field_link_path] in the text field for Link Path
11. Apply (this display)
12. Under ‘Fields’ click the down arrow and select ‘Rearrange’
13. Drag your fields to be in the following order: Title, Content: Link Path, Content: Slideshow Banner Image.
14. Apply (this display)
15. Save

If you have already created your Banner Image nodes, you will need to go back and place the links paths into the new field.