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.
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.
[display-posts post_type="portfolio" posts_per_page="8" include_excerpt="true" excerpt_length="20" image_size="showcase_entry_grid" include_link="false"]
We will place another shortcode on an inner static Page to display the grid in 3 columns and change the image size.
<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>
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
Install and activate Display Posts Shortcode.
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.