Copied to clipboard

Flag this post as spam?

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


  • Bjarne Fyrstenborg 1160 posts 3356 karma points MVP 4x c-trib
    Aug 22, 2014 @ 20:12
    Bjarne Fyrstenborg
    0

    Black margin/padding in image

    Hi..

    I am using Slimsy 1.1.1 and Umbraco 7.1.5..

    I have an image uploaded in a upload field with the size 600 x 350 px.

    However when using GetResponsiveImageUrl() method I get some black padding/margin on left/right or top/bottom depending on the specified image size:

    var image = item.GetResponsiveImageUrl(width: 350, height: 220, propertyAlias: "caseThumb");

    In my case the generated image get an size of 480 x 302 px in src and the data-src with a width of 350px:

    <img data-src="/media/1024/lightair.jpg?mode=pad&amp;quality=90&amp;width=350&amp;heightratio=0.6285714285714285714285714286&amp;upscale=false&amp;format=jpg&amp;slimmage=true&amp;rnd=130532097490000000" alt="Lightair" data-slimmage="true" src="/media/1024/lightair.jpg?mode=pad&amp;quality=90&amp;width=480&amp;heightratio=0.6285714285714285714285714286&amp;upscale=false&amp;format=jpg&amp;slimmage=true&amp;rnd=130532097490000000" data-pixel-width="480">

    One thing I noticed is if there is used a querystring parameter called heightratio or if it's a bug? Should it be height and ratio?

    E.g. if I change this url (480 x 302px):

    /media/1024/lightair.jpg?mode=pad&quality=90&width=480&heightratio=0.6285714285714285714285714286&upscale=false&format=jpg&slimmage=true&rnd=130532097490000000

    to this:

    /media/1024/lightair.jpg?mode=pad&quality=90&width=480&ratio=0.6285714285714285714285714286&upscale=false&format=jpg&slimmage=true&rnd=130532097490000000

    I get an image size of 480 x 280 px without the black padding/margin.

    /Bjarne

  • Bjarne Fyrstenborg 1160 posts 3356 karma points MVP 4x c-trib
    Aug 22, 2014 @ 21:23
    Bjarne Fyrstenborg
    0

    Okay, I think it's right with heightratio...

    One way to solve it is to define the width og height with same ratio as the original image, so when the original size is 600 x 350 px I can use width: 350 and height: 204 in GetResponsiveImageUrl() method, but that wouldn't work if I upload images with different ratios.

    /Bjarne

  • Jeavon Leopold 3005 posts 13196 karma points MVP 7x admin c-trib
    Aug 23, 2014 @ 13:24
    Jeavon Leopold
    0

    Hi Bjarne,

    Yes this was a bug in ImageProcessor.Web that was fixed in the latest version v3.3.0 which is included Umbraco v7.1.5, so I would recommend you upgrade to v7.1.5 (for this any many other bugs!)

    Jeavon

  • Bjarne Fyrstenborg 1160 posts 3356 karma points MVP 4x c-trib
    Aug 23, 2014 @ 14:07
    Bjarne Fyrstenborg
    0

    Hi Jeavon

    Hmm, that's strange..

    I have already upgraded to 7.1.5 via NuGet and the ImageProcessor is version 1.9.5.0 and ImageProcessor.Web is version 3.3.0 ..

     

    The original image uploaded (600 x 350 px):

    This is what I see with this code line:

    <img src="@item.GetResponsiveImageUrl(width: 350, height: 220, propertyAlias: "caseThumb")" alt="@item.Name" />

    (480 x 302 px)

    I can change it to 204 in height as the aspect ratio then fits with the original image, but then you would have to upload the same image sizes for these images..

    <img src="@item.GetResponsiveImageUrl(width: 350, height: 204, propertyAlias: "caseThumb")" alt="@item.Name" />

    (480 x 280 px)

     /Bjarne

  • Bjarne Fyrstenborg 1160 posts 3356 karma points MVP 4x c-trib
    Aug 23, 2014 @ 14:55
    Bjarne Fyrstenborg
    0

    Perhaps you can do a test with an upload property where the uploaded image has a size of 600 x 350 px (or just use the image in my previously post) and then use GetResponsiveImageUrl() method with the specified sizes.

    /Bjarne

  • Jeavon Leopold 3005 posts 13196 karma points MVP 7x admin c-trib
    Aug 23, 2014 @ 14:58
    Jeavon Leopold
    100

    Ah wait, it's an upload property? Could you change it to being a cropper with no predefined crops?

  • Jeavon Leopold 3005 posts 13196 karma points MVP 7x admin c-trib
    Aug 23, 2014 @ 15:00
    Jeavon Leopold
    0

    Once changed from a upload to a cropper you will need to resave the image to populate the crop data.

  • Bjarne Fyrstenborg 1160 posts 3356 karma points MVP 4x c-trib
    Aug 23, 2014 @ 15:10
    Bjarne Fyrstenborg
    0

    Ahh, yes that looks better now.. a width of 350 and height of 204 gives me a scaled version of the original version where the aspect ratio match the original (600 x 350) .. and when I specify 220 as height it has just cropped the image a bit, but no black margin/padding :)

    Thanks,
    Bjarne 

  • Jeavon Leopold 3005 posts 13196 karma points MVP 7x admin c-trib
    Aug 23, 2014 @ 15:14
    Jeavon Leopold
    0

    That's great and exactly what it's supposed to do :-)

  • Bjarne Fyrstenborg 1160 posts 3356 karma points MVP 4x c-trib
    Aug 24, 2014 @ 22:46
    Bjarne Fyrstenborg
    0

    Hi Jeavon

    I'm wondering how I can use Slimsy with multiple media, when using upload, media picker (or multiple media picker) as datatype?

    The upload I could replace with Image Cropper without predefined crops.. but I the Image Cropper only have one image uploaded.. so with media picker I pick multiple media items (which as default) use upload property.

    So when I change this:

    @if (Model.Content.HasValue("detailedImages"))
    {
         var detailedImagesList = Model.Content.GetPropertyValue<string>("detailedImages").Split(new string[] { "," }, StringSplitOptions.RemoveEmptyEntries).Select(int.Parse);
         var detailedImagesCollection = Umbraco.TypedMedia(detailedImagesList).Where(x => x != null);
         foreach (var detailImage in detailedImagesCollection)
         {
              if(!string.IsNullOrEmpty(detailImage.Url))
              {
                  <img src="@detailImage.Url" alt="" class="img-responsive case-item" />
              }
         }
    }

    to this:

    @if (Model.Content.HasValue("detailedImages"))
    {
         var detailedImagesList = Model.Content.GetPropertyValue<string>("detailedImages").Split(new string[] { "," }, StringSplitOptions.RemoveEmptyEntries).Select(int.Parse);
         var detailedImagesCollection = Umbraco.TypedMedia(detailedImagesList).Where(x => x != null);
         foreach (var detailImage in detailedImagesCollection)
         {
              if(!string.IsNullOrEmpty(detailImage.Url))
              {
                  var image = detailImage.GetResponsiveImageUrl(width: 350, height: 204); // detailImage.Url
          <img src="@image" alt="" class="img-responsive case-item" />
              }
         }
    }
    which return some black margin/padding.
    Is it ImageProcessor.Web which add the black margin/padding and is it possible the change it to e.g. white?
    E.g. I have this image:
     
    when using GetResponsiveImageUrl() method:
     
    or I can change width: 555 and height: 436 in GetResponsiveImageUrl() method and it will look like the first one, because the aspect ratio is the same as the original image..
    Have you tried an example with mulitple medias? e.g. when you want a like of images one in some kind of slider?
    /Bjarne
  • Jeavon Leopold 3005 posts 13196 karma points MVP 7x admin c-trib
    Aug 25, 2014 @ 14:09
    Jeavon Leopold
    0

    Hi Bjarne,

    You can use the multiple media picker no problem with Slimsy. Just make sure that you change the umbracoFile property on the default "Image" media type from Upload to a generic Cropper without any predefined crops, this gives every image a focal point which is what Slimsy needs.

    Slimsy is designed to work with the Image Cropper only as it relies on the focal point. With a Upload type, the GetCropUrl method that Slimsy is wrapping use a fallback string extension which by default uses mode=pad for ImageProcessor as it doesn't know how to crop as their isn't a focal point.

    Have you watched my uHangout where I talk about doing this (12:30 mins in)?

    Jeavon

  • Bjarne Fyrstenborg 1160 posts 3356 karma points MVP 4x c-trib
    Aug 25, 2014 @ 23:52
    Bjarne Fyrstenborg
    0

    Hi Jeavon

    Okay, I have changes the datatype on Image media type from Upload to Image Cropper .. some places I neeed a fixed size (crop), but here I just want to display the full image in a scaled version..

    So I pass the values of umbracoWidth and umbracoHeight as parameters for the GetResponsiveImageUrl() method:

    @if (Model.Content.HasValue("detailedImages"))
    {
         var detailedImagesList = Model.Content.GetPropertyValue<string>("detailedImages").Split(new string[] { "," }, StringSplitOptions.RemoveEmptyEntries).Select(int.Parse);
         var detailedImagesCollection = Umbraco.TypedMedia(detailedImagesList).Where(x => x != null);
         foreach (var detailImage in detailedImagesCollection)
         {
              if(!string.IsNullOrEmpty(detailImage.Url))
              {
                   int umbWidth = (int)detailImage.GetPropertyValue("umbracoWidth");
                   int umbHeight = (int)detailImage.GetPropertyValue("umbracoHeight");
    
                   // Slimsy requires the upload datatype to be Image Cropper (which use a focal point)
                   var image = detailImage.GetResponsiveImageUrl(width: umbWidth, height: umbHeight); // detailImage.Url
                   <img src="@image" alt="" class="img-responsive case-item" />
              }
         }
    }

    I have watched some of the videos, but might will watch the full video when I have some more time.. but basicially this is what I want.. ooh wait the width of the image is fixed to 555 px and the height should be flexible.. so I can just use width: 555 and height: 0  .. right? it seems to give me the same result in both cases, just less code in last case.

    /Bjarne

  • Jeavon Leopold 3005 posts 13196 karma points MVP 7x admin c-trib
    Aug 26, 2014 @ 12:28
    Jeavon Leopold
    0

    Hi Bjarne,

    Sure you can do that but I'm not quite sure why you would? The idea is that it doesn't matter what size images your content editor uploads, the cropper will crop it intelligently around the focal point if the uploaded image ratio doesn't quite work. Generally you would just specify your desired width and height into your Razor to match your html layout and of course ensuring that real sizing is done by CSS.

    Make sense?

    Jeavon

  • Bjarne Fyrstenborg 1160 posts 3356 karma points MVP 4x c-trib
    Aug 26, 2014 @ 12:41
    Bjarne Fyrstenborg
    0

    Yes, I also specify the crop size on other pages. But actually the last example here is on a project page where there is an image to the left with a fixed width and some description and other project details on the right. The height of the images for each project hasn't a fixed height - so to use GetResponsiveImageUrl() method I need to pass a width and a height. I know the width and the height is flexible, so it's just set to 0.

    /Bjarne

  • Jeavon Leopold 3005 posts 13196 karma points MVP 7x admin c-trib
    Aug 26, 2014 @ 12:44
    Jeavon Leopold
    0

    Yes, that's correct, height 0 means flexible height (actually no height parameter is added to the ImageProcessor url)

Please Sign in or register to post replies

Write your reply to:

Draft