Query to return ImageURL from Content type with Media Library Picker Field

Topics: Troubleshooting
Oct 2, 2013 at 5:46 PM
Hi,

I had a query in 1.51 that returned the Media Picker Field of a content type (CarouselImage for home page banner) using {Content.Fields.CarouselImage.Image}

Since 1.7 upgrade the migration changed the type to Media Library Picker Field - in the query I can no longer filter on Image:Url.

The filter options for my CarouselImage now only shows:

Image:Ids A formatted list of the ids, e.g., {1},{42}

How can I get back ImageURL or equivalent to show the images in the Carousel?

https://orchard.codeplex.com/workitem/19956
Oct 2, 2013 at 8:15 PM
Edited Nov 24, 2013 at 11:55 AM
I had the same case with my own CarouselSlide, now the field contains potentially several media items, I solved it by looping in the corresponding cshtml something similar to
@using Orchard.ContentManagement
@using Orchard.MediaLibrary.Fields
@using Orchard.Utility.Extensions;
@using Contrib.BSCarouselSlide.Models;
@using Orchard.DisplayManagement.Shapes;
@{
    var field       = (MediaLibraryPickerField)Model.ContentField;
    string name     = field.DisplayName;
    var contents    = field.MediaParts;
    var carousel    = ((IContent)Model.ContentPart).As<BSCarouselSlidePart>();
    bool HasText    = carousel.HasText;
    bool HasImage   = carousel.HasImage;
    var imageClass  = carousel.ImageClass;
    string span     = ( HasText ) ? "span7" : "span12"; 
    
}
@if (HasImage )
{
    foreach(var content in contents) {
        <div class="@span @imageClass media-library-picker-field media-library-picker-field-@name.HtmlClassify() bscentertxt" >
            <img src="@Url.Content(content.MediaUrl)" alt="@content.AlternateText" />
        </div>
    }
}
Hope it could help.
Oct 4, 2013 at 9:33 AM
Edited Oct 4, 2013 at 2:21 PM
thanks alot - the code in my folder Providers/Layouts/LayoutShapes.cs is below:
        foreach (var item in items)
        {
            // if first item
            if(i == 0)
                // <div class="item active">
                Output.Write(firstItemTag.ToString(TagRenderMode.StartTag));
            else
                //<div class="item">
                Output.Write(itemTag.ToString(TagRenderMode.StartTag));

            // display the current item -  Display method, which renders a shape - CAROUSEL IMAGE IN THIS CASE
            Output.Write(Display(item));

            // add caption - access property through current items ContentItem - shape name (CarouselImage) - property name - value
            var itemTitle = "Welcome to St Mary's Twickenham";
            var itemCaption = item.ContentItem.CarouselImage.Caption.Value;
            //Output.Write("<div class=\"carousel-caption\"><h4>" + Display(item.Caption.Value) + "</h4></div>");
            Output.Write("<div class=\"carousel-caption\"><h4>" + itemTitle + "</h4>");
            Output.Write("<p>" + itemCaption + "</p></div>");

            Output.Write(itemTag.ToString(TagRenderMode.EndTag));

            i++;
        }

I think its more in the Orchard query than the cshtml view - the content types are different so the image URL is not returned as cant be selected in the filter

Query preview shows:

Jul 27 2012 2:08 PM
Caption: TEXT GOES HERE
Priority: 1
Jul 27 2012 2:09 PM

SHOULD SHOW LIKE THIS:

Jul 27 2012 2:08 PM
Caption: TEXT GOES HERE
Priority: 1
Image: ~/Media/Default/carousel-images/banner-img-1.jpg

I can see the images in the CarouselImage in the admin content but not when querying them.

CarouselImage content type has ​

Image (Media Picker Field)
​Priority (Numeric Field)
Caption (Text Field)

Ive tried to add Media Library Picker Field to the content type of the CarouselImage but still no image source showing?

Do I need to override the View MediaLibraryPicker.cshtml?
Nov 7, 2013 at 10:09 PM
Im running into a very similar issue and was wondering if a solution was found?
Coordinator
Nov 11, 2013 at 6:52 AM
Yes, see above.
Feb 11 at 10:58 PM
I'm at a lost as to how to solve this said problem and i really really need a solution. Can someone offer an easy to follow fix?
Feb 13 at 1:41 PM
Edited Feb 13 at 1:42 PM
try this
  ImagePath = ((MediaLibraryPickerField)yourPart.Fields.Single(f => f.Name == "Picture")).MediaParts.Single().MediaUrl;
"Picture" is the name of your field
Feb 14 at 12:30 AM
Where would i add that code?