Sign in Register
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
    Michael
    0

    Making an HTTP request to get cropped images

    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
    Chester
    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
    Søren Kottal
    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

  • 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