The next release of Glass.Mapper.Sc will have a major update to how we handle image fields in Sitecore. There was a bug in older versions where the values of parameters set on image fields weren't being handled correctly. This meant that a content editor could not configure the size of the image from within Sitecore.

However this creates several challenges around how we sensibly merge settings configured in Sitecore with the the value set by a developer in code.

To clear this up I will run through several examples which will hopefully explain how we handle each scenario.

Lets start by assuming we have the following image field:

We can see that the user has set a Width and Height, assuming we have the following code in our rendering:
The html that is rendered will be:
<img src="/~/media/Images/38175_442041638932_1646261_n.ashx?h=225&w=300">

If however the developer decides to define a w parameter (see Sitecore Image Parameters) Glass will ignore the settings set by the content editor, e.g.:

@RenderImage(x=>x.Image, new {w = 50}, outputHeightWidth:true)

Will render:

<img src="/~/media/Images/38175_442041638932_1646261_n.ashx?w=50">

Notice that just the w parameter is added and not the h parameter. We do this to ensure that we don't cause any odd scaling issues, e.g. having a width of 50 but a height of 255.

Glass.Mapper.Sc by default won't render the width and height attributes, however you can for this to happen by using the outputHeightWidth parameter:

@RenderImage(x=>x.Image, new {w = 50}, outputHeightWidth:true)

This returns the following html:

<img src="/~/media/Images/38175_442041638932_1646261_n.ashx?w=50" height="225" width="300">

Notice that Glass appended the w parameter specified by the developer to the URL but used the height and width that was configured in Sitecore. This is going to cause a very distorted image, to solve this we need to specify the width as a parameter:

@RenderImage(x=>x.Image, new {w = 50, width=50}, outputHeightWidth:true)

Glass will then render the width attribute with the correct size:

<img src="/~/media/Images/38175_442041638932_1646261_n.ashx?w=50" width="50">

Hopefully this brief blog has shown you a few of the options available to you for controlling how images are rendered by Glass.Mapper.Sc and Sitecore.

comments powered by Disqus