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.

  • 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.

  • Søren Kottal 712 posts 4570 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.

Please Sign in or register to post replies

Write your reply to:

Draft