How to Make an Image Field Non-Editable in Sitecore Experience Editor?

Question

We are working on Sitecore 10.4 and using edit frames to make components editable with complex fields. However, I want to avoid making each field editable separately.

For simple fields like the title, I'm using i_item.Title.raw. But for the image field, I’m unable to apply .raw.

Could someone help me make the image field non-editable in the Experience Editor? Below is my current code:

{{ sc_query i_item "Thumbnail Image" }}

Any help would be greatly appreciated!

Answer 1

In order to achieve this, you can read the media url of the image field using sc_medialink property and this can be then used to create the img tag.

{{ mediaItem = sc_follow i_item 'Thumbnail Image' }} 
{{ if mediaItem}}
    {{ mediaItemUrl = mediaItem | sc_medialink }}
    {{ mediaItemAlt = mediaItem.alt.raw  }}
    <img src="{{mediaItemUrl}}" alt="{{mediaItemAlt}}"/>
{{ end }}

Hope this helps!!! Let me know in case you have any queries.