Displaying a grid of Pages’ images (custom field value) in Genesis using Flexible Posts Widget

In the members-only forum a user asked:

Hello Sridhar,

What I would like your help with is how to create a 4×2 grid of images that look and act similar to:

Genesis Sandbox Featured Content Page Widgets Grid with Title and Excerpt on Hover

To keep from original tutorial:

1) 4×2 Desktop grid layout with dark background and excerpt (no title) on hover.
2) Graceful responsiveness as browser size shrinks.

Adjustments:

1) I do not want to use the featured image because that is already being used as a backstretch image for the page. The grid images are 16×9 aspect ratio “posters” with text already on them and I would love to just to select and add image from the media library to the grid, and then set it to link to a page.

2) No change in aspect ratio and no “dark section with title” as the browser resizes on mobile, just the wide images stacking gracefully (shrinking ok as long as aspect ratio remains). Change in aspect ratio would make text on image unreadable.

Basically, this is a responsive gallery of “poster images with text” that link to pages, and have the excerpt show on hover (desktop only).

I hope this makes sense. Thanks for all your help!

In this article we shall

• register a custom home-featured image size for images in Home Featured section
• register a custom home-featured widget area
• display Home Featured widget area below header on homepage
• use Advanced Custom Fields plugin to create a image type custom field and attach it to static Pages
• create a custom home-featured.php template to be used by Flexible Posts widget having the code to display the image field's value and the excerpt
• drag an instance of Flexible Posts widget into Home Featured widget area, specify the IDs of Pages which should be featured and set the template as home-featured.php
• write CSS for the grid items using float and :nth-of-type selector

to display a 2 x 4 grid of featured Pages with excerpts appearing on hover at desktop widths. At 1024px and below, the excerpts will be set to not appear. As the viewport width goes down, the items will become 3 columns per row, then 2 per row and finally 1 per row.

Sample screenshots:

Desktop:

when hovered:

iPad Landscape:

iPhone 6 Landscape:

iPhone 6 Portrait:

While the tutorial has been written for Genesis Sample child theme it should work with minor adjustments in any Genesis child theme.

Step 1

Add the following in child theme's functions.php: