Clickable Featured Image

[John]

Hi,

I just purchased events calendar pro and am wondering if there is a way to make the featured image of an event clickable to open a larger version. I used CSS to change all “tribe-events-event-image” to a width of 20% because the default was far too large.

Any help would be much appreciated it.

Thank you,
John

[Geoff]

Hi there, John! Thanks for getting in touch and welcome to the forums. 🙂

Good question. First off, I do want to point out that we’re fairly limited in how much support we can provide for custom development questions like this, but I’m happy to help point you in the right direction, if I can.

I think the best way to add a link to a larger size of the image is to modify the single-event.php template. To do this:

• Make a copy of the file. It’s located in /plugins/the-events-calendar/views/single-event.php
• Make a new folder in your theme directory called “tribe-events”
• Drop the copied file in the new folder

You can find more detailed steps on template overrides in our Themer’s Guide.

Now that the template is in your theme folder, you can customize it to suite your needs. In this case, you will want to replace lines 54-55:

<!-- Event featured image, but exclude link -->
<?php echo tribe_event_featured_image( $event_id, 'full', false ); ?>

With this:

https://gist.github.com/geoffgraham/bbf7c09e71e8421f373d

Please note the “Medium” size in there. That will allow you to remove the custom CSS you set up to resize the image originally and use the Medium version of the file instead. Then, the link will take you to the full size. You can use different sizes as well instead of medium.

I hope this helps point you in the right direction!

Geoff

[Geoff]

Hey there, John! Just checking in to see if there’s been any update or you still need assistance with this one–please let me know. 🙂

Cheers!
Geoff

[John]

Yes thank you very much, that worked perfectly! One last question on this however, is there any way to make the image clickable into a lightbox-type thing instead of its own page?

[Geoff]

Awesome, I’m glad that helped! Great job putting that together.

Good question. Yes, I’m sure a light box would be possible, though I’m afraid that will take a fair amount of custom work. I believe there are some plugins that might help with that, but it will ultimately be something that will need to be built.

I’ll go ahead and close this thread since it seems we got the main question nailed down, but please feel free to hit us up if any other questions pop up–we’d be happy to help. 🙂

Cheers!
Geoff

[Author]

Posts