Crop and rescale

Andreas Runnhagen

Vote:

When using a MediaReference property on my page I get access to a quite nice cropping tool in EPiServers edit mode. How do i access the cropped version of this image? ImageVault dosent come with displaytemplates for MVC so i have to take care of this myself it seems.

I would like to do a combination of rescaling and cropping where images automaticly is scaled down to the page width but if the editor choose to crop the image then the crop effect should be applied first.

This what i have at the moment:

In my controller:

if (currentPage.Image != null)
	standardPageViewModel.TopImage = _client.Load<ImageVaultImage>(currentPage.Image.Id).FirstOrDefault(); ;

In my "image definition" that inherits from MediaItem:

public class ImageVaultImage : MediaItem
{
	[Metadata(Name = "IV3_DataObjectId")]
	public int Iv3DataObjectId { get; set; }


	[Metadata(Name = "AltText")]
	public string AltText { get; set; }


	[Metadata(Name = "Photographer")]
	public string Photographer { get; set; }

	[ResizeEffect(Width = 761, ResizeMode = ResizeMode.ScaleToFit)]
	public Thumbnail Thumbnail { get; set; }
}

In my view i display the thumbnail:

<img src="@Model.TopImage.Thumbnail.Url" alt="@Model.TopImage.AltText">

I have been experimenting with the CropEffectAttribute in my "image definition" but without success. It just causes an application error ImageVaultMediaProxy without any more details in the log.

Any ideas?

#85930

May 08, 2014 18:39

Vote:

As you've probably seen mediaReference.Effects has the cropping and resizing data of anything done in edit mode.

I'm not sure but I think you need to use the mediaReference and re-query with your own resizing dimensions. Here's some code that might help:

var format = new ImageFormat
                    {
                        CompressionQuality = (byte?)quality,
                        MediaFormatOutputType = MediaFormatOutputTypes.Jpeg
                    };

// These would be the .Effects prop of the MediaReference prop on your page
if (effects != null && effects.Any())
{
    format.Effects.AddRange(effects);
}

// Add template's "fixed" resizing
format.Effects.Add(new ResizeEffect(width, height, ResizeMode.ScaleToFill));

var mediaItemFilter = new MediaItemFilter { Id = new[] { mediaId } };

var q = new MediaItemQuery
{
                Filter = mediaItemFilter,

                // and supply the format that we want to populate
                Populate =
                    {
                        MediaFormats = { format }
                    }
};

var mediaService = client.CreateChannel<IMediaService>();
var mediaItem = mediaService.Find(q).FirstOrDefault();

#85969

Edited, May 09, 2014 13:15

Vote:

Yes, Johan is correct. MediaReference.Effect contains the effects added by the editor (ImageVault Crop/resize tool) and since we don't (yet) deliver any MVC display templates for MediaReference or List<MediaReference> these needs to be handled manually.

You can also use LINQ to load the media

Image myImage = client.Load<ImageVault.Common.Data.Image>(mediaReference.Id)
.ApplyEffects(mediaReference.Effects)
.Resize(100, 200, ResizeMode.ScaleToFit)
.FirstOrDefault();

#86017

May 12, 2014 10:28