In this video, I’ll show you how to layout our Photo Galleries with Panels. We’re going to be creating a responsive photo gallery, so we’ll also install the Corolla theme because it is a responsive theme.

First we need to install the following modules and themes.

Install

Enable

  • Chaos tools
  • Page manager
  • Panels
  • Corolla (and set as default theme)

Because of the way that Corolla (and other AdaptiveTheme themes) store configuration to files, we need to go to the Corolla settings page, and click “Save”.

  • Go to “Appearance => Settings => Corolla” (admin/appearance/settings/corolla)
  • Scroll down and click “Save configuration”

Now, we can configure our Photo Gallery. We’ll start by creating a thumbnail size that we’d like to use.

Create image style for thumbnails

  • Go to “Configuration => Media => Image styles” (admin/config/media/image-styles)
  • Click “Add style”
  • Style name: photo_gallery_thumbnail
  • Click “Create new style”
    • Add an effect: Select “Scale and crop”
  • Click “Add”
    • Width: 120
    • Height: 120 (we’ll have square thumbnails)
    • Click “Add effect”
  • Click Update style

Configure Panels to override the display of the “Photo Gallery” content type

  • Go to “Structure => Pages”
  • Click “Enable” next to “Node template”
  • Click “Edit” next to “Node template”
  • Click “Add variant”
    • Title: Galleries
    • [x] Selection rules
    • (Create variant)

Now we’re taken to the “Selection rules” page.

  • Select “Node: type” from the select list
  • Click “Add”
    • [x] Photo Gallery
    • (Save)
  • (Continue)

Now we’re taken to the Layout page.

  • Category: AT Responsive Panels - 2 column
  • Choose “AT Two column 66/33”
  • (Continue)
  • (Continue)

Now we’re ready to add the parts of our node to the regions where we’d like them displayed.

  • Click the “gear” in the “Right” section
  • Click “Add content”
    • Click “Node => Field: Body
    • (Continue)
    • (Finish)
  • Click the “gear” in the “Left” section
  • Click “Add content”
    • Click “Node => Field: Images”
    • (Continue)
    • Image style: photo_gallery_thumbnail
    • Link image to: File
    • (Finish)
  • (Create variant)
  • (Update and save)

Now, we’re ready to create some photo galleries.