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

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

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

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

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

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 

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

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" />
          }
     }
}

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

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

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

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

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

is working on a reply...