Search code examples
imagecontent-management-systemorchardcmsblogsblog-post

Orchard Blog Post Media Picker Image Resized


I've spent about 3 hrs last night trying to determine why the image that I upload via the Media Library Picker field keeps resizing to 200x200 when it is displayed in a blog post.

Its not resized after upload and if I insert that same image into the blog post it retains the original size.

I haven't done anything special, I just edited the Blog Post content definition by adding the Media Library Picker field. When I create new blog post, I click the Add button to select the media and then publish the post.

See sample screencap: https://i.sstatic.net/wI1YU.jpg

Thanks for the input!


Solution

  • By default, when you are displaying a media library picker field, it gets rendered by Modules/Orchard.MediaLibrary/Views/FieldsMediaLibraryPicker.cshtml. That template loops over the media parts in the field, and calls Display(BuildDisplay(content, "Summary")). That builds the shapes for each of the media content items pointed to by the field. One of these shapes is going to be a Parts_Image shape in your case. Notice that in the BuildDisplay call, a "Summary" display type was passed in. That means that the Parts/Image.Summary.cshtml template is going to be used to render each image. That template has the following code to render the image:

    <img width="200" height="200" alt="@mediaPart.AlternateText"
      src="@Display.ResizeMediaUrl(
           Width: 200, Height: 200, Mode: "crop",
           Alignment: "middlecenter", Path: mediaPart.MediaUrl)" />
    

    This is what resizes the image to a 200x200 cropped thumbnail.

    If that's not what you want, you'll have to override one of those templates. I'd recommend creating an alternate for FieldsMediaLibraryPicker.cshtml for the specific filed name that you've been using, and in the code, change the display type from "Summary" to "Detail". This way, the Image.cshtml will get used for each image, and that will not do any resizing.