This article does not apply to Umbraco 8.

    The concepts and code in this article have been deprecated in Umbraco 8 and no longer apply.
    If you are using Umbraco 7, this article is perfect for you!

    Umbraco:image

    Applies to: Umbraco 4.11.0+

    The umbraco:image control enables you to add images from your content to your templates. The control is used as such:

    <umbraco:image runat="server" field="bannerImage" />

    This will output an <img/> tag when the template renders:

    <img src="/media/19/imagename.jpg" />

    The complete syntax for the control is this:

    <umbraco:image runat="server" field="{fieldName}" nodeid="{nodeId}" parameters="{urlParameters}" provider="{providername}" />

    All other attributes, such as width|height|class will be passed through to the generated <img/> tag.

    Field

    The field attribute defines which field of the current page will be used as the image. If the field contains a number, then a media item will be used to generate the url. If the field contains an image path (for example from the upload control), then that path is used directly.

    NodeId

    If a nodeid is specified, then that node will be used to get the field from.

    Parameters

    The parameters are provider specific. The default provider supports the upload data types thumbnails, and the Image Cropper data types crops.

    Key Value Description
    thumb int Specify the size of the thumb that you want to display. For example thumb=200.
    crop string Specify the name of the crop that you want to display. For example crop=small.

    Example

    <umbraco:Image runat="server" field="bannerImage" Parameters="crop=small" />

    This generates:

    <img src="/media/19/myimage_small.jpg" />

    Provider

    A custom provider can be created by implementing the IImageUrlProvider interface. An example would be an ImageGen provider which could be used like this:

    <umbraco:Image runat="server" field="bannerImage" Parameters="width=400&height=150" Provider="imageGen" />