How to make the image as clickable with the link in fragments?

Issue

• How to make the image as clickable with the link in fragments?

Environment

• Liferay DXP 7.1
• Liferay DXP 7.2

Resolution

Please note: The following information involves customizations or implementation ideas that are beyond the scope of Liferay Support.  Please exercise appropriate discretion in the use of this information to choose to follow it. 

• In 7.1, there is no OOTB option is available to have an editable image with a link.
  • This may be achieved using the below steps that are hardcoded in the fragment HTML.
• Test case: 
  • Create a fragment collection using the file content 
  • Add the anchor tag as there is no OOTB option or tags available to link it.
  • Observed behavior: It's redirecting to the URL while clicking on the image. 
  • Example:

<a href="http://www.google.com">
<lfr-editable id="01-01-image" type="image">
	<img alt="Responsive Image" class="w-100" src="xxx">
</lfr-editable>
</a>

• Important pointers:
  
  • It’s important to note that the content inside <lfr-editable> tag is always interpreted as a default value for that editable element.
  • That’s why you can’t put any additional markup around the image or nesting the lfr-editable tags

Additional Information

• Liferay DXP 7.1: Making Images Editable
• This functionality has been introduced with DXP 7.2. Reference: Creating Editable Links