making an http request to get cropped images

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

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

Michael 5 posts 74 karma points

Jan 10, 2024 @ 13:20

Hi,

I am using the content delivery and media API and I want to be able to retrieve an image for which I have created a crop for.

screenshot

When I use the content delivery API to retrieve the document that contains the image and it's crops I get back the following structure:

"bannerImage": {
                            "url": "/media/4dlfie2y/file_example_jpg_500kb.jpg",
                            "focalPoint": {
                                "left": 0.4847119693670363,
                                "top": 0.11285275103135056
                            },
                            "crops": [
                                {
                                    "alias": "Banner image",
                                    "width": 650,
                                    "height": 400,
                                    "coordinates": null
                                },
                                {
                                    "alias": "Featured image",
                                    "width": 500,
                                    "height": 400,
                                    "coordinates": null
                                }
                            ]
                        }

How can I use this information to retrieve the cropped images from storage, potentially using the media API? I cannot find the docs for this, but I assume I must be able to make two API calls to get "Featured image" and "Banner image"

Thank you in advance.

Copy Link

Chester 3 posts 24 karma points

Jan 18, 2024 @ 14:20
1
Hi,

Umbraco would normally generate a crop URL like this (e.g. if using the GetCropUrl method in razor):

/media/4dlfie2y/fileexamplejpg_500kb.jpg?rxy=0.4980319840181882,0.0925965507120875&width=1200&height=750

I'm guessing in the content delivery API context we would need to build this URL manually by:
1. Getting the url e.g. /media/4dlfie2y/fileexamplejpg_500kb.jpg
2. Getting the desired crop (e.g. Banner image) and getting the XY from the coordinates property
Problem is the coordinates property is null - this is the same for me too.
Copy Link
Søren Kottal 713 posts 4571 karma points MVP 6x c-trib

Jan 20, 2024 @ 16:25

0

The coordinates is probably null, because no custom crop has been set. So it just falls back to the focal point with a width and height, like the URL you provided.

Try actually changing the crop, by clicking the thumbnail and then moving/zoom the picture. Then it should generate another url specific to the crop.

Copy Link
is working on a reply...

Please Sign in or register to post replies