In my recent tutorial titled Filterable Portfolio Grid in Altitude Pro with Title and Excerpt appearing on Hover, James asked,
I wonder if you could point me in the right direction for having an additional button that opens a vimeo lightbox to play a video portfolio item. This would require a custom field and some sort of video lightbox plugin integration right?
As can be seen on the demo Portfolio page of the previous tutorial, the entire image for each Portfolio item links to the corresponding single entry page.
What if you want to display a custom field like say, link to a video for each entry below the excerpt? Since the video URL is going to be different (generally speaking) for each entry, we can't have the entire grid item to link to entry's permalink.
The solution is to set the CSS position property of the entire hover content ( clickable title + excerpt with clickable More text + custom URL field's clickable link) to absolute instead of setting it for the featured image in the grid.
We are going to use Advanced Custom Fields Pro (commercial plugin) for adding a URL field when creating/editing Portfolio CPT single entries and FooBox (commercial plugin) for displaying video in a lightbox upon clicking the button.
Follow the steps of previous tutorial with the following changes:
1) Install and activate ACF Pro and FooBox.
2) Create a Custom Field group having a URL type of custom field and attach it to Portfolio Item post type.
3) portfolio-archive.js of Step 5 is not needed.
4) Use this modified archive-portfolio.php:
To view the full content, please sign up for the membership.
Already a member? Log in below or here.