I went looking for a cookbook article but couldn’t find one so thought I’d ask how others have implemented the image block in the front-end.
There are a couple of issues I currently face with the default image block snippet:
Firstly, toggling the crop option in the image drawer seems to do nothing on the actual website even if I’ve selected a ratio from the dropdown field next to it. How exactly is the ratio and crop fields supposed to work? What does your image CSS look like to accommodate these options?
Secondly, how should I implement responsive images? If the editor adds an image block to a 1/1 layout, the image takes up the full width of the container but if they later move it to a 1/2 1/2 layout (or add a different image to a 1/2 1/2) layout, the sizes attribute would need changing because it’s no longer full width. How did you implement responsive images?
Looking forward to the suggestions and advice. Thank you