In this video, we'll adjust the display of our page display, and add the image field to our block display

View the page

If we click the "Featured Content" tab, you'll notice that the image is flowing off the page. That's because I told it to be 960px wide, but the sidebar is using 210px or so. So the image is shifted that many pixels. I'll disable the blocks from showing on this page.

For the search block

  • Click the "gear"
  • Click "Configure block"
  • Visibility settings
    • Pages: All pages except those listed
    • featured-content
  • (Save block)
  • (Repeat for the "Navigation" block

Okay, now our image is taking up the entire content section of our site, and we have a working slideshow page. There are some slideshow settings you might want to tweak, and we'll take a look at those in just a minute. But first, let's display our "Featured Content Block"

Display the block

  • Go to "Structure => Blocks" (admin/structure/block)
  • Scroll down and find the block, "View: Featured Content", click "Configure"
  • Region Settings: Sidebar first
  • Pages: All pages except those listed
    • featured-content

Now, when we go home, we see the "Featured Content" block. Right now it's only displaying the content title, so let's add the image to our view.

Add image to Featured Content Block

  • Go to "Structure => Views => Featured Content" (admin/structure/views/view/featured_content)
  • Click the "Block" display
  • In the "Fields" section, click "Add"
  • For: This block (override)
  • Select "Content: Featured Content Image"
  • (Apply (this display))
  • [ ] Create a label
  • Image style: featured_content_block
  • (optional) Link image to: Content
  • (Apply (this display))
  • (Save)

Now, when we go back home, we see the image along with the title. One thing to note is that the "Featured Content" block looks taller than necessary. This is because there will be some images that fill this space, and the block is tall enough to fit the tallest image. This is a setting that can be adjusted in the views slideshow settings. Or you could tell the image style to either: scale the height as well as the width (which might squish the image), or scale and crop to a specific size, like we did with our Featured Content image style. And that would also create a consistent block size.