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.
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?
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.
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
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.
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?
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?
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.
It looks like including the following in my Startup.cs class resolved the issue.
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
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.
is working on a reply...
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.