Skip to content

How to add an anchor tag in image content type of page builder

I am trying to extend the image content type to add an anchor tag with a href attribute.
I struggling to get the attribute herf in the master.html file.
here is my master.html

<a attr="data.desktop_image.attributes().href" data-lightbox="image-1" data-title="My caption">
    <img if="data.desktop_image.attributes().src"
         attr="data.desktop_image.attributes"
         class="pagebuilder-mobile-hidden"
         css="data.desktop_image.css"
         ko-style="data.desktop_image.style"/>
</a>

here "data.desktop_image.attributes().href" is defined by me and I have tried to add that in the image.xml wit custom converter like this.

<element name="desktop_image">
<style name="border" source="border_style" converter="Magento_PageBuilder/js/converter/style/border-style"/>
<style name="border_color" source="border_color"/>
<style name="border_width" source="border_width" converter="Magento_PageBuilder/js/converter/style/border-width"/>
<style name="border_radius" source="border_radius" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
<static_style source="max-width" value="100%"/>
<static_style source="height" value="auto"/>
<attribute name="image" source="src" converter="Magento_PageBuilder/js/converter/attribute/src" preview_converter="Magento_PageBuilder/js/converter/attribute/preview/src"/>
<attribute name="href" storage_key="link_url" source="href" converter="Ecommerce_PageBuilder/js/converter/attribute/link" persistence_mode="write"/>
<attribute name="alt" source="alt"/>
<attribute name="title_attribute" source="title"/>

Here I have added <attribute name="href" storage_key="link_url" source="href" converter="Ecommerce_PageBuilder/js/converter/attribute/link" persistence_mode="write"/> page on the frontend but it is not rendering anything.

I need to add anchor tag before image to use lighbox functionality.

Can someone please help me with this? thanks