Is there an easier way to save the full URL of an image in your page?

Support
1

Hi,

I have a schema with a bunch of fields. One of those fields is an image/Asset. When I create a new page from that schema, I select an image, save the page, and the page data gets written to mongo in JSON:

		"image": {
                    "iv": [
                        "54fa22f2-768f-4192-b4c9-473b1fec8122"
                    ]
                }

Note that it’s just the GUID, and not the full image URL.

What I would like is that when I save the page, the full URL of the image would get saved and the JSON would look like this:

	"image": {
                "iv": [
                    "https://mysquidex.domain.com/api/assets/54fa22f2-768f-4192-b4c9-473b1fec8122"
                ]
            }

Then on the front-end I would not need to do any extra work, I can just fetch that value like I would with any other regular string field.

I could solve this by:

  1. Adding a new imagefullurl field of type string to my schema.
  2. Create a new page of that schema, and select an image (image field).
  3. In Google Chrome copy the image URL from inside the Squidex UI for the page your editing: https://mysquidex.domain.com/api/assets/54fa22f2-768f-4192-b4c9-473b1fec8122?q=1332b423-ab76-c237-d71c-3b3e4800eb0a
  4. Remove the ?q=1332b423-ab76-c237-d71c-3b3e4800eb0a part.
  5. Copy and paste https://mysquidex.domain.com/api/assets/54fa22f2-768f-4192-b4c9-473b1fec8122 in the new imagefullurl field.
  6. Save the page.

You can now create your img tags like this (ASP.NET Core):

<img src="@Model.Data.ImageFullUrl">

My question is: Is there an easier/smarter/faster way?

2

Hi,

there are actually several ways to solve this problem at the moment:

  1. Create a script to fill the field automatically.

    • Create a disabled tag or string field
    • Hide the original asset field from the API.
    • Populate the disabled field from the script based on the asset field.

  2. Use GraphQL, I think there is an Url field for that.

  3. Use the Client library in your UI: https://github.com/Squidex/squidex-samples/blob/master/csharp/Sample.Profile/Sample.Profile/Views/Home/Index.cshtml#L109

  4. I can create a http header or other kind of parameter to convert the field in the query service (NOT IMPLEMENTED YET)

3

Hi, the next version will contain an header for that:

  • X-AssetFields: * // Convert all asset fields
  • X-AssetFields: avatar // Convert avatar field only.
4

Sounds interesting, can you tell us a little bit about how it works?

5

It will basically convert all ids in all fields that match to the specified names to the corresponding urls to the asset contents.

6

Okay. So from the SquidexClients perspective I just call my GET endpoint with that extra X-AssetFields header and the JSON returned will have the full URLs to my assets?

7

Exactly. Have to add it to the client library as well, good point :wink:

8

Was this feature dropped? Can’t seem to get it to work.

Our use case is that we’d like to use the fileName field as the alt tags for images (using the REST client). This feature would be pretty handy to avoid doing a fetch for every image we use on the site.

9

I have even forgotten that this feature is there, but if it works it would only use the GUID.

I will check it out.

10

Hi, the header is now called X-Resolve-Urls. I don’t know why and when it has been changed.

11

Aha alright, thanks! :blush:

1 Like