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:
You’re an amazing person. Thanks so much for this. I’m trying to apply it to other things and hoping to get the hang of ACF for CPT and templates.
I’ve configured this portfolio for a staging site I’m working on. It’s fantastic.
I have 2 little hang ups with it – hopefully both of which can be easily solved.
First, I’m unable to figure out why I can’t get the images to display across the full width of the div. The container is 1200px, but the portfolio grid stops at 1100px. I’d like to have the thumbnails be a slightly larger 280px and span the full width of the container.
The other slight nag is that it hiccups a bit at the first media query. The images seem to crop about 20px on the right side, leaving about 20px of the background showing through and the text gets slightly cut off in some cases.
Here’s a link to the page: http://iartisan.com/new/portfolio/
Other than those 2 little issues, I think this works fabulously right out of the box. I’ve utilized a few of your tuts on this site rebuild and they’ve been incredibly helpful. Thanks so much for all of the continual effort you put forth here.