This project is read-only.

Theory question: best way to do image resizing with different display types?

Topics: Customizing Orchard, Troubleshooting
Aug 17, 2013 at 1:27 AM
Hello everyone!

Orchard 1.7 includes the image resizing feature, and I have a question about the proper use of it when displaying content items in different contexts using different display types.

For instance, let's say I have a product detail page, and I also want to display miniature versions on related pages linking back to the original page, kind of like Amazon's related items.

So let's suppose I have something like this:
<Match ContentType="Product">
    <Match DisplayType="Detail">
        <Place Parts_Title="Header:1" />
        <Place Fields_MediaLibraryPicker="ProductImage:1" />
    <Match DisplayType="Related">
        <Place Parts_Title="Header:1" />
        <Place Fields_MediaLibraryPicker="ProductImage:1" />
Now the bit that does actual resizing needs to have this in the .cshtml:
@Html.Image((string) Display.ResizeMediaUrl(Path: mediaUrl, Width: 120, Height: 120).ToString(), altText, null)
However, at the level of the .cshtml, it doesn't know what those widths and heights should be. Is there some way of getting what the current display type is (at which point I'd need to use special display types instead of Detail) or is there some other way of including parameters with the Something like this:
<Place Fields_MediaLibraryPicker="ProductImage:1;Width=75;Height=120" />
And how would I access those parameters from Fields.MediaLibraryPicker.cshtml?
Aug 17, 2013 at 6:38 AM
The display type is on the Metadata property of the shape.
Aug 17, 2013 at 6:27 PM
Thanks! So here's what I ended up with for my Fields.MediaLibraryPicker.cshtml:
    var field = (MediaLibraryPickerField) Model.ContentField;
    var name = field.DisplayName;
    var mediaUrl = (string) null;
    var altText = string.Empty;
    try {
        var contents = field.MediaParts.FirstOrDefault();
        if (contents != null) {
            mediaUrl = contents.MediaUrl;
            altText = contents.AlternateText;

            // Figure out resize width/height from the content type and display type
            var contentType = (string) Model.ContentItem.ContentType;
            var displayType = (string) Model.Metadata.DisplayType;
            var width = 0;
            var height = 0;
            switch (contentType) {
                case "ContentType1":
                    switch (displayType) {
                        case "Detail": width = 200; break;
                        case "Related": height = 220; break;
                case "ContentType2":
                    if (displayType == "Summary") {
                        width = 120;
                        height = 120;
            if (width != 0 || height != 0) {
                mediaUrl = Display.ResizeMediaUrl(Path: mediaUrl, Width: width, Height: height).ToString();
    catch (FormatException) {}  // fail silently with no image on legacy items where the URL is the storage, not the {imageId}

@if (!string.IsNullOrWhiteSpace(mediaUrl)) {
    <img class="media-library-picker-field media-library-picker-field-@name.HtmlClassify()" src="@mediaUrl" alt="@altText" />