Monday, October 22, 2012

Image Placeholder for Sitecore shell

When you create a new website, there are lot of small places for usability improvements in Sitecore shell, which sometimes are not obvious for developers. One of them is Image field dimensions.

The easiest solution is to write some notes in the Title of the field, like "Suggested size - 100x200", but usability of such solution is still not enough good, in some cases it can be unclear - where is width or height, etc.


So, I've created really simple (as always) module, that reads field title and displays placeholder when Image field contains no value. It does not affect front-end or actual field value, it will disappear as soon as you choose real image. Placeholder size is parsed from the field Title using RegEx.

Here are some examples (background / font color can be easily customized)



Module uses the following settings -

ImagePlaceholder.ServiceUrl (http://www.placehold.it/{0}/{1}/{2})
Determines the URL of the service, as well as placeholders for dimensions.

ImagePlaceholder.Pattern ((\d+)x(\d+))
RegEx that will be used to parse the Title

ImagePlaceholder.BackgroundColor
Background color

ImagePlaceholder.FontColor
Font color

You can grab the module here:  http://marketplace.sitecore.net/en/Modules/ImagePlaceholder.aspx , it installs in just a few seconds, contains 1 item, .config include file, and DLL. When item is installed - please choose "Merge" option.

Enjoy, and feel free to share your feedback, request more features, etc.

2 comments:

  1. Hi Alex,

    Good idea. I had a similar idea, but mainly from the Page Editor Mode perspective. The PEM has the lesser characteristic that in an image field a little icon gets stretched to the big control where the image needs to be placed. You're solution would be ideal for that purpose.

    So mainly my question is: is it compatible for the PEM?

    ReplyDelete
  2. Hi Andy,

    For now it works for Content Editor only, but in general, I think it's a great idea to support PEM as well. Will look into it and post updates here once it's done.

    ReplyDelete