Sridhar Katakam

Genesis and WordPress Tutorials

Title and Excerpt upon Hover on Featured image using Display Posts Shortcode and CSS Grid in Genesis

by 7 Comments

A member asked via email:

In this tutorial https://sridharkatakam.com/portfolio-grid-showcase-pros-front-page-title-excerpt-hover/ , you place the portfolio in the Widget 4 section of the front page.

I need to be able to place multiple portfolios in different places throughout my site.

I believe I can figure out how to replace any of the widget areas on the Front Page with a portfolio with the hover option using your tutorial, however, I also need to be able to place portfolios on regular static pages, below the header image.

One portfolio needs to have 8 items - 4 items across by 2 rows with the hover effect

And one other portfolio needs to have 10 items - 5 items across by 2 rows, with the hover effect

How can I place blocks of these portfolio items on these different static pages?

Thank you so much for your help, if you can.

Bill Erickson has created a very handy plugin called Display Posts Shortcode using which it is possible to display a list of entries with several criteria like the number of posts, post type etc.

In this tutorial, I show how Display Posts Shortcode can be configured in Showcase Pro to display a 2 x 4 grid on Front Page 4 section. The grid is going to contain portfolio CPT entries' featured images with title and excerpt appearing on hover for each entry.

i.e.,

[display-posts post_type="portfolio" posts_per_page="8" include_excerpt="true" excerpt_length="20" image_size="showcase_entry_grid" include_link="false"]

to get

We will place another shortcode on an inner static Page to display the grid in 3 columns and change the image size.

i.e.,

<div class="three-columns">[display-posts post_type="portfolio" posts_per_page="6" include_excerpt="true" excerpt_length="10" image_size="showcase_featured_posts" include_link="false"]</div>

to get

We shall use CSS Grid for arranging the items in a grid with Flexbox fallback for browsers that do not support CSS Grid, like IE.

In the CSS code, we are going to make the overlay content appear below the images for screen widths 1499px and below. Also, the number of columns will be set to gradually decrease i.e., from 4 to 3 to 2 to eventually 1 as the screen width decreases.

While the tutorial has been written for Showcase Pro, it should work with a few adjustments in any Genesis theme

Step 1

Install and activate Display Posts Shortcode.

Step 2

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

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

  • So excited to use this but I keep getting error mssgs on the css:
    .three-columns .display-posts-listing {
    grid-template-columns: repeat(3, 1fr);
    }

    Why??

    Thanks
    K

    Reply

    • You can safely ignore those messages.

      I do not think the script inside the WordPress theme editor text area is updated to support the CSS Grid and hence flags it as errors.

      It is generally recommended to edit theme files using a FTP client.

      Reply

  • Also error in css:
    grid-gap is ‘unknown property’.

    I think it’s not recognizing fr as a fraction on the previous thing thus the rbrace expected error mssg.

    Thanks
    K
    Monochrome pro

    Reply

  • Yes.

    aadevsite.wpengine.com

    It seems that I am getting post grids now, but they are sitewide and don’t work with the code in the tutorial…
    Thanks,
    Karen

    Reply
    • >