Avoiding blurry images in Styled blog post grid example

Loops & Logic
#1

Hey y’all,

First of - Much appreciate the Loops and Logic Plug-in and intend to plug it in an upcoming post of mine as I’ve found it to be useful in getting some really simple, but essential dynamic layout stuff up and running. Kudos to the developers behind it. Really, can’t thank you enough for the solid work.

I’m still new at using it and have run into and issue in leveraging the ‘Styled blog post grid’ example the plug-in comes with. The hero images that accompany the posts (actually pages) I wish to promote look super blurry as they get scaled to 300x100 (originally 1500x500), I’ve tried to change this with no luck.

I think the line I need to alter is the following (Line 13):

<img src="{Field image_url size=medium}" class="{Field image_post_class}" alt="{Field image_alt}" srcset="{Field image_srcset}" sizes="{Field image_sizes}">

to

<img src="{Field image_url size=400,150}" class="{Field image_post_class}" alt="{Field image_alt}" srcset="{Field image_srcset}" sizes="{Field image_sizes}">

I’ve also tried sizes instead of size, but the images keep showing up resized to 300x100, as you can see here: www.lasselaursen.com

Open to any suggestions!

Thanks in advance,
Gazoo

1 Like
#2

Welcome to the forum @Gazoo! I’ve got to ask: did you choose that username because you’re a fan of Toyota or or because you’re a fan of The Flintstones?

Regarding image sizes, I haven’t tested this myself recently so I’m just going off the docs, but I’m seeing two fields that might give us clues about how to approach this:

  • sizes - Responsive image attribute “sizes” for img tag - Accepts optional attribute “size” for image size name (default is “medium”), or width and height values in pixels separated by comma like “400,300”

and

  • url - URL - Accepts optional attribute “size” for image size

So if you want to display your image URL, I think it’s just compatible with size which means you’d need to specify one of the four default WordPress image sizes. So if you wanted to display your images at full resolution, I believe that would be src="{Field image_url size=full}". Does that work for you?

I believe the sizes field is a way to auto-generate a value for the img tag’s sizes attribute in HTML. I haven’t played around much with that myself but you can take a look at the WordPress docs to get an idea of how that might work.

Let me know if that helps!

#3

Thanks @benjamin

The nickname Gazoo is an ironic choice as I wouldn’t call myself a fan of the Flintstones, but the name definitely comes from there. Toyota seems a much more appealing choice. Alternatively, I could just go with my other favorite - Ozmodiar.

That’s what’s confusing about the sizes parameter as it seems to indicate that I can provide width or height values? But perhaps that’s only within the ball-park of the pre-defined sizes that WP makes available?

I solved the problem by upping Wordpress’ maximum width/height values for the medium thumbnails from 300 to 500, and re-uploading all of my ‘hero’ images.

Appreciate the advice all the same @benjamin .

Cheers,
Gazoo

1 Like
#4

Glad you ended up solving the issue! I suppose changing the medium WP image size default is a good way to go if you only need them to be 500px, since the large size is 1024px which might have been more resolution than you needed in this case.

I think where you’re getting confused is that you’re talking about a sizes parameter but unless I’m mistaken, there is no sizes parameter in L&L. The two items from the documentation that I quoted above are fields available in the attachment loop (which are the same fields available for a featured image since it’s an attachment). Here’s a page in the docs that provides a more detailed explanation/example and you can see the sizes field in use here:

<img src="{Field image_url}" sizes="{Field image_sizes}" srcset="{Field image_srcset}" alt="{Field image_alt}" width="50">

You’ll notice that the docs mention that this field "accepts optional attribute size for image size name (default is medium), or width and height values in pixels separated by comma like 400,300"

I haven’t played around with HTML’s sizes attribute but it seems that L&L supports a syntax like this:

<img src="{Field image_url}" sizes="{Field image_sizes size='400,300'}" srcset="{Field image_srcset}" alt="{Field image_alt}" width="50">

I’m not certain whether those sizes need to be predefined in the media library but I think that would be a more general HTML/WP question and not specifically an L&L one.

Does that help explain things?