CODEWITHSUNDEEP
c#asp.netrazorumbraco
hutchonoid
hutchonoid

Reputation: 33305

Umbraco display images created from image cropper using razor

How can I display images created using the image cropper data type?

As an example say I upload an image1.jpg, this contains 3 image crops named thumb, featured and main.

How would I display the image created as thumb using Razor?

Upvotes: 4

Views: 3996

Answers (2)

ProNotion
ProNotion

Reputation: 3692

The following should point you in the right direction. The Image Cropper is a standard Umbraco Datatype so it has some support for accessing the crops, you can find them by crop name:

var mediaItem = Library.MediaById(Model.Thumbnail);
var img = mediaItem.crop.Find("@name", "thumbnail");

if (img != null)
{
    <img src="@img.url" />
}

I hope that helps.

Upvotes: 3

hutchonoid
hutchonoid

Reputation: 33305

I have got this working, not sure it is best practice but does the job for now.

<img src="@Library.Concatenate(mFile.umbracoFile.Split('.')[0], "_thumb.jpg")" />

The above takes the filename of the media item, strips the file extension off and concatenates it to the cropped image name using the Library Helper. In this case the cropped name was thumb, so adding an underscore and the cropped name resolves the generated image.

The cropped images are generated within Umbraco on the server in the following format:

filename - fileextension + underscore + croppedname + fileextension

Upvotes: 3

Related Questions