This tutorial includes 2 templates which display a grid of images. The images are added via custom fields and can be displayed in a 2, 3, 4 or 6 column responsive grid.
The template named five.php uses CSS for columns enabling you to display a 5 column grid.
The 2 templates are coded differently however they both enable you to update/add to the grid simply by using the same custom field name with unique HTML for each image and image link in the value field.
Shows both templates and how to add more fields which display linked images using HTML. Also shows the responsiveness of the columns in the grid on smaller screens and the image hover overlay effect.
Shows unlimited custom fields in a 3 column grid with text overlay displayed on hover:
Shows unlimited fields in a 4 column grid with text overlay displayed on hover :
Shows unlimited fields in a 5 column grid. Text overlay will display on hover :
Shows unlimited fields in a 6 column grid. Text overlay will display on hover :
You can also replace the overlay image title with a icon. Swap out the HTML with the following and replace the dashicon with any other. You’ll also need to make sure your theme loads dashicons from functions.php.
There’s 4 steps you need to follow after downloading the templates folder below for logged in members :
Step 1 : From the download folder, upload the 2 files named four.php & five.php to your child themes root directory.
Step 2 : Create a new page and choose either template from the Templates drop down menu in the Page Attributes meta box.
Step 3 : From the download folder, copy the CSS from the style.css file to the end of your child themes style.css file. Clear caching.
Debbie Hastings says
Couldn’t get this to work for me. I’m creating a CPT archive template and no configuration of this information helped. Any thoughts?
Brad Dalton says
Try this template https://wpsites.net/web-design/archive-template-with-featured-image-hover-overlay/
Are you using custom fields?
What theme are you using?
Also note, this won’t work on archive pages, only with custom fields.
What are you trying to do? Please link to a example.