Copied to clipboard

Flag this post as spam?

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


  • npack 42 posts 288 karma points
    Jan 26, 2024 @ 19:44
    npack
    0

    Resizing or Constraining Image Sizes (without ImageCropper)

    New to media.

    I'm building a block list element. When my users put it in into a block list on a page I want them to upload a photo.

    In my component template for my element I want to display the image they uploaded, but if they uploaded a huge image I would like it reduced to a predefined width.

    I realize I can't use imagecropper in a block list.

    I have defined some crops on a media type, but I'm not sure what those do.

    I have read that I can include "?width=200" and or "?mode=crop" in my Urls but those seem to do nothing.

    Can anybody steer me in a constructive direction?

    <img src="@(bannerAd.BannerAdImage?.Url())?mode=crop&width=200" />
    
  • npack 42 posts 288 karma points
    Jan 29, 2024 @ 17:27
    npack
    0

    So, it seems I can generate different Urls using GetCropUrl() but the urls all return the same image. Isn't the underlying engine ('Image Sharper?) supposed to respond to the presence of a 'width' querystring arg with a sized image instead? Do I need to turn this feature 'on' somehow through configuration or my startup code?

    i.e.

    https://mysite.com/media/afob1nb0/myimage.jpg?width=400

    gives me the same image as

    https://mysite.com/media/afob1nb0/myimage.jpg?width=200

    It doesn' seem to be an html encoding problem with my URLs. My property is of type 'Media Picker' (Media Picker 3) and returns a 'MediaWithCrops' object.

  • npack 42 posts 288 karma points
    Jan 29, 2024 @ 17:41
    npack
    0

    It looks like including the following in my Startup.cs class resolved the issue.

    app.UseImageSharp();
    
  • npack 42 posts 288 karma points
    Jan 29, 2024 @ 18:53
    npack
    0

    I'm also just realizing (I did say I'm new to media) that perhaps the images aren't resized when requested, but rather when they are uploaded. That means I need to define image crops beforehand instead then I can only include sizes on the querystring that match my defined crops -- instead of being able to change the width on the fly after the image is already uploaded.

    Is this correct? I just watched a video about slimsy and I got excited that perhaps it would resize images for me on the fly but at the end of the video they said it only uses predefined crops, not image-sharp directly. https://www.youtube.com/watch?v=fOVhJAspMBg

  • npack 42 posts 288 karma points
    Jan 29, 2024 @ 22:28
    npack
    100

    Nevermind, the dynamic sizing without defining crops is working now that another important piece is in place - Adding .Url() before .GetGetCropUrl() was important. This was covered in another post or two on this forum.

    someImage.Url().GetCropUrl(width: width, imageCropMode: ImageCropMode.Max)!

    This was pretty confusing if you ask me but I'm glad I got something working. Thanks for listening.

Please Sign in or register to post replies

Write your reply to:

Draft