Responsive image support in Extended Details
Permalink Browser Info Environment
Hi! In 'Extended Details' it's possible to load images into Redactor. However, these images are not using concrete5's responsive image feature (i.e. <picture> tags with source sets), even though our site is set up to use it. When an image is loaded into "Extended Details", it outputs only an <img> tag:
This leads to huge images being loaded where they are not really needed. Is there a way to enable responsive images or some way to get the small thumbnail for inserted images directly?
Otherwise, the Add-On is really great and exactly what our customer wanted for this project. Cheers :)
<img id="image-marker" src="http://localhost/c5site/index.php/download_file/view_inline/36">
This leads to huge images being loaded where they are not really needed. Is there a way to enable responsive images or some way to get the small thumbnail for inserted images directly?
Otherwise, the Add-On is really great and exactly what our customer wanted for this project. Cheers :)
| Type: | Discussion |
|---|---|
| Status: | Resolved |
Hey! Thanks for taking the time to reply.
The funny thing is that extended details is using Redactor and in c5's documentation on responsive images it says that this would take care of creating the picture elems/srcsets for inserted images.
We can live with the CSS solution and users potentially having to resize images for now. Thanks a lot for your feedback!
The funny thing is that extended details is using Redactor and in c5's documentation on responsive images it says that this would take care of creating the picture elems/srcsets for inserted images.
We can live with the CSS solution and users potentially having to resize images for now. Thanks a lot for your feedback!
I unfortunately don't know of a way to output a picture element into the extended details, this may just have to be a case of pre-sizing the images before uploading them. If we were managing this ourselves we'd potentially be resizing a bunch of images in bulk and uploading them to a fileset, where they could be quickly picked.
If you're not so worried about the filesize and are just looking for a css solution to restrict the width, you could add something like:
To the site's global styles. Or you can also resize the image in Redactor to apply a manual height and width.
I think a true solution to this would be something programatic, where an image is associated with the listing and automatically thumb-nailed and placed into the extended details. It's really a custom bit of functionality so not something I'm likely to add to the add-on directly. You're welcome to make direct contact through ryan@mesuva.com.au if this is a critical part of your setup and you do need this customised.