Embed Ads in Photo View?

[venthi76]

Hi,

I need to embed add after post no 3 in photo view and it continues with subsequent events in photo view. Which means:

3 events per row in photo view
MY ADS
subsequent 3 events per row in photo view

I manage to modify the template for loop to include ADS after 3 events as needed. Just that cant figure out how to display the ads in between first and second row. More details in private reply.

[venthi76]

This reply is private.

• This reply was modified 6 years, 4 months ago by venthi76. Reason: editted code
• This reply was modified 6 years, 4 months ago by venthi76.

[Victor]

Hi Thirukumary!

Thanks for reaching out to us! Let me try to help you with that.

First, please let me note that we are fairly limited in how much support we can give for custom development questions like that. But, we always like helping out and at least point users into the right direction as much possible.

I think this is a bit tricky as the photo view layout is created using Isotope. So, I guess you will need to tweak the image html structure, add appropriate classes and probably some css to achieve what you are looking for.

I will reach out to the team to see if they can offer some more insight on this and will get back to you as soon as I have something.

Thanks,
Victor

[venthi76]

Noted and looking forward for your reply.

[Victor]

Hi Thirukumary!

Thanks for your patience.

I have been able to achieve what you are looking for by adding the proper class to the code you are already using.

Try adding the ‘tribe-events-photo-event’ class to the div element you are echoing in the loop, like this:

<div class="tribe-events-photo-event photo-view-ad" style="width: 100%;">
<img src="http://via.placeholder.com/600x200">
</div>

This will get “picked up” by Isotope and taken as an element in the grid. You will likely need additional styles to make things look good.

I hope that helps! Let me know if you have follow up questions.

Best,
Victor

[venthi76]

Hi Victor,

That’s indeed solved the issue and the ads can be displayed as intended. Just one issue, when viewing on mobile, the ads seems overlap on top of some of the events.

Please checkout my next private reply on one of the sample link and view it on mobile please.

Thanks.

[venthi76]

This reply is private.

[Victor]

Hi There!

Try adding the type-tribe_events class to the div container as well. That worked out for me.

Let me know if that helps.

Best,
Victor

[venthi76]

Great, that works for me too. Thanks Victor.

[venthi76]

I guess this thread can be closed now. 🙂

[Victor]

Great to hear that! 🙂

Thanks for following up to let me know about it.

I’ll close this now, but feel free to reach us out any time if anything comes up.

Cheers,
Victor

[Author]

Posts