#1157 – Different Images srcset

Before i buy Econa, i want to know if it's possible to use different images for a srcset. This scrset should replace fullimage and/or introimage in an article. I've read the documentaiton but it's not clear for me. Perhabs it could be done with the custom fields from econa, but i don't know.

Hi,

Multiple image sizes are only supported in the custom field integration at the moment. The output of article images (into and full images) in the front-end is rendered from the default Joomla layouts which do not support the srcset attribute.
We are actively working on Econa version 2 (Joomla 5 native) which will be a major update and will bring several new features. We will try to find a way to support srcset in article images as long as the Joomla API allows us to do so.

Please let me know if you have any questions.

Regards

Hi Lefteris,
this sounds good :-) So i could replace the full- or introimage in my template-overrides with your custom-fields and get the abillity to create different images for different viewports, right?


This is what i want to do for example:

Srcset existing of:
Econa-Custom Field 1 (image-for-desktop-1920x1200.jpg)
Econa-Custom Field 2 (image-for-tablet-820x300.jpg)
Econa-Custom Field 3 (image-for-mobile-390x390.jpg)

Best regards

Yes, at the moment the custom field integration is the only way to get multiple image sizes. But we want to find a workaround for article images too.

Note that you can define multiple image sizes in a single custom field there is no need for multiple fields. I want to make this clear, all the image sizes of the same field are variations of the same image. You can't have different images in the same custom field.

Also, keep in mind that Econa is using srcset and sizes attributes, not the source tags with media queries.
You use the sizes attribute to let the browser know your desired display dimensions for the image. Then the browser picks up the best match automatically considering the actual image dimensions and the device screen density.

Since you are familiar with a bit of HTML you may want to check how this works: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

Please let me know if you have any questions.

Regards

The following video may help you understand better the functionality of the custom field:
https://www.youtube.com/watch?v=-h4VwoiaLL0

Regards