In the members-only forum a user asks:
I love the PagePiling.js tutorial you do here: What I would like to do is use that Page Piling effect to go between portfolio items, where each change shows a different portfolio entry. Is there a way to link up PagePiling.js with the portfolio post type plugin so that a new portfolio item is shown every time you swap pages? Thanks!In this article we shall create a template for Portfolio Custom Post Type archive page such that 5 entries appear per page with each entry appearing full screen. The featured image will appear as background with title, excerpt and read more button overlayed in the middle. Visitors can go to next portfolio entry either by swiping down or pressing down arrow or right arrow keys or clicking the navigation circle at the right. The stacking effect is achieved using PagePiling jQuery script. At the top of the screen, header will be set to appear in fixed position and near the bottom, archive pagination. Screencast: Screenshot: In case an entry does not have a featured image, a pre-set image shall be used as fallback. A linear gradient from top to bottom shall be added on top of the background featured images to make the overlayed content legible.
While the tutorial has been written for Genesis Sample child theme it should work with minor adjustments in any Genesis child theme.
Step 1Ensure that Portfolio CPT is present either by adding code in functions.php or using a custom functionality plugin or via a plugin in the repo. In this example, I am using Portfolio Post Type. Add Portfolio items and for each, ensure that featured image is set. Use large featured images (like 1600 x 1050) since these will be used as the full screen backgrounds.
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.