The scenario is: You have a documenttype that contains a media picker. Now you would like to output the image that was picked to your page. The first time you try that, you probably did this:
<umbraco:item runat="server" field="bannerImage" />
And you probably got a bit disappointed when it returned "1063", and not an image. Then you go to google and figure out that you need a macro of some sorts, or some inline XSLT mumbo-jumbo, and after a while, you kind of just accept that.
As of Umbraco 4.11, there is a new control in town: umbraco:image. It is fairly simple to use, and should make it a bit easier to work with images. You use it like this:
<umbraco:Image runat="server" field="bannerImage" width="200" height="100" class="banner" />
And that will output this:
<img src="/media/19/73006.jpg" width="200" height="100" class="banner" />
ZOMG! That is the most awesome thing since sliced bread. Almost :-) Let's take it a little further.
There are three attributes on the control:
- field - The property to get the image id or path from
- parameters - A name/value collection passed to the selected provider. (Default provider supports thumb|crop)
- provider - Specifies which provider to use when generating the url for the image
All other attributes will be passed directly through to the img tag. For example the width and height attributes.
Per default, the control will use the built-in provider, which will allow you to select a thumb that is generated by the Upload datatype or a crop from the ImageCropper to display. You would do that like this:
<umbraco:Image runat="server" field="bannerImage" Parameters="thumb=200" />
<umbraco:Image runat="server" field="bannerImage" Parameters="crop=small" />
Roll your own
Many of you are using other forms of image tools, such as the lovely ImageGen. No problem! You can write a provider that will generate any type of URL you want! I have written a quick sample provider for ImageGen here, that you could take a bit of inspiration from: https://gist.github.com/3835255
To use a specific provider, just tell the control to do so:
<umbraco:Image runat="server" field="bannerImage" Parameters="width=200" Provider="imageGen" />
And with my custom provider, that would give you this output:
And Bob's you uncle! :-)
I hope you will find this useful, and maybe give some feedback on how you like it.
Morten Bock Sørensen
Morten is on Twitter as @mortenbock