Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Wolfie 25 posts 141 karma points
    Feb 03, 2017 @ 19:36
    Wolfie
    0

    Portfolio - Getting it to display un-cropped image?

    Let me say, thank you for the great starter theme. I am new to Umbraco and this was my first theme I found that seemed to include nearly all the elements I have been looking for in a nicely done package.

    I was trying out the Portfolio section for the first time. I have some images that are horizontal and some that are vertical. I can't for the life of me get it to NOT crop them on the image detail page. On horizontal format images, it seems to be working fine as the height shrinks based on the width and height is smaller than width. However, on vertical images, it scales based on width and the top/bottom are cut off (depending on where the focus point is of course).

    I am perfectly fine with cropping on the list view. But I can't find a setting anywhere that appears to tell it to crop or resize on the detail page.

    Due to my newness, I am quite sure I am simply missing some setting somewhere.

  • Sotiris Filippidis 286 posts 1501 karma points
    Feb 04, 2017 @ 10:45
    Sotiris Filippidis
    1

    Thank you for your kind words, Wolfie.

    I'll have to admit the theme is far from perfect, and although I tried to introduce as many customization options as possible, everybody's use case is different and sometimes issues like yours (which is absolutely justified) come up.

    Unfortunately I haven't got an option in place for disabling cropping of the image in portfolio detail pages, and this was done on purpose. since I needed to make sure that all portfolio pages will be displayed in a uniform manner. If you need to disable cropping, though, you can do the following:

    Open /views/pagePortfolioItem.cshtml in an editor

    Find this line (near the bottom, inside the @ShowTopImageSingle helper):

    string fullImageUrl = currPage.GetPickerMediaByAlias(Psn_pagePortfolioItem.imageGallery).First().GetCropUrl(width: 1150, height: 766, upScale: true);
    

    And drop the "height" parameter so that the image is only resized in width, ensuring that it'll cover the full width of the area assigned to it, with variable height:

    string fullImageUrl = currPage.GetPickerMediaByAlias(Psn_pagePortfolioItem.imageGallery).First().GetCropUrl(width: 1150, upScale: true);
    

    This will work when you have a single image in your portfolio detail page (as opposed to multiple images in a slider).

    I think this will do the job. Please let me know if it worked.

  • Wolfie 25 posts 141 karma points
    Feb 05, 2017 @ 21:22
    Wolfie
    0

    The tweak does work. Not quite perfect but, hey , its a step in the right direction.

    For a portfolio section, I would presume the author would not want the site cropping the images. However he would likely expect it to scale them to fit within the page boundaries. So thats why I presumed there was a setting somewhere that I was overlooking.

    Not being familiar with the object structure available (yet), is there a resize version of the .GetCropUrl(), ie .GetResizeUrl() and if so, whats it parameters?

    What I am looking for is a way to present the images so they are not cropped but also are not insanely big. I would like to specify a resize if the height OR width exceed 1024 (or some other arbitrary size).

    So if the image height exceeded 1024, then it would resize it down to 1024 by X keeping the original aspect ratio. If the image width exceeded 1024, it would resize it to X by 1024, again maintaining the original aspect ratio.

  • Sotiris Filippidis 286 posts 1501 karma points
    Feb 07, 2017 @ 09:17
    Sotiris Filippidis
    0

    I should probably introduce a setting asking editors whether they want images to be cropped or not, and adjust how the image is presented accordingly.

    What you are asking is essentially to resize the image within a given "box" with max height-width. This is possible with GetCropUrl() if you change the call to the following:

    string fullImageUrl = currPage.GetPickerMediaByAlias(Psn_pagePortfolioItem.imageGallery).First().GetCropUrl(width: 1150, height: 766, imageCropMode: ImageCropMode.Pad, furtherOptions: "&bgcolor=fff", upScale: true);
    

    The setting I added was ImageCropMode, and I gave it the value "Pad" instead of the default (which is "Crop"). This will prevent cropping the image and instead it will resize it within a box of 1150x766 pixels, padding the remaining area with the color specified in the "furtherOptions" parameter. I set it to white, default is black, but you can set it to any color you like.

    In order for this to work, you must add the following at the start of the template, under the other @using statements that are already there:

    @using Umbraco.Web.Models;
    

    Here's a sample of how it looks with padding instead of cropping, with white and black padding:

    With white padding

    With black padding

    Please have in mind that by changing it in such a way it will cause ALL your images to be padded so you may see horizontal or vertical padding even in horizontal images. If you need only vertical images to behave this way, there's more code you should write there, please let me know.

  • Sotiris Filippidis 286 posts 1501 karma points
    Feb 07, 2017 @ 10:36
    Sotiris Filippidis
    0

    Also, FYI, this will go into the next version of the Starter Kit:

    enter image description here

  • Wolfie 25 posts 141 karma points
    Feb 07, 2017 @ 16:11
    Wolfie
    0

    Thank you for helping. Its greatly appreciated.

    I am trying to learn my way through this.

    I have searched the Umbraco source for "GetPickerMediaByAlias" and I can find no reference to this object anywhere in the stock code. Is this a new object in your starter? And if so, is there source available?

    I found a lot of references to "GetCropUrl" in the source and I am looking through them now. I also found the definition for "ImageCropMode" it appears to contain eunums for Crop, Max, Stretch, Pad, BoxPad, and Min.

    The documentation here yields no description as to the various modes; https://our.umbraco.org/apidocs/csharp/api/Umbraco.Web.Models.ImageCropMode.html#UmbracoWebModelsImageCropModeCrop

    Is there some reference material describing this enum and what the various modes do?

    Also, is there a documentation page on GetCropUrl? Searching the same documentation url for this string yields no results.

    What I would like to do is retrieve the height and width and then make some decisions in the view based on those figures.

            //Psudo code, this WON'T work!
                unknownObjectType MedaImage = currPage.GetPickerMediaByAlias(Psn_pagePortfolioItem.imageGallery).First();
                int MediaWidth = MedaImage.width;
                int MediaHeight = MediaImage.height;
                decimal MediaRatio = MediaWidth / MediaHeight;
                if (MediRatio > 0) {
                      // do something for horizontal images
               } else {
                      // do something for vertical images
               }
            // etc
    
  • Sotiris Filippidis 286 posts 1501 karma points
    Feb 07, 2017 @ 16:24
    Sotiris Filippidis
    1

    GetPickerMediaByAlias is not an Umbraco extension - it's part of the DotSee.UmbracoExtensions library and unfortunately it's one of the few pieces of code I'm not giving the source for (not that it's a state secret or something, it's just a reusable library and it's more convenient for me to include it in DLL form).

    For ImageCropMode, you'll have to see the official ImageCropper documentation (it's the component Umbraco's image cropping is based on) here: http://imageprocessor.org/imageprocessor-web/imageprocessingmodule/resize/

    For your pseudo code, I'll try and give you a working sample a bit later.

  • Sotiris Filippidis 286 posts 1501 karma points
    Feb 07, 2017 @ 16:29
    Sotiris Filippidis
    0

    If you are curious, though, here's the source for GetPickerMediaByAlias. It includes a call to another helper function that creates a cached UmbracoHelper, source taken from here: https://github.com/rhythmagency/rhythm.umbraco.extensions/blob/56a328f8c84d4f155d7201494be62ecfb0aaf32e/trunk/Rhythm.Extensions/Rhythm.Extensions/Helpers/ContentHelper.cs

       /// <summary>
            /// Get a typed media Ienumerable from a media picker
            /// </summary>
            /// <param name="item">The item that contains the picker</param>
            /// <param name="pickerAlias">The alias of the property containing the picker</param>
            /// <param name="recurse">If true, recurse to parent nodes</param>
            /// <returns></returns>
            public static IEnumerable<IPublishedContent> GetPickerMediaByAlias(this IPublishedContent item, string pickerAlias, bool recurse = false)
            {
                if (!item.HasValue(pickerAlias))
                {
                    if (recurse && item.Level > 1)
                    {
                        foreach (var it in GetPickerMediaByAlias(item.Parent, pickerAlias, recurse))
                        {
                            if (it != null) { yield return it; }
                        }
                    }
                    else
                    {
                        yield break;
                    }
                }
    
                //Get a request-cached UmbracoHelper
                UmbracoHelper u = ContentHelper.GetHelper();
    
                foreach (string imageId in item.GetPropertyValue<string>(pickerAlias, "").Split(','))
                {
                    var it = u.TypedMedia(imageId);
    
                    if (it != null) { yield return it; }
                }
            }
    
  • Wolfie 25 posts 141 karma points
    Feb 07, 2017 @ 16:50
    Wolfie
    0

    Ahh! Thats the ticket! Now we are cooking with gas.

    Like I said, I am trying to understand these functions and having object references is important to that goal.

  • Wolfie 25 posts 141 karma points
    Feb 07, 2017 @ 16:54
    Wolfie
    0

    Ok so GetPickerMediaByAlias().First() returns an of IPublishedContent then? And thats defined in IPublishedContent .cs, correct?

  • Sotiris Filippidis 286 posts 1501 karma points
    Feb 07, 2017 @ 16:55
    Sotiris Filippidis
    0

    IPublishedContent is an Umbraco interface. I don't recall where it is defined, but probably in a similarly named file.

Please Sign in or register to post replies

Write your reply to:

Draft