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

Help for integrating the Laravel package
Forum rules
Always add your Laravel, Aimeos and PHP version as well as your environment (Linux/Mac/Win)
Spam and unrelated posts will be removed immediately!
Sabir_Ali
Posts: 30
Joined: 12 Feb 2024, 06:43

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

Post by Sabir_Ali » 06 May 2024, 13:40

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?

User avatar
aimeos
Administrator
Posts: 8026
Joined: 01 Jan 1970, 00:00

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

Post by aimeos » 07 May 2024, 09:23

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.
Professional support and custom implementation are available at Aimeos.com
If you like Aimeos, Image give us a star

Sabir_Ali
Posts: 30
Joined: 12 Feb 2024, 06:43

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

Post by Sabir_Ali » 08 May 2024, 05:56

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.
Attachments
topic_files.tar.gz
(5.45 KiB) Downloaded 253 times

User avatar
aimeos
Administrator
Posts: 8026
Joined: 01 Jan 1970, 00:00

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

Post by aimeos » 09 May 2024, 07:46

Sabir_Ali wrote: 08 May 2024, 05:56 > Can you share the complete configuration in your controller.php file?
- Yes. I share the config/controller.php file in attachments.
Configuration looks OK.
Sabir_Ali wrote: 08 May 2024, 05:56 > 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.
Sabir_Ali wrote: 08 May 2024, 05:56 > 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?
Professional support and custom implementation are available at Aimeos.com
If you like Aimeos, Image give us a star

Sabir_Ali
Posts: 30
Joined: 12 Feb 2024, 06:43

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

Post by Sabir_Ali » 10 May 2024, 07:48

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
Posts: 30
Joined: 12 Feb 2024, 06:43

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

Post by Sabir_Ali » 12 May 2024, 12:01

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
Attachments
topic_files.tar.gz
(8.84 KiB) Downloaded 92 times

User avatar
aimeos
Administrator
Posts: 8026
Joined: 01 Jan 1970, 00:00

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

Post by aimeos » 12 May 2024, 13:04

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.
Professional support and custom implementation are available at Aimeos.com
If you like Aimeos, Image give us a star

Sabir_Ali
Posts: 30
Joined: 12 Feb 2024, 06:43

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

Post by Sabir_Ali » 12 May 2024, 13:23

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

User avatar
aimeos
Administrator
Posts: 8026
Joined: 01 Jan 1970, 00:00

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

Post by aimeos » 13 May 2024, 06:29

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.
Professional support and custom implementation are available at Aimeos.com
If you like Aimeos, Image give us a star

Sabir_Ali
Posts: 30
Joined: 12 Feb 2024, 06:43

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

Post by Sabir_Ali » 13 May 2024, 13:15

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.

Post Reply