Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Ideas for usage of umbraco:image

Suggested sample usage of umbraco:Image

All attributes from the normal <img /> can be used. The idea then is to let different providers help generate the correct src attribute, based on the parameters given by the user. The reason for using an options attribute for input to the provider, is that you might want the server to render the image at a certain size, but not actually have the width attribute on the rendered image.

I have restricted it to images for now. It might be possible to create an umbraco:Media that would handle videos or sound as well, but I think images are the most valuable thing to operate with.

I have created some samples of how I think it could be used.

Regular image

<umbraco:image runat="server" field="myImage" width="200" height="100" />

Outputs image from current page

<img src="/media/12345/foo.jpg" width="200" height="100" />

Image from different page

<umbraco:image runat="server" nodeid="1234" field="myImage" width="200" height="100" />

Outputs image from page 1234

<img src="/media/12345/bar.jpg" width="200" height="100" />

Thumbnail of image

The thumbnails that Umbraco Upload datatype will create

<umbraco:image runat="server" field="myImage" options="thumbnail=100" />

Outputs

<img src="/media/12345/foo_thumb_100.jpg" />

Using Image Cropper

The thumbnails that Umbraco Image Cropper datatype will create

<umbraco:image runat="server" field="myImage" provider="imageCropper"  options="property=crops&crop=smallCrop" />

Outputs

<img src="/media/12345/foo_smallCrop.jpg" />

Using ImageGen

The Rendering the image on the fly with ImageGen

<umbraco:image runat="server" field="myImage" provider="imageGen"  options="width=200&height=100" />

Outputs

<img src="/umbraco/imagegen.ashx?img=/media/12345/foo_smallCrop.jpg&width=200&height=100" />

Using ImageGen on non media image

The Rendering the image on the fly with ImageGen

<umbraco:image runat="server" src="/css/logo.jpg provider="imageGen"  options="width=200&height=100" />

Outputs

<img src="/umbraco/imagegen.ashx?img=/css/logo.jpg&width=200&height=100" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.