That's good, but if you try to open the URL, you will get the cropped image with a black background color, and there's no way to change this color once you got the image, because the black background is applied during the cropping procedure. Here an image of the black area:
Is there a way to change this crop background color?
I tried to take a look in the "Umbraco" folder to see if there are some js file that could do the job, but there's a lot of stuff there, and it's difficult to understand how to change this color.
You can pass the background colour into the querystring that triggers the cropping, via bgcolor= and then the hex of the colour without the # or name of the colour eg:
Thank you Marc for your answer, that solved my issue, and thank you for all the references to each guide.
I think that it could be useful to add a link to the list of the available Image Processing methods (query string parameters) in the Umbraco's "Image Cropper" guide, adding a paragraph dedicated to the "GetCropUrl" parameters. Or otherwise adding just a list of the all accepted query string parameters.
Do you think that could be useful? How can I help to add it?
Yes - that's a great idea for updating the documentation - as how else would you know?
How about adding a paragraph on that page 'here'
just above the Upload Property Replacement section that has a heading something like
Going Further With The Image Cropper
That says something like Umbraco's Image Cropping functionality is based on the opensource library ImageProcessor that has lots of additional options for transforming your images via querystring parameters. Link to the documentation of Image Processor, or list some examples?
The documentation itself is 'open source', so if you visit the page in the documentation and click on Edit Page
Then it will take you to github, and you can edit the page, and then create a pull request with your suggested changes, the documentation curation team will review and once it's accepted, it will appear in the docs!
AND you'll get a shiny [C-Trib] badge added to your Our Umbraco profile on here to mark you out as an Umbraco contributor (you know like Pokemon)...
... but more importantly future developers will not have to ponder over the black background and will have more time to build something cool that we can all use!
Umbraco.MediaPicker GetCropUrl method: change the background color behind the cropped image
Hi,
I'm using the Umbraco.MediaPicker crop function, and it works very well, it also allows me to define a focal point for the cropped image, and also to obtain the URL using the "GetCropUrl" method, the URL looks like this: https://localhost:44334/media/q5rhliqv/traditional-dutch-win.jpg?crop=0.10592105263157896,0.0061107012631250292,0.528981977613254,0&cropmode=percentage&width=690&height=719&rnd=132652178928630000
That's good, but if you try to open the URL, you will get the cropped image with a black background color, and there's no way to change this color once you got the image, because the black background is applied during the cropping procedure. Here an image of the black area:
Is there a way to change this crop background color?
I tried to take a look in the "Umbraco" folder to see if there are some js file that could do the job, but there's a lot of stuff there, and it's difficult to understand how to change this color.
Could you help me?
Thank you,
Marco
HI Marco
You can pass the background colour into the querystring that triggers the cropping, via bgcolor= and then the hex of the colour without the # or name of the colour eg:
https://localhost:44334/media/q5rhliqv/traditional-dutch-win.jpg?crop=0.10592105263157896,0.0061107012631250292,0.528981977613254,0&cropmode=percentage&width=690&height=719&bgcolor=ffffff
would make it white!
Umbraco uses image processor under the hood, where you can find this and other settings:
https://imageprocessor.org/imageprocessor-web/imageprocessingmodule/backgroundcolor/
When you call GetCropUrl, think you can pass it in as 'further options':
https://github.com/umbraco/Umbraco-CMS/blob/d428a4543f33bb7094cf7db5f6b6fdc2d1de3063/src/Umbraco.Web/UrlHelperRenderExtensions.cs#L199
regards
marc
Thank you Marc for your answer, that solved my issue, and thank you for all the references to each guide.
I think that it could be useful to add a link to the list of the available Image Processing methods (query string parameters) in the Umbraco's "Image Cropper" guide, adding a paragraph dedicated to the "GetCropUrl" parameters. Or otherwise adding just a list of the all accepted query string parameters.
Do you think that could be useful? How can I help to add it?
Thank you,
Marco
Hi Marco
Yey! glad it worked for you.
Yes - that's a great idea for updating the documentation - as how else would you know?
How about adding a paragraph on that page 'here'
just above the Upload Property Replacement section that has a heading something like
Going Further With The Image Cropper
That says something like Umbraco's Image Cropping functionality is based on the opensource library ImageProcessor that has lots of additional options for transforming your images via querystring parameters. Link to the documentation of Image Processor, or list some examples?
The documentation itself is 'open source', so if you visit the page in the documentation and click on Edit Page
Then it will take you to github, and you can edit the page, and then create a pull request with your suggested changes, the documentation curation team will review and once it's accepted, it will appear in the docs!
AND you'll get a shiny [C-Trib] badge added to your Our Umbraco profile on here to mark you out as an Umbraco contributor (you know like Pokemon)...
... but more importantly future developers will not have to ponder over the black background and will have more time to build something cool that we can all use!
regards
Marc
is working on a reply...