Wednesday, 16 August 2017

Remove Inline Styling on Sitecore SXA image component

This post describes one of the basic issues we face while using some of the Out of the box SXA components.
The Image component when dragged and dropped from the toolbox, straight away adds the following HTML:

 Here we can see that an inline style is added to the image tag, which overrides the image margin supplied by the Front end team(agency).
This can be an issue where every image of the site has a forceful margin set to it as 0px 0px.

This inline style is getting added from a SXA class called "SetImageStyleParameters", which can be found under: Sitecore.XA.Foundation.SitecoreExtensions.Pipelines.RenderField.

We can find this class patched in : ~\Website\App_Config\Include\Foundation\Sitecore.XA.Foundation.SitecoreExtensions.config
As :

 We can simply get rid of the inline style by removing the patch from "Sitecore.XA.Foundation.SitecoreExtensions.config" or we can override the process based on our custom requirements.

1 comment: