I have a requirement to rewrite html <img /> tags to html5 picture tag.
In my application I have provided Rich Text Editor component to the authors, so they are actually creating the content in some other html editors and then paste the html content into the RTE. And while rendering the content we need to rewrite the <img> tag to <picture> tag
For ex: <imgsrc="default_landscape.jpg"alt="My default image">
Should be converted to
<sourcesrcset="smaller_landscape.jpg"media="(max-width: 40em) and (orientation: landscape)">
<sourcesrcset="smaller_portrait.jpg"media="(max-width: 40em) and (orientation: portrait)">
<sourcesrcset="default_landscape.jpg"media="(min-width: 40em) and (orientation: landscape)">
<sourcesrcset="default_portrait.jpg"media="(min-width: 40em) and (orientation: portrait)">
Here the issue is how to manage the different images for different media size?
The content editors agreed to create multiple resolution/size files for each image. So I thought of uploading the files as renditions but how can I add some editable properties to each renditions to store the information like max-width, orientation etc?
If this is possible then during the rewrite I can fetch the renditions and create the <picture>
So could you please guide me to implement a property editor for renditions? Or suggest a workaround
This is what exactly I am going to do. From the original image src I can get the renditions. But to generate the picture tag I need to store additional information for each rendition like (max-width=40em, orientation= landscape etc) I don’t know how to store this information for a rendition.
WHy not simply set this information from a component dialog. Then read that information in the HTL component, add that to a tag in the HTL component. This will render the image the way you want. I'm not sure why the use of JSOUP API has to be used here.
You can easily make a component like this in AEM using HTL:
For the props like media="(min-width: 650px) - make the input a component dialog. THis is what i would do in a similar situation. You do not need to override any AEM components, etc. That is - do not modify any component so that you have to rewrite img to picture. Create a new HTL component and have the dialog set all props you need. You can even have the dialog select the image from the DAM.