Event List Widget: Displaying the event’s photo

[Kyle]

Just upgraded to 3.0.3/3.0.1 of The Events Calendar. I noticed the Event List widget changed a little. It no longer displays the photo we have attached to all of our events. Nor does it give the option to include the photo. Is it possible to add this functionality? I am guessing something need to be tweaked on the /wp-content/plugins/events-calendar-pro/views/widgets/list-widget.php but not sure what to add to enable photos.

[snorton]

You can call the featured image from an event with the tribe_event_featured_image() template tag. If you add this to your widget file (make a copy and place in [your theme]/tribe-events/widgets/list-widget.php), and add this tag where you want the image to appear. styling is advised as the default will call the full image size.

My implementation, for example, will conditionally display the featured image in its thumbnail size if a featured image has been set, otherwise it displays a placeholder image (organization logo) to maintain the integrity of the layout design.

You can get more details on this function here:
http://docs.tri.be/Events-Calendar/function-tribe_event_featured_image.html

[Leah]

Thanks for helping out snorton. Kyle, did that get you what you needed?

~Leah

[Kyle]

I get the gist of what’s going on here. I have it inserting the image but need to format it. Which CSS file do I need to edit to tweak the appearance?

[gracebiblechurch]

@snorton, I’m very interested in your implementation of this feature. I too would like a placeholder image that would maintain the integrity of the design if no event photo is specified. Could you help me achieve this, or point me in the direction of some resources that can?

[snorton]

@gracebiblechurch, you will need to create a copy of wp-content/plugins/the-events-calendar/views/widgets/single-event.php in a wp-content/(your theme)/tribe-events/widgets/ directory so that you can customize the view without modifying the original files.

So you want to check if there’s a featured image and display it, otherwise display a generic image as a placeholder. The Events Calendar has a template tag for calling a featured image (with html and link to the event if used within the loop) if there is one.
This tag is:
tribe_event_featured_image()
you can use ‘thumbnail’ as a parameter here for the $size string: tribe_event_featured_image(null,’thumbnail’);
So, what we want now is to check if that featured image is there and display it or otherwise display a generic image (this all goes within your list-widget.php file wherever you’re wanting this displayed:
http://pastebin.com/vwefeucJ

Keep in mind, there are no classes assigned to the div or img tags, so you may want to consider adding that if desired for ease in styling. Hope this helps. I’m learning php, so there may be a more efficient implementation but this works for me.

[gracebiblechurch]

@snorton, thank you! This actually worked quite perfectly for me. The only thing that did not work was the Alt tag. Rather than echoing the title within the alt tag, it simply echoed the title as text. Thus, the title appeared on the page twice – once within the H3 tag as it was supposed to, and once as plain text. I’m sure whatever made it appear as text rather than an Alt tag was something miniscule; it doesn’t matter, as I assign Alt tags to images as I upload them in WordPress, and don’t need to rely on them within the Events Calendar. I’m simply grateful for your willingness to paste your code for me. 🙂
THANK YOU, and may God bless you for helping us!

[Neill]

Hi gracebiblechurch

Looks like you are all set? If so we’ll close out the ticket and mark it as resolved.

Thanks for your help snorton looks like you’re well on your way to getting PHP down!

Neill

[Neill]

Hi Kyle, I just wanted to check in with you and your CSS question.

It looks like your style for images is reading from your theme stylesheet: style.css. Specifically on line 237:
#main-area-wrap #sidebar img

If this is what you are looking for then you should be able to make adjustments to the image here. If you want to give us a few specifics on what you are trying to achieve we’d be happy to point you in the right direction and confirm that this is the correct place to make any adjustments.

[Kyle]

I think I have it figured out now. I have it looking pretty good but just want to tighten up a few minor things. These posts have been most helpful. Thank you Snorton and Neillmcshea for your help. Now on to tackling other quirks…

[Neill]

Great to hear Kyle please let us know if you come across anything else. Just open a new thread and we’ll be around to help.

Neill

[Author]

Posts