This video shows how to add a text field, and position it over the image slideshow

Add text to the image slideshow

The beautiful thing about Views Slideshow is that because we're using fields, we can add (or remove) anything we'd like at any time. So if, for example, we decide later that we want to add the text on with the image slideshow, we can. Here's how we'd do it.

  • Edit the view
  • Edit the "Content: Title" field
    • [x] Exclude from display
  • Add field "Content: Body"
    • [ ] Create a label
    • Formatter: Summary or trimmed
    • Trim length: 300
    • Expand the "Rewrite results" section
    • [x] Rewrite the output of this field
      • [title]
        [body]
  • Save the view

Now, we just need to update our CSS to style the body field instead of the title field.

  • Replace .views-field-title with .views-field-body
  • Add the following to "#views_slideshow_cycle_teaser_section_featured_content-block .views-field-body"
color: #cccccc; /* Set the non-linked text color */
text-shadow: none; /* Remove the text shadow from non-linked text */

You could then remove the border radius so that the bottom right corner isn't rounded, or set the height and width of the text box with CSS.

width: 360px; /* Set the text box width to 360px */
height: 380px; /* Set the text box to the full height of the image (adjusting for padding/margin) */
  • Remove 'border-radius'

So you can see this is very flexible as far as how you can display your content by using fields in the view slideshow module.