Blurry images in Photo version of list

[sjj2017]

Hi,

I’m currently using Events Calendar PRO, but there’s an issue with the images. They go blurry, even though I’m using images that are of higher resolution than what is needed. It seems to me that the images are being resized to a smaller size then sized up again.

Also I noticed in my F12 developer tool that the images have a max-width and max-height that is much smaller than the image’s dimensions, which I find weird. If I change the underlined dimension (see image in next post), I can make the image go all clear again. But I don’t know where to change this in the actual code.

Can you help me with this issue?

Best regards,
M

[sjj2017]

This reply is private.

[Trisha]

This reply is private.

[sjj2017]

All the images in the masonry have a width of 400px or larger. I’ve actually put an image in that’s 3000px in width. But it’s still blurry and it still says in the developer mode that the max-width is 100vw, 200px.

[Trisha]

Hi there!

Ok, I see what you mean. That appears to be a conflict with the way the theme is rendering the images. It’s using srcset which is usually a good thing…but in this case it’s choosing the wrong image size.

I would suggest talking to the theme author to see if they have a workaround as it’s not something we can fix with CSS or a snippet in this case.

If you have any additional questions or need clarification on this issue let me know, I’m happy to help!

Cheers,
Trisha

[sjj2017]

Hi again,

Thank you for your answer. I find it a little weird, though, that it’s a theme flaw. Before I posted this thread I tried to deactivate all the plugins and use the default theme (Twenty Sixteen) and it still does the same thing here. So might this just be a general issue for all themes?

Best regards,
M

[Trisha]

Hey, there!

Ok, you totally have a point. I didn’t realize you were seeing the issue in twenty sixteen as well. Did you also disable all plugins besides The Events Calendar when you tested?

Based on this new information I will do further testing and report back to you asap!

Hang in there!
Trisha

[sjj2017]

Hi,

Yes, as I wrote in the latest post, I also tried deactivating all the plugins.

Best regards,
M

[Trisha]

Hi there,

I apologize for missing that about the plugins! The good news is I found the source of the problem and was able to come up with a solution for you.

The problem is the theme but it also occurs in the twenty sixteen theme. It has to do with the change to responsive images in WordPress 4.4 and how the default image sizes are calculated in the theme itself.

If you’ll add the following snippet to your theme’s functions.php file it should fix the problem.

https://gist.github.com/trishasalas/c7568e1d9ee1b772faedcfd43d0ac772

Let me know how it goes!

Cheers,
Trisha

[sjj2017]

Hi Trisha,

The code snippet works like a charm! The images are not blurry anymore. Thank you very much for your help.

Best regards,
M

[Trisha]

Great news! So glad I was able to find a fix for you!

I’m going to close this conversation out, but as always, if you need anything else feel free to reach out! I’m happy to help 🙂

Cheers,
Trisha

[Author]

Posts