Archived topic
Dynamic Image Block
5 replies · Started by EcoDev on May 7, 2021
Hello, I'm experimenting with the new features in GP 2.0 and I'm trying to put together a page hero using a full width featured image. I can get it working with the Dynamic Background image no problem but this relies on a background image which doesn't have the benefits of srcset. So as I don't need any text over the image I thought it would be better to use the dynamic image feature. However, there doesn't appear to be an option to make this full width as the width input only seems to accept pixels?
Is my only option some custom css using object-fit cover etc?
It would also be great if you could apply a fallback image here like you can with the dynamic background image.
Thanks
Hi there,
that would rely on first the image being large enough to span the full width of the screen.
If needed you can apply width: 100%; to the img using CSS to ensure it fills that space.
I wouldn't recommend object-fit: cover; or defining any pixel sizes on the image, as the browser would apply them and not use the src-set options.
Thanks David, I'll do that then, I guess there's no option to use a fallback image then? Not the end of the world!
That's interesting what you say about object fit and defining a pixel size, in my testing I used the full size image for the hero and defined a set pixel height (and 100% width) with object fit cover, and it pulls through the smaller size images on smaller width browsers with this method unless I'm missing something?
Thanks
Object fit becomes an issue if you define a PX to the image styles such as height: 400px; if you don't then all will be good. Fallback images are only available if you set the Dynamic Background image unfortunately.
Ok great, thanks David
You're welcome
