How to add editable properties to renditions?

[dennyj13354090]

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: <img src="default_landscape.jpg" alt="My default image">

Should be converted to

<picture>

    <source srcset="smaller_landscape.jpg" media="(max-width: 40em) and (orientation: landscape)">

    <source srcset="smaller_portrait.jpg" media="(max-width: 40em) and (orientation: portrait)">

    <source srcset="default_landscape.jpg" media="(min-width: 40em) and (orientation: landscape)">

    <source srcset="default_portrait.jpg" media="(min-width: 40em) and (orientation: portrait)">

    <img srcset="default_landscape.jpg" alt="My default image">

</picture>

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

Regards

Denny

[smacdonald2008]

If you have a requirement to perform this task:

" have a requirement to rewrite html <img /> tags to html5 picture tag."

Then write a custom AEM HTL component to render this HTML

See this article where we wrote a custom AEM HTL component renders video - Adobe Experience Manager Help | Creating an AEM 6.3 HTML Template Language movie component

You can use a dialog on the component to select the asset that you want to render.

[VitthalaShiva]

Can you use Sling Adaptable to get the component properties so that.

1. Get the authored content from RTE property.

2. Parse the property with JSOUP API.

3. Replace IMG with picture.

4. Use service / util to get rendition s of src property of IMG

5. Create HTML structure for the Picture.

In this way you can have more flexibility on IMG and picture tag.

Thanks

[smacdonald2008]

If you build a new HTL component - use the tags you need as opposed to trying to rewrite tags

[dennyj13354090]

Hi VitthalaShiva​,

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.

Could you please help?

Regards

Denny

[smacdonald2008]

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:

Tryit Editor v3.5

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.