Genesis Sandbox Featured Content Widget is a great plugin that is similar to the built-in Genesis - Featured Posts or Page widget, but on steroids.
In this tutorial I show how Featured images of 8 Posts from a specific category can be shown in a 4 x 2 grid with the Post's title and excerpt/content appearing on hover. Even though the plugin's widget includes support for column classes of Genesis we are going to use :nth-of-type CSS instead to display the entries in columns so that we can precisely control how many columns appear at various screen widths for the responsiveness.
Screenshots:
Desktop:
iPad Portrait:
iPhone Portrait:
Screencast (no voice):
We are going to:
- register Home Featured widget area
- display this widget area below the header on front page
- define a custom 'home-featured' image size handle
- wrap the output of Post title and content/excerpt in a custom div
- use a 'equal heights' JS file to ensure that all the Posts in Home Featured widget area have equal height
- add CSS to absolutely position the title and content/excerpt custom div relative to each entry
The tutorial is written for Genesis Sample child theme and should work with other themes with some modifications.
Step 1
Install and activate Genesis Sandbox Featured Content Widget if you haven't already.
Step 2
Create a file named say, sk-set-gsfc-height.js in child theme's js directory (create js directory if not existing) having the following code:
To view the full content, please sign up for the membership.
Already a member? Log in below or here.