Copying asset to component gives CDN url

[Noaber]

We get a story from using the Management API and copy that over to a new story with altered data and images.
When copying an asset using the Asset API into a Component the asset is saved using the CDN url.

This goes wrong $nestedImage->setAsset('image', $asset);
This works $nestedImage->setData($galleryItem);

---

Expected Behavior

I expect the Storyblok asset url (a.storyblok.com) instead of the CDN url

Current Behavior

I get the CDN url

Steps to Reproduce / Code

if ($block['component'] === 'standaard_content_gallery') {
                $offSetGallerySection[] = $index;

                // loop over every gallery item
                foreach ($block['gallery_items'] as $galleryItem) {
                    // just copy from the template
                    if ($galleryItem['component'] === 'nested_image') {
                        $nestedImage = new StoryComponent('nested_image');
                        $nestedImage->setData($galleryItem);

                        $galleryImages['nested_image'] = $nestedImage;
                    }

                    // get image based on root category, sub category and company
                    if ($galleryItem['component'] === 'nested_image_categories_with_sub_company') {
                        $company = $this->vacancy->details()->where('name', 'relation')->first()?->value;

                        $asset = $this->assetService
                            ->getAssetsByTags([strtolower($this->vacancy->root_category->name), strtolower($this->vacancy->category->name), strtolower($company)])
                            ->randomize();

                        $nestedImage = new StoryComponent('nested_image');
                        if ($asset !== null) {
                            $nestedImage->setAsset('image', $asset);

                            $this->log['vacancy']['assets']['gallery']['nested_image_categories_with_sub_company'] = $nestedImage->toArray();
                        }
                        $galleryImages['nested_image_categories_with_sub_company'] = $nestedImage;
                    }
                }
            }

In above snippet we are loop over a component and try to add assets based on the gallery item component type.
So for $galleryItem['component'] === 'nested_image' we just copy the asset from the template (this is a Story we get before this loop). This asset is shown in the blade template (we use Laravel)

But for $galleryItem['component'] === 'nested_image_categories_with_sub_company' we get an asset based on tags from the Asset API. The randomize() function returns an specific (but random :) asset.
Now we try to set the asset using setAsset. This works in the Storyblok app. We see the image, however in the blade file we don't get the a.storyblok.com url, but the CDN url.

below the Asset API call. The randomize() function gets just 1 Asset of the $this->assets array

public function getAssetsByTags(array $tags): static
    {
        $this->assetApi = new AssetApi($this->client, $this->spaceId);

        $params = [
            'withTags' => implode(',', $tags),
        ];

        // If folder is set, add it
        if ($this->folder !== null) {
            $params['inFolder'] = $this->folder;
        }

        $this->assets = $this->assetApi->page(
            new AssetsParams(...$params),
        )->data();

        $this->tags = $tags;

        return $this;
    }

Hopefully above "explanation" makes sense :)

[roberto-butti]

Hi @Noaber Thanks for raising this question! We're glad to hear you're using the PHP Management Client.

I have a couple of questions to understand the scenario better.

You mentioned a story: “we just copy the asset from the template (this is a story we got before this loop)”.
Is this story retrieved via the Content Delivery API? (the url provided by the content delivery api is differnt from the management api)

Then you said: “however, in the blade file we don't get the a.storyblok.com URL, but the CDN URL.”
My question is: when retrieving data for the Blade file, are you querying the Content Delivery API?

I’ll try to replicate this issue locally, but note that the PHP Management Client handles URLs exactly as they are provided.
We added the filenameCDN method to convert image URLs from a.storyblok.com into the CDN format.

[roberto-butti]

Using this script:

<?php
require "vendor/autoload.php";

use Storyblok\ManagementApi\Data\StoryComponent;
use Storyblok\ManagementApi\Endpoints\AssetApi;
use Storyblok\ManagementApi\ManagementApiClient;
use Storyblok\ManagementApi\QueryParameters\AssetsParams;

$dotenv = Dotenv\Dotenv::createImmutable(__DIR__);
$dotenv->load();
$storyblokPersonalAccessToken = $_ENV["SECRET_KEY"];

$client = new ManagementApiClient($storyblokPersonalAccessToken);
$spaceId = "********************HEREYOURSPACEID**********************";
$assetApi = new AssetApi($client, $spaceId);
$tags = ["some"];
$params = [
    "withTags" => implode(",", $tags),
];
$assets = $assetApi->page(new AssetsParams(...$params))->data();
var_dump($assets);
$asset = $assetApi->get($assets[0]->get("id"));
//$asset = $assets->get(0, null);
var_dump($asset->data());

$nestedImage = new StoryComponent("nested_image");
if ($asset !== null) {
    $nestedImage->setAsset("image", $asset->data());
}
var_dump($nestedImage);
var_dump($nestedImage->get("image")->get("filename"));

The last var_dump will dump a URL similar to this: `string(108) "https://s3.amazonaws.com/a.storyblok.com/f/288........"
This is the typical format of internal asset URL.
Asking these assets via a Story from the Content Delivery API, you will obtain something: "https://a.storyblok...."

So at this point, everything is fine, and let me know if you are aligned on this behavior.
Now i'm going to save the asset in a Story and show how is retrieved via API

[roberto-butti]

Trying to save the Story, I got your point.
If in the management API you will send the filename, the URL is managed as a full URL, so the CDN will retrieve the s3.amazonaws etc (exactyl the filename you sent)

My suggestion is to force the CDN urls in this way (see the set image.filename):

$content = new StoryComponent("article-page");
$content->set("title", "My New Article");
if ($asset !== null) {
    $content->setAsset("image", $asset->data());
    $content->set("image.filename", $asset->data()->filenameCDN());
    $content->set("image.is_external_url", false);
}
// $content->setAsset("image", $assetCreated);
$storyApi = new StoryApi($client, $spaceId);
$uinqid = uniqid();
$story = new Story(
    name: "A Story - " . $uinqid,
    slug: "a-story-" . $uinqid,
    content: $content,
);
$storyCreated = $storyApi->create($story)->data();

This is the behaviour of the API. I can think of implementing something that helps and "hides" this "complexity".
However, for now, this resolves your issue (the same approach is used by the Storyblok UI when, in the Visual Editor, you select an image and then click Save).

[Noaber]

Thank you for your quick response!

Testing with above example and it seems to be working (will do some more testing today)!
In your example you still use filenameCDN(), but I think the combination with is_external_url solved my issue ?

[roberto-butti]

Thank you for sharing your question.

Using filenameCDN() together with is_external_url indeed replicates the same behavior as the Storyblok UI, and it works as expected.

I understand your point that sending the filename when using an internal asset might seem a bit redundant. I’m currently checking internally for clarification on this, as there’s likely a specific reason or an edge case that explains why this behavior was designed that way.

I’ll get back to you as soon as I have a more detailed answer from the team.
But, you can use the filenameCDN to solve your "blocker"

[Noaber]

Sorry that I have to reopen this, but we just noticed that with the above way of adding images that the image is not editable in Storyblok UI

The pencil icon does nothing. If we add the image manual in the UI then the pencil icon is working.
We noticed this issue because the customer wanted to have the focal-point set.

Also in the code can we set the focus like this ?

$content->set("image.focus", 'focal-point');

[roberto-butti]

Hi, thank you for the feedback. After running some tests, I noticed that we need to send a properly initialized "image" JSON object.

With that in mind, I’d like to suggest a quick solution: initialize all fields required by the "asset" field type (in this case named image) in the story:

$content->set("image", [
        "id" => null,
        "alt" => "",
        "name" => "",
        "focus" => "",
        "title" => "",
        "source" => "",
        "filename" => "",
        "copyright" => "",
        "fieldtype" => "asset",
        "meta_data" => (object) [],
    ]);
    $content->set("image.filename", $asset->data()->filenameCDN());
    $content->set("image.is_external_url", false);
    $content->set("image.id", (int) $asset->data()->id());

With this approach, all fields are initialized correctly (including focus, as you mentioned). Also, note that meta_data needs to be an object {} instead of [], because the Management API treats them differently, which is why I added the cast.

Since this code is somewhat redundant, I plan to refine the emptyAsset() helper method (with proper casting) so that we will not need to initialize the asset field each time manually. The snippet above is more of a quick fix / workaround in the meantime.

I will keep this issue open, i will close it when i will release the emptyAsset method

[Noaber]

Thank you for your quick reply. But if I understand you correctly, in the future $nestedImage->setAsset(Asset object) will be the way to go when you fixed the issue ?

[roberto-butti]

Yes i think something like that:

    $theAsset = Asset::emptyAsset();
    $theAsset->set("filename", $asset->data()->filenameCDN());
    $theAsset->set("is_external_url", false);
    $theAsset->set("id", (int) $asset->data()->id());
    $content->setAsset("image", $theAsset);

And i'm thinking of creating a specific class AssetForStory (or a better name, of course) because the structure of the asset JSON section in the story is definitely simpler than the structure of the asset JSON section you can retrieve from the asset endpoint (but maybe this one can be a future improvement)

[Noaber]

I see, creating an empty asset and update with the asset data returned from the API.
Sounds good. And what are you thoughts about creating the asset with direct asset inserted (like the original question)

$content->setAsset("image", $asset) // because $asset is an Asset object retrieved from the API endpoint

Or is your described way, the way to do it in the future (with creating an empty asset first)

[roberto-butti]

Cooking 🧑‍🍳 something like this:

$content->setAssetField("image", AssetField::makeFromAsset($asset));