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.
#1157
Posted in ‘Econa’
Different Images srcset
Latest post by Lefteris Kavadas on Tuesday, 06 February 2024 17:37 EET
Monday, 05 February 2024 16:26 EET
Lefteris Kavadas
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
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
Monday, 05 February 2024 16:45 EET
lizzard
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
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
Tuesday, 06 February 2024 17:31 EET
Lefteris Kavadas
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
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
Tuesday, 06 February 2024 17:37 EET
Lefteris Kavadas
The following video may help you understand better the functionality of the custom field:
https://www.youtube.com/watch?v=-h4VwoiaLL0
Regards
https://www.youtube.com/watch?v=-h4VwoiaLL0
Regards
Note: An active subscription is required in order to get support for our paid extensions. For our free extensions, if you don't have an account, register and then submit your support request. In case you just want to ask a question, you can also use the contact form .
