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.,
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.,
[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 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.
<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>
While the tutorial has been written for Showcase Pro, it should work with a few adjustments in any Genesis theme
Step 1Install and activate Display Posts Shortcode.
Step 2Add 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.