Copied to clipboard

Flag this post as spam?

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


  • Morten Kjems 2 posts 72 karma points
    Nov 13, 2019 @ 11:56
    Morten Kjems
    0

    How to insert an image that with fixed witdh, but any height?

    We have an umbraco 8 setup and are using the wonderful image cropper. That allows us to have images with fixed width and height.

    But when creating articles we need to use images with all kinds of aspect ratios.

    E.g a narrow image:

    Narrow

    Or a very tall image:

    enter image description here

    None of these match any of our predefined crops.

    We still want to be able to define the widt, but the height should be flexible.

    How do we achieve that?

    Thanks.

  • Kevin Jump 1867 posts 11859 karma points MVP 4x c-trib
    Nov 13, 2019 @ 12:58
    Kevin Jump
    0

    Hi Morten,

    it depends a bit on if you also want to crop or resize.

    you can add the width / height to the URL of the image, and image processor will resize maintaing the ratio.

    e.g (on the image you uploaded) https://our.umbraco.com/media/upload/7eea9fe5-6727-4bc5-9e4f-672c9b832dee/400x100.jpg?width=200

    cropping is more like what Umbraco does built in, and while you don't both width or height it doesn't do much beyond resize without both.

    e.g https://our.umbraco.com/media/upload/7eea9fe5-6727-4bc5-9e4f-672c9b832dee/400x100.jpg?mode=crop&height=110

  • Morten Kjems 2 posts 72 karma points
    Nov 13, 2019 @ 13:28
    Morten Kjems
    0

    Thanks Kevin.

    Great to see that we can set the width with ?width=xxx

    I can also see that the file is compressed on the server as this 300px wide image is 4.89 KB.

    https://our.umbraco.com/media/upload/7eea9fe5-6727-4bc5-9e4f-672c9b832dee/400x100.jpg?width=300

    And this 1200px wide image is 28.6 KB

    https://our.umbraco.com/media/upload/7eea9fe5-6727-4bc5-9e4f-672c9b832dee/400x100.jpg?width=1200

    But how do we add this as an option i the backend?

    If i define a crop with a width an no height I can not save it.

    enter image description here

    And from the image option I have to chose a crop, no "Free form" is available?

    So I do i make the option available to the user?

  • Kevin Jump 1867 posts 11859 karma points MVP 4x c-trib
    Nov 13, 2019 @ 13:37
    Kevin Jump
    0

    Hi Morton,

    I don't think you can do that via the back office :( , They would have to upload the image to the shape they want - and you then define the width in the code.

  • Thomas 212 posts 480 karma points c-trib
    Nov 13, 2019 @ 22:23
    Thomas
    1

    What about

    <img src=”@Img.getCropUrl(’width: 820, imageCropMode: ImageCropMode.Max’)” />
    

    ??

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies