Using Thumbnails and src sets with Dynamic Images

Hey @MarloKessler,

Thank you for the suggestion and pointing this out.

Moving this to “In Progress” as the team is working on this. We should see it arrive in a bit.

2 Likes

Awesome, thank you a lot!

This is very very important.

@Louis I hope this can find the way cwicly. :wink: Setting up lot of dynamic images in a project. Full size images are loaded on the page. If src set can be added then it will be really good.

Hey @dranzer,

Are you experiencing this with all dynamic images?
We do support src set and size for all dynamic images except when they’re inside a repeater (which will be addressed soon).

1 Like

Repeater images should now use srcset and sizes defined in the Image block with 1.2.8.3.

If you still experience images not loading these optimised version, please let me know by replying to this thread.

Thanks!

1 Like

Hi Louis,

It seems we might be having the same issue with dynamic images outputting the full size image on the front end. We are using the query block with a standard 3 column layout of posts and selected the dynamic featured image.

On the front end, it is outputting large 2000px wide images, regardless of the thumbnail size we select in the settings.

Funilly enough, when there is no featured image and we set a fallback image, the fallback image does work as expected and output the correct size on the front end.

Thanks!

Could you try turning off “srcset”? Because when outputting a source set the browser always loads the images which fits the according browser window width instead of the selected thumbnail size. Does this work?

Hey Marlo,

I thought the same and tried that but it doesn’t actually seem to remove any of the srcset attribute on the frontend?

Very strange one.

Thanks,

Mhh, maybe some bug with the new update?

I bought it today so definitely on the latest version so it seems maybe something has happened with the new update as you say.

Weirdly as well, on the fallback image, no srcset gets output at all, regardless on any of the settings - Remove srcset, thumbnail size, etc.

The fallback image only seems to ever output a single URL, either the full size url or the chosen thumbnail size URL. no srcsets.

The images seem to need to some work by the looks of it.

Hi @phil22,

This does sound unusual indeed.
I’ve just tested it on my side and everything seems to work correctly.

If this is a live installation, could you possibly send me (support@cwicly.com) a link to the page this is on so I can take a look?

Thanks in advance and apologies for the inconvenience.

Just wanted to come back and say a big thanks to Louis for looking into this for me and already pushing a fix in a recent update. The chosen image size is now the respected size image displayed on the front end - thanks!

Yes, and also thanks to @Louis and the team for building such a great tool and beeing so helpful and responsive! It is truely great what you are doing!

3 Likes

Thank you @phil22, glad it’s finally sorted thanks to the access to your installation.
It’s reports like yours and @MarloKessler that help us build a better tool, I really do appreciate the time you take to post these issues.

@MarloKessler, you made our day :smiling_face_with_three_hearts:

I apologize in advance for being a little dense but I don’t see where in the UI to tell Cwicly which version/size of the uploaded image to use.

Feel free to draw a big red arrow :joy:

It looks like you’re editing the background image of a div. Srcset can only be used for actual elements.

Thanks @sunny .

@Louis is there any chance of extending the ability to choose default image size to div background images? I use background images a lot when building a theme because I can control the dimensions of the image without forcing the end user to have to crop the original image … it results in a cleaner site imho.

Np :slight_smile:

Technically you can’t use srcset on background-images, you’d need to use the image-set property instead.

I actually didn’t know image-set even existed until just now. It looks like it has limited browser support, but seems like it’s making it’s way in the latest versions: "image-set" | Can I use... Support tables for HTML5, CSS3, etc

If you want a workaround, you should look into using object-fit and absolute positioning your background images.

They technically aren’t background images anymore, but function the same way and of course are then able to take advantage of srcset.

If you want an example of how it’s done, you can check out the gradient/noise background image in the hero of https://funnelinspo.com.

The main things are:

  • Set your section to position: relative
  • Set position: absolute, object-fit: cover, and width & height to 100% on your image
  • Set z-index: 0 on your image, and z-index: 1 for any container that holds your content on top

Thanks @sunny !

My post needs to be twenty characters long soooooooooo :sunglasses: