Sitecore Image Parameters and Image Control

This post is for those who are still:

- Creating duplicate Image Items on Sitecore for achieving Responsive Web Design or Image Gallery.
- Creating separate images for desktops, phones and tablets to achieve responsive web design.
- Creating Thumbnails, Preview and original images for image galleries.
- Resize images on-the-flyas per requirement.

Tired from maintaining multiple items(create, update, delete, publish) of each image?

There is a short and sweet solution within Sitecore itself to give freedom from above headache, that is Sitecore Image Parameters and Sitecore Image Control.

How it is beneficial?

- Using it, each requested image is created/scaled and cached on disk by Sitecore itself, so it does not impact on performance.
- This gives freedom from multiple uploads/updates/publish of same image and multiple Item Cache
- Saves lots of human efforts and time
- Freedom from, reduction in database size, beneficial from maintenance and point-of-view too.

Different Image Parameters:

w

Width of image

h

Height of image

mw

Maximum width of image

mh

Maximum height of image

iar

Ignore Aspect Ratio. Value should be 1 or 0.

as

Allow Stretch. Value should be 1 or 0.

thn

Create Thumbnail. Value should be 1 or 0.

bc

Background Color (When there is no aspect ratio set)

sc

Scale Image. 1 is default value.

Few Samples:

Expected Result Sitecore Image Control Image URL
Original <sc:Image Field="My Image" /> http://com.com/~/media/myimage.jpg
Width=150 <sc:image field="My Image" width="150" /> http://com.com/~/media/myimage.jpg?w=150
Height=200 <sc:image field="My Image" height="200" /> http://com.com/~/media/myimage.jpg?h=200
Height=200
Width=200
Ignore Aspect Ratio
<sc:image field="My Image" width="200" height="200" iar="true" /> http://com.com/~/media/myimage.jpg?h=200&w=200&iar=true


You can findout all parameters for image control from:
http://sdn.sitecore.net/Articles/XSL/5%203%20Enhancements/Image%20Enhancements.aspx

Now, you will think that how can we achieve adaptive images using theImage control. Well, for that we have two approaches:

  1. Use Sitecore Adaptive Images module.
  2. Use JS plugins like responsejs. This is more preferable approach.

    This plugin needs all images to be rendered as below:
    
    

    Means, the the control we create, should render image tag supporting different size attribute and value urls.

    Here, if plugin finds the device screen is suitable to 330 width, it will update image's source to data-330's value. Similarly to data-961 when it finds device's screen suitable to 961 width.

    For this, we can extend Sitecore's Image Control to achieve this image rendering.

Enjoy!!

2 comments:

  1. Great article!
    what configuration sets the Querystring parameters in URL. How to avoid getting the query string parameters in url.

    ReplyDelete
    Replies
    1. Thank you Raghuveer for reading and posting to this post. Querystring in the image URL is generated from two places:

      1. Image Field Render : You can override Sitecore.Pipelines.RenderField class. Refer: http://www.mikkelhm.dk/blog/removing-width-and-height-tags-from-fieldrenderer-and-scimage

      2. From Rich Text Editor - You can fix RTE's existing JS where you can remove the querystrings from media URLs.

      Wish, this will be helpful to you!

      Delete