Post updated 26th November 2020
On a recent project, I struggled with trying to get a clients site opening custom post types from an Easy Posts query. They needed to allow users to view projects quickly and include navigation.
To see it in action, watch the video below or visit https:/ksn.ie/projects or https://hmc-ip.com/our-team :
I tried accessing various sources for help but the solution never quite did what I wanted.
After posting my struggle on the Official Oxygen User Facebook group, Briany Hearne helped with the following solution for which I am truly grateful.
Essentially I had a custom post type called projects with some custom ACF fields including an ACF gallery field for project images. I created a blank template that applied only to this custom post and inherited no other templates as I didn’t want the footer and header navigation on these posts.
I also included the ‘previous‘ and ‘next‘ posts tags in the template as this would let users navigate between posts quickly.
Once the post template was complete, I went to where they would be viewed from.
1. Create a modal, style it how you wish. I added a modal to the page displaying the post query, which, in this case was Projects. I setup the modal so it displayed across all devices.
2. Use the click trigger to display the modal using the js-trigger-iframe class.
3. Add the following jQuery to a code block on the page displaying the post query.
jQuery(document).ready(function($){
$('.js-trigger-iframe').click(function(){
$this = $(this);
$href = $this.find('.oxy-post-title');
if ($href.attr('href') && $this.attr('target')){
$('iframe[name="' + $this.attr('target') + '"]').attr('src',$href.attr('href'));
}
});
$('.oxy-close-modal, .oxy-modal-backdrop').click(function(){
$('.ct-modal').find('iframe').removeAttr('src');
});
});
4. Add this to the code block html :
<iframe src="" width="100%" height="100%"></iframe>
5. Make sure the code block is set to the same height as the modal container.
6. Add the class (js-trigger-iframe) to the easy post php template around the post link along with the target element below.
target="myiframe"
Essentially anything wrapped in the js-trigger-iframe class will open in an overlay once the modal has been added as above.
I can see a lot of use cases for this and it also has the bonus of being navigatable if the template showing the content has the previous and next tags included.
In order to make sure the modals were scrollable on mobile, I had to add this to the modal parent to enable it on IOS:
overflow:auto; -webkit-overflow-scrolling:touch;
I will be keeping this post up to date in case of any code changes as I know it is something I will use on many clients sites.
Love to know in the comments if you find it useful.
16 comments
Karl Finlay
Hi Amanda, Currently trying to implement the same thing only using videos within the post itself. I cannot seem to make anything appear in my modal iframe and wondering if I could get some further information on how you set up the ACF and how that effects the modal as so far nothing is being parsed into my iframe and I assume this might be why. Thank you so much for this tutorial as I havent found anything else quite like it so nice to have someone to figure this out with 🙂
Amanda Lucas
Thanks for the comment Karl. If you want to reach out to me directly, I can try assist – amanda@itchyfingersdesign.com
Prasanth
Here too having same issue. How it’s fixed
Prasanth
I have called custom post data in new oxygen template and its working fine.
But how to link that template to the new modal.
S
Hello,
After creating a shop archive using Repeater how would I add a button to open a modal containing all of the selected product info plus an add to cart button?
At the moment it opens a modal for each product in the loop, each modal is stacked on top of the last!
Any help would be greatly appreciated
Amanda Lucas
Hi there,
Not sure how you would go about that but if I was doing it I would use the new lightbox feature in Oxy Extras. Not sure you have that but it would be the simplest solution in my opinion.
Paul
Hi Amanda,
Thanks for the tutorial! There’s a small mistake: https://p2.p0.n0.cdn.getcloudapp.com/items/eDu1n4nj/Image%202020-07-03%20at%2011.41.16%20AM.png?v=6335707842aec03a16d91dba457a5d4d
Regards,
Paul
Amanda Lucas
Thanks Paul,
Really appreciate that, I have it updated now.
Regards,
Amanda
Jakub
Hi Amanda,
first of all thank you for the tutorial. This is exactly what I’ve been looking for.
One question though.
Would you care to share how you implemented the portfolio filter?
Thank you and have a wonderful day.
Jakub
Nanna Petersen
Hi. I’m a bit confused about step 5, where shall I insert {target=”myiframe”} and what class shall I add.
Another thing … The modal overlay does pop up, but my ACF data won’t show, is there something in the javascript I need to change for it to work?
Regards Nanna
alucas
Hi Nanna,
I have updated the post to show actual screenshots of where to add the class.
Once your ACF data is showing in the post source itself, it should appear in the modal.
Hope you get sorted.
Amanda
Haley Lohrenz
Do you happen to have screen shots showing your progress on this? I get completely lost at step 3 and after 🙁 What do you mean by post query? I have a homepage with some blocks that they can click on. Once the modal opens, I wanted to display content from a specific post depending on the one they click on, but I’m not sure how to transfer this data. I’m probably lost at the “query” part. I’m using just the default posts WordPress has built in and I have some posts under a specific category.
I’m not sure what you mean by the PHP template for the post as well since I’m using the default one.
alucas
Hi Haley,
Mine is probrably a little more complicated than you need as Im using a custom post type and added navigation. I know Oxygen released a tutorial the other day – https://www.youtube.com/watch?v=XvZY6XBSbho
Let me know if you get sorted.
Andy
Hi,
I’m having a few issues implementing this tutorial, would you be able to answer a couple of questions, I am 100% sure it is me doing something stupid
Andy
Ros
I really appreciate your generosity in helping newbies like me!
Thanks Amanda!
alucas
Many thanks Ros. I keep meaning to share more as its a great way of referencing how I did things and I’m always happy to help others. Really you found it useful and appreciate you taking the time to comment.