Featured Image on Single Event is Terrible

[Margaret]

I am a little frustrated and would appreciate your help with my problem. In trying to use optimized images to speed up page load time I find that the rendering of the image on the single events page is terrible on the PC and get worse on tablets and smartphones, specifically the iPad and iPhone. Could you please give me some guidelines to improve the single event image while keeping the size in an acceptable range? I would appreciate any suggestions you might have to improve the quality of the image on all devices.

I am using the Theme: Church and Events (child) which included the Events Calendar plugin and I have since purchased and renewed the Events Calendar Pro.

Thank you for you help.

[Nico]

Hi Margaret,

Thanks for reaching out to us! I’ll point you in the right direction here…

The single events template (if not overwritten by the theme or child theme) uses the tribe_event_featured_image function that’s basically a wrapper for WordPress built-in function get_the_post_thumbnail. The difference is that tribe_event_featured_image adds some extra markup around the img tag.

Per default we use the full size, but that can be changed by overriding the single event template (as described in our themer’s guide) if you use other sizes or methods to call images.

Please let me know if this clarifies a bit on how to proceed here,
Best,
Nico

[Margaret]

Thanks Nico for the reply.

I have read the Themer’s Guide and I’m still confused because when I looked at the single event PHP it was:

<!– Event Image –>
<?php echo tribe_event_featured_image( null, ‘medium’ ) ?>

According to the information from the Theme Medium is defined as 300×300.

What size image do I need to render a good quality for all three platforms?

This is my first WordPress site and the only site I’ve ever developed. I had some previous experience basically maintaining a site with DreamWeaver. In other words, I don’t know anything about PHP and making changes to it.

Thank you,
Margaret

[Nico]

Hey Margaret,

Thanks for following up on this!

Responsive Images are now part of WordPress Core, be sure to read the linked article for more info on this. Image sizes can be defined in your theme, and the size of it depends on your site design. Helping you with responsive images in WordPress would be a bit our of the support scope we provide over these forums.

Once you define what size is the correct for your site, you can go ahead an modify that in the template override you’ve created in your theme. Does that makes sense?

Please let me know about it,
Best,
Nico

[Margaret]

Hi Nico,

This is getting a lot more complicated than I really expected and I think there must be another alternative.

My thoughts are for now to eliminate the featured image from the single event list page since it is the only place the image is not satisfactorily rendering. Can you please tell me how to accomplish this?

This is not my preference, but at least it’s better than the blurry images that are appearing now.

Thanks,
Margaret

• This reply was modified 10 years, 2 months ago by Margaret.

[Nico]

Margaret,

Sure, you can hide those by inserting the following CSS snippet in your theme’s stylesheet or via Simple Custom CSS plugin:


.single-tribe_events .tribe-events-event-image {
display:none;
}


Anyway I would like to double check on this, Can you please send me the website URL? Specifically an event where I can see this image issue?

Best,
Nico

[Margaret]

Hi Nico,

I am including 3 events for examples. Each of these display fairly good on a monitor, but they greatly degrade on the iPad and iPhone. That’s on the device specifically, not by re-sizing the display on the monitor.

I have used the 1024px because that is the size of the large image in the theme. Medium is 300×300 and Thumbnail is 150×150.

1. https://www.wacoc.org/event/2016-ladies-day/
The jpg image is 1024×640 and optimized to 242 kb.

2. https://www.wacoc.org/event/red-cross-blood-drive-2/
This png image is 1024×650 and 36 kb.

3. https://www.wacoc.org/event/senior-citizens-potluck/2016-03-14/
This jpg image is 547×365 and 169 kb.

I hope this gives you the examples that you need to help me resolve this.

Thanks,
Margaret

[Nico]

Hi Margaret,

Thanks for sending those samples, I can get you now…

This is something the theme support will be able to help you better with. To be clear, this how the default events template look like: http://wpshindig.com/event/code-coffee-code-learn-share/2016-02-25/ – as you can see the theme you are using is heavily customizing the template, and I’m not aware what’s the recommended size for the image you are uploading. Most probably this is described in the theme documentation, or available upon request.

Please reach out to the theme support team on this, they’ll surely be able to point you in the right direction…

Best,
Nico

[Margaret]

Nico,

I thought you might suggest that this is a question for the theme developers. I have previously asked them too about the image size and didn’t get a very satisfactory answer from them either. But I guess it’s time to try again.

Thank you for your patience with me and for your help.

Margaret

[Nico]

Hey Margaret,

Glad to be of service 🙂 Hope you have better luck with them this time!

I’ll go ahead and close out this thread, but if you need help with anything else please don’t hesitate to create a new one and we will be happy to assist you.

Best,
Nico

[Author]

Posts