Slideshow

This article will walk you through adding a slideshow to your ad unit.  The Slideshow Component can be added to any type of Format.

*  If targeted to mobile devices, the slideshow will automatically have native swipe control.

Example of Banner Format with Slideshow here

In the Builder, Create a New File, select type of Format, add dimensions and Submit.

Click on the Components icon  and select Slideshow.

The slideshow placeholder will display on the canvas .

Select the Slideshow placeholder and the Slideshow Properties will show in the Properties Panel to the right in the Builder:

There are three tabs in the slideshow properties – Build, Design and Settings.

Build – Select images and/or video assets and add click URLs and captions

Design – Set pagination and navigation and style your slideshow.

Settings – Configure transitions

 

Build

Name
Enter the name of your slideshow for reporting (optional).

Select Images, Video files, or Youtube
Select the source from the dropdown menu under Source.

Uploaded Asset - image or video

Youtube - Youtube url or id.

If an image or video, click on the Select Asset input box below the Source field to select your first slideshow asset. The asset manager will open allowing you to choose or upload an image or video. Click Insert to add the image or video to your slideshow.

If Youtube is selected as the Source, a field will show below the Source field to input a Youtube url or id.

Example below shows an Image selected:

 

Log Name
Enter the name of the asset for easier identification purposes.  This will also show in the Campaign Manager and in Reporting. If left blank, the file name of the asset will be used.

Click URL
Check the box to add a unique click-through URL to the slide.  *This is optional - if you leave blank, it will default to the Default url you specified in the General Properties and will show in the Campaign Manager's Third Party tracking - which you can update (or not) from there.  Also see:  How to Add Third Party Click, Impression, and Engagement Tracking.)

Caption
Select if you want to add a caption to your image. Enter your caption text in the input box.

Visible
Selected as a default - uncheck if you want to hide the slide.  (i.e. if you want to be able to turn slides on and off week by week instead of rebuilding).

Thumbnail Edit – *Only displays if you have thumbnail pagination selected
Select “edit” and a window will open (Crop Image) allowing you to edit what is shown in the thumbnail (if used).

Add or Delete Slide
Add: To add another slide click the + icon and add the image or video
Delete: To delete a slide, click the - icon. 

Reorder Images
To reorder images click and hold the menu icon on the left-hand side and drag the image to the desired order. 

Replace Image or Video within slide
Click within the input box that has the image or video to replace and the asset manager will appear for you to select or upload a different image or video.

 

Adding a Video Asset

Click in Select Asset input box to select your video asset. The asset manager will open allowing you to choose an image or video.  Select your video from the asset manager. Click insert to add the video to your slideshow. 

If using a Youtube url, select "Youtube" in the dropdown of the Source.   Enter the youtube url or ID in the field under the source. 

Video settings

Click on the small Gear Icon to the right of your Video asset name:

Video editing settings will show (2 Tabs - "Build" and "Settings"):

Chromeless player:  A player that has no control bar with options for muting and play/pause controls only.

* Note - If Chromeless Player is selected:  “Enable Muting Controls” will be default selected as sound needs to be user initiated (Major browsers such as Chrome, Safari, Edge and others have implemented changes that will have an impact on video units which attempt to play with sound automatically, or attempt to play sound when 'hovered over'. The latter is no longer considered a user interaction and opt-in to enable sound as the possibility of unintentional hovers on videos will trigger sound playback.  Any videos which are detected to automatically play sound, or have a sound on hover option will be immediately stopped by the browser).

If Chromeless is selected, Enable Muting and Player controls will appear:

Enable Muting Controls: This is default selected.  Displays the muting icon so that the user can click on to mute/unmute the video for sound.  Sound must be user initiated. (Major browsers such as Chrome, Safari, Edge and others have implemented changes that will have an impact on video units which attempt to play with sound automatically, or attempt to play sound when 'hovered over.' The latter is no longer considered a user interaction and opt-in to enable sound as the possibility of unintentional hovers on videos will trigger sound playback.  Any videos which are detected to automatically play sound, or have a sound on hover option will be immediately stopped by the browser.)

  • Position:  Where, on the player you’d like muting controls to be displayed
  • Show On:  Displays muting controls always or on video hover  
  • Icon Color:  Choose between light or dark muting control icon

Player controls:

Enable Player Controls: Displays the player icon that the user can click on to play/pause the video.

  • Position:  Where, on the player you’d like player controls to be displayed
  • Show On:  Displays player controls always or on video hover  
  • Icon Color:  Choose between light or dark player control icon

Controls

Not available when chromeless player is selected.

  • Always visible: If selected, the controls will show for the entire video duration.
  • Show on hover: Controls will show when the user hovers over the video.

Show Replay Button:  If selected, displays a replay button in center of the video when complete and if clicked, will then replay the video with the current audio setting.

 

Show play button: If selected, a play button will appear in the center of the video.

 

 

Preview Image

Click in the input box to add an image to preview before the video plays.  The Asset Manager will open. You’ll see a folder titled Auto Generated that contains 5 images Adventive automatically captures from your video file. You can choose from these, select another image or upload a new image.

 

Playback ("Settings" Tab in video settings):

  • Autoplay: Plays the video automatically on load.  *includes autoplay for mobile if selected. Initialization of sound by the user is required - enable the mute button control (see above).  Note:  mobile player will be simplified, only showing a mute, play/pause, and full screen/native view options.  
  • Restart playback on unmute:  Video will restart automatically when the unmute button is clicked
  • Playback on screen return: If the viewer leaves the screen with the video playing and navigates to another screen within the ad unit, the video will automatically stop and resume or restart playback when the user returns.
         

  • Return to start on finish: Displays first frame or selected preview image after video completes.
  • Loop:  Plays the video again when it reaches the end.
  • Clickthrough Video:  Allows user to click through to a URL by clicking.
  • Start at: The time, in seconds, you want to set the video to begin playing
  • End at: The time, in seconds, that the video should stop playing
     

Thumbnail Edit – Only displays if you have thumbnail pagination selected
Select “edit” and a window will open (Crop Image) allowing you to edit what is shown in the thumbnail (if used).

 

 

Adding Youtube

Select Youtube as the source from the dropdown menu under Source.

A field will show below the Source field to input a Youtube url or id.  In the ID/URL input box, enter the video URL or ID of any public YouTube video (Make sure it is the actual url or ID/and not private - you should be able to paste in a browser and the youtube video show - playlist id's will not work).

Once you have entered the Youtube url or id, the Youtube video Settings will show (2 Tabs - "Build" and "Settings"):

  • Chromeless player: A YouTube player that has no player controls.
  • Progress Bar:  Choose between a Red or White progress bar 

Note: progress bar options not available for chromeless players.

Controls

Not available when chromeless player is selected.

  • Always visible: If selected, the controls will show for the entire video duration.
  • Show on hover: Controls will show when the user hovers over the video.

Playback ("Settings" Tab in video settings):

  • Display Video Info (If Chromeless Player is unchecked): Player will display video title and user before playing.
  • Autoplay: Plays the video automatically on page load.  * Autoplay for mobile does not apply to youtube videos.
  • Restart playback on Unmute: Video will restart automatically when the unmute button is clicked.
  • Loop: Automatically restarts video when complete.
  • Start at: The time, in seconds, you want to set the video to begin playing.
  • End at: The time, in seconds, that the video should stop playing.

 

Design

 

Content

Fit:  if asset is a different size than canvas, selecting “Fit” will auto size the asset to fit within the slide

Fill: selecting “Fill” will auto size the asset to fill up the entire slide

 

Pagination

Example of pagination (for 3 slides) showing at the bottom:

Display:

Always: Always show pagination
On hover: Show pagination when user hovers over slide
Never: Do not show pagination

 

Format:
Dots:  Show as dots

 Thumbs: Shows as Thumbnails

 

Placement
Bottom:  places the pagination beneath the slide
Top:  places the pagination above the slide

Size: Set container size to Small, Medium or Large

Container: Set the color of the container

Active Thumbnail (if selected):  Set the color of the border around the active thumbnail

Arrow Color (if Thumbnails selected):  Set the color of the arrows for the thumbnail navigation

Opacity: Set container opacity – 0% invisible up to 100% visible

Dots (if selected): Set color of pagination dots

 

Arrows

Navigation arrows appear to the right and left of your images allowing users to click to advance to the next slide or go back to the previous slide.

Display
Always: Always show arrows
On hover: Show arrows when user hovers over image
Never: Do not show arrows

Arrow Style
Default: Black Arrows will show
Hitbox: set a transparent area over arrow areas
Custom: User can upload a custom arrow asset – the below screen will show if Custom is chosen:

Click in the “Select Asset” fields to choose the Left and Right Arrow custom assets. *If you want to resize or move default arrows, choose "Custom" and leave asset fields blank.  You can then click on the default arrows on the slideshow canvas and resize/move.

  • Width: adjust arrow pixel width
  • Height: adjust arrow pixel height
  • X: adjust horizontal placement of arrow on canvas
  • Y: adjust vertical placement of arrow on canvas

Color: Set arrow color

Opacity: Set arrow opacity - 0% invisible up to 100% visible

 

Captions

If your slideshow images have captions, you can customize the text and layout.

Font: Select the font for your caption text.

Size:  Select the size of the font.

Color: Select the color of your caption text.

Style: Bold, underline or italicize your caption text.

Layout: Choose top, bottom or middle placement.

 

When you are finished, click the Settings tab.

 

Settings

Slide transitions are the animation-like effects that occur when you navigate from one slide to the next.
From the drop down select automatic or manual transitions.

Automatic: Images automatically advance
Pause on hover over: When using automatic transitions you can select Pause on hover over to automatically prevent the slideshow from advancing until the user hovers off.

Manual: Requires users to navigate (click) to advance to the next slide.
Duration: The time, in seconds & milliseconds, that the image should be displayed (use the arrows or type in the field).
Effect:  The transition effect.

  • Fade In
    The fade transition will gradually fade from one slide to the next.
    Speed: Set the duration (seconds & milliseconds) for the transition (use the arrows or type in the field).
  • Scale In
    Gradually scale slides in and out.
    Speed: Set the duration (seconds & milliseconds) for the transition (use the arrows or type in the field).
  • Slide In
    Slides move into view from a set direction
    Direction: Choose the direction to slide images in from (top, bottom, left, or right)
  • Speed:  Set the duration (seconds & milliseconds) for the transition (use the arrows or type in the field).

Loop: If automatic transitions are used, select loop to repeat your slideshow when it reaches the last slide.

*  To Rotate an entire Slideshow, you can click on the rotate icon at the top of the slideshow placeholder to rotate:   

 

When finished, Save the ad.

Go to the Preview icon  to view the ad. 

 

* You can now add multiple hitboxes to slideshows - great for shoppable galleries needing multiple unique click URLs on each slide. 

Example Below:

For example, we will Select the Slideshow (Slide 1) and then click the Hitbox Icon from the Tools panel (left of builder) to add a hitbox/move it over an image/area and add an Open Url Action.  Repeat steps to add more hitboxes on your slide (we will add four hitboxes):

To check that your hitboxes are on the actual Slide look at the bottom of the builder at your Screens and Layers - example of Slide 1 showing our 4 hitboxes/actions:

To add more hitboxes/actions to other slides/areas, use the 2 white arrows showing above your slideshow placeholder/canvas to move between slides (or highlight to the right of the builder under Slideshow Component).  Repeat steps above to add Hitboxes/actions.

As of our Latest Release - you can now add any other Components (excluding Tabs and Slideshow) to any slide in your Slideshow.

Helpful hint: make sure to select your slide on screen and then add your component (you can move through slides by using the arrows above your slideshow).  If added properly to the actual slide, your component will be listed at the bottom of the builder as a layer within the slide along with all other layers for that particular slide - Example (Slide 1.jpg has a Timer Component, a Tooltip Component, and 3 hitboxes on it.  Slide 2.jpg has an HTML5 Import and 4 hitboxes clicking out to different products).