New added product preview image (in 720) is not shown in product details page.

[Sabir_Ali]

PHP: 8.2.7
Laravel Framework: 10.48.4
System: Debian GNU/Linux 12
Aimeos Laravel v2023.10

I had an issue in opening (new added) product details page, when I get an array error. So I temporary fixed it by adding

Code: Select all

[
         'maxwidth' => 720,
         'maxheight' => 960,
         'force-size' => 1,
 ],

into the aimeos-core/config/controller.php file. Now I have another issue. The details page opens normal, but I get only the image URI instead of image itself. In the shop front-end image is shown normal.

Images are automatically stored in public/aimeos/1.d ... directory and when I inspect the page by console, in the error string I see that URI of the image is something like

Code: Select all

 GET http://oursite/shop/ear-phones/1.d/preview/b/e/becf8efe_ear_phones_1000px.webp

In this example the ".../ear-phones/..." I suppose is the product Label. The URI of the image from 1.d/... etc is OK and it matches the file name.

So I have two questions:
1. Where problem of opening image in Details page can be in my case?
2. Where actually we must to keep the product images or we can keep them as is?

[aimeos]

Can you share the complete configuration in your controller.php file?
Did you overwrite the catalog/detail template?

After you've changed the preview file sizes, you have to regenerate the preview images to take effect by executing:

Code: Select all

php artisan aimeos:jobs media/scale

When you upload images in the admin backend, they are stored in the ./public/aimeos/<siteid>/ folder. If you want to keep them elsewhere, you should create a link in the ./public/aimeos/ folder to your real image folder.

[Sabir_Ali]

Thank you for your replay.

> Can you share the complete configuration in your controller.php file?
- Yes. I share the config/controller.php file in attachments.

> Did you overwrite the catalog/detail template?
- Yes. We are using our own theme in package and the template was modified by another developer. And I assume that problem is the template. Because when I switch to the Aimeos demo theme - everything is OK. I share it in the attachments.

> After you've changed the preview file sizes, you have to regenerate the preview images to take effect by executing:
- No. I did not used this command. But now, when I try to use it, I don't get the end of result in the terminal (it looks like terminal is in infinity loop).

> When you upload images in the admin backend, they are stored in the ./public/aimeos/<siteid>/ folder.
- Yes. After uploading the image, the files are stored in ./public/aimeos/1.d/ in my case.

[aimeos]

> Can you share the complete configuration in your controller.php file?
- Yes. I share the config/controller.php file in attachments.

Configuration looks OK.

> Did you overwrite the catalog/detail template?
- Yes. We are using our own theme in package and the template was modified by another developer. And I assume that problem is the template. Because when I switch to the Aimeos demo theme - everything is OK. I share it in the attachments.

Check what the difference is between the files regarding the image section.

> After you've changed the preview file sizes, you have to regenerate the preview images to take effect by executing:
- No. I did not used this command. But now, when I try to use it, I don't get the end of result in the terminal (it looks like terminal is in infinity loop).

How many images do you have that will be rescaled?

[Sabir_Ali]

How many images do you have that will be rescaled?

- One image. I added only one image to test. And the command

Code: Select all

php artisan aimeos:jobs media/scale

does not work in my case. Terminal freezes on it. But I don't understand what is the purpose of running this command. Because all sizes of the pictures are generated when I manually add the a new product in Admin Panel. Is it for bulk works on all images?

But when I corrected the preview column value in the mshop_media table by adding `\/aimeos\/` prefix into JSON values it works. The picture appeared on the page. So in the preview column value it looks something like

Code: Select all

... "720":"\/aimeos\/1.d\/preview\/b\/e\/becf8efe_ear_phones_1000px.webp", ...

Now I think somewhere in the logic of creation of this value or reading this value is not correct. Do you have any ideas what is it the place in code base I should look for and what is the best way to fix it?

But one interesting fact is that on the Aimeos demo theme it works fine, even without this prefix. The code part related to looking for previews in the image.php file in our package is:

Code: Select all

<?php
            if (($imgNum = count($this->get('mediaItems', []))) > 0) { ?>
                <?php
                $index = 0;
                foreach ($this->get('mediaItems', []) as $id => $mediaItem) {
                    $mediaUrl = $mediaItem->get('media.url');
                    $mediaMediumImg = $mediaItem->get('media.previews')[720];
                    ?>
                    <img class='' src="<?= htmlspecialchars($mediaMediumImg) ?>" alt="<?= htmlspecialchars($mediaMediumImg) ?>"
                         data-zoom-image="<?= htmlspecialchars($mediaUrl) ?>">
                    <?php
                    $index++;
                } ?>
                <?php
            } ?>

[Sabir_Ali]

I used your original templates/client/html/catalog/detail/image.php file in trying fix the problem. And now I see the image but only in original (large) size. Still not in 720px of width.

Then I added the following configuration into config/shop.php file with hope that this will fix (I'm not sure that this is correct, but any ways)

Code: Select all

return [
    'client' => [
        'html' => [
            'catalog' => [
                'detail' => [
                    'imageset-sizes' => '(min-width: 2000px) 1920px, (min-width: 960px) 960px, (min-width: 720px) 720px, 100vw'
                ]
            ]
        ]
    ]
];

There is a image() function, which I think is crucial in the detail image code with the following parameters:

Code: Select all

$this->image( $mediaItem, $this->config( 'client/html/catalog/detail/imageset-sizes', '(min-width: 2000px) 1920px, (min-width: 500px) 960px, 100vw' ), true )

I also tried to modify it like this:

Code: Select all

image( $mediaItem, $this->config( 'client/html/catalog/detail/imageset-sizes', '(min-width: 2000px) 1920px, (min-width: 960px) 960px, (min-width: 720px) 720px, 100vw' ), true )

While inspecting the image in browser, the code in <img> is following:

Code: Select all

srcset="/aimeos/1.d/preview/0/4/04cbbc51_red-hat.webp?v=20240512080850 240w, /aimeos/1.d/preview/a/c/ac20f0a0_red-hat.webp?v=20240512080850 480w, /aimeos/1.d/preview/2/4/2485b091_red-hat.webp?v=20240512080850 720w, /aimeos/1.d/preview/c/7/c7c60362_red-hat.webp?v=20240512080850 960w, /aimeos/1.d/preview/5/6/56aa6a8e_red-hat.webp?v=20240512080850 1920w" 

Size of the image is 960x1280

[aimeos]

Everything is correct but the browser selects itself which image it will use. You can only influence that partially with a different imageset-sizes configuration.

[Sabir_Ali]

Do I understand correctly that this problem cannot be solved? And what actually is correct?

[aimeos]

You can influence what the browser is choosing by removing e.g. the 960px image size to force the browser to use the next best one, which is 720px in your case.

[Sabir_Ali]

Everything is OK, except the fact, that browser looks for image without the '/aimeos/' prefix to URL. If I add it manually or hard code it into our template's image src it works as expected.

When I debug the media Item, media.previews array contains all previews without this directory. If I phisically move the site ID directory outside '/aimeos/' directory (for testing purpose), preview files doesn't work.

So, I think, hard coding the '/aimeos/' directory is not a normal practice. And doing the same think in the core.

Is there a configuration where I can change it? Or it's better to create a link to the directory (I didn't test it yet)? So I need your advice.