In this video, we will configure views to create a dynamic list of the photo galleries on our site.

Now that our galleries are configured, let’s create a few more galleries and then create a page that lists them all. I’ll use Devel Generate to quickly create the galleries.

Now that that’s done, let’s install Views.

Install

• Views

Enable

• Views
• Views UI

Now we’re ready to actually setup the view.

• Go to “Structure => Views => Add new view” (admin/structure/views/add)
• View name: All Galleries
• Show: Content
  • Of type: Photo Gallery
  • Sorted by: Newest first
• [x] Create a page
  • Display format: Unformatted list
    • Of: fields
  • [x] Create a menu link
    • Menu: Main menu
• (Continue and edit)
• (Save)

Okay, so we’ve got our view basically setup. I’m going to open it in a new tab so that we can see what it looks like as we make our changes.

Right now, it’s just a list of titles, so let’s add an image.

• Click “Add” in the “Fields” section.
• Select “Content: Images”
• (Apply (all displays))
• Uncheck “Create a label”
• Image style: photo_gallery_thumbnail
• Link image to: Content (So that clicking on the image shows the whole gallery)
• Expand the “Multiple Field Settings” section
  • Display: 1 value(s) (This will just display the first image, instead of all images)
• (Apply (all displays))

Now, we have a list of our galleries with the first image displayed. In order to make it a responsive grid, we can simply add the same CSS that we added in the last video, but this time apply it to the View’s row.

• Add the following to “responsive.custom.css”
  • .view-all-galleries .views-row {
    display: inline-block;
    max-width: 120px;
    }

(I’ve added the “max-width” to force the titles to wrap at the edge of the images. You should change this number to match the width of your image style.)

And there you have it! A responsive grid of your photo galleries, and if you click on any of the images, you’re taken to the full gallery page to see all of the photos, and body text.