"Photo" View Image Resolution?

[Sara]

Hi there – Is there a way to increase the photo resolution on the “photo view”? My images look great on the individual event pages, but they are SUPER blurry on the event calendar. I’ve linked to my examples below.

[Geoff]

Hey Sara, welcome back to the forums!

Good question. The best way to do it is to use a larger image. The images in Photo View will automatically scale down to fit to fit the space if the actual image file is large and that will provide a richer image.

For example, here is one of your images:
http://www.oplhmb.com/wp-content/uploads/2016/08/Perro_Bravo-1-194×300.png

I would suggest replacing that with the same image, but about double the size.

Cheers!
Geoff

[Sara]

If I increase the size of the image for the event, won’t it be super huge on the individual event page? The image that is associated with the Perro Bravo event is 551X850 px, so it needs to be larger than this for better resolution on a smaller image?

[Sara]

Sorry – Now I’m super confused. I set the “featured image” for this event to the event poster which is 700×1082 px. I updated the event and the image that is shown in the photo view is still low resolution at 194×300 px. I don’t have this image loaded into my Media Library at this size…? Is this Event Calendar Pro sizing the image and then blowing it up for the photo view? If so, how can I change this for a better resolution?

[Geoff]

Hi Sara,

So sorry if I’ve contributed to the added confusion!

Yes, a larger image file will result in a larger image on the event post, which I think you found out when making the new image:

http://www.oplhmb.com/event/punky-reggae-party-perro-bravo-burnt-special-guest/

That’s ok though, because now we can use CSS to modify the dimensions of the image on the event post. For example, try adding this to your theme’s style.css file:

.tribe-events-event-image img {
max-width: 150px; /* or whatever size you would like */
}

That will scale the image down so that it fits the page a little better. Here’s a screenshot of how it looks when I tested it out.

Will that do the trick? Please let me know. 🙂

Thanks!
Geoff

[Sara]

Hi – Thank you for this code. Just to be clear, this will help with the calendar “photo” view image resolution?

[Geoff]

Hi Sara, thanks for following up!

The resolution of the image is already good (screenshot). But, since the image dimensions are much larger than they were before, the code I provided will scale the image down on the event page itself so that it doesn’t take up so much space and interfere with the content (screenshot). 🙂

Cheers!
Geoff

[Support Droid]

Hey there! This thread has been pretty quiet for the last three weeks, so we’re going to go ahead and close it to avoid confusion with other topics. If you’re still looking for help with this, please do open a new thread, reference this one and we’d be more than happy to continue the conversation over there.

Thanks so much!
The Events Calendar Support Team

[Author]

Posts