Wrong image sizes (blog detail page)

[timonf]

Hi Christopher,

we use your blog plugin and we are very happy with it. But when it comes to image resizing and thumbnails it has a strange behaviour.

First of all there is only one default thumbnail size (650px) for blog teaser images after installation (src/SasBlogModule.php):

        $mediaFolderRepository->create([
            [
                'entity' => BlogEntriesDefinition::ENTITY_NAME,
                'associationFields' => ['media'],
                'folder' => [
                    'name' => 'Blog Images',
                    'useParentConfiguration' => false,
                    'configuration' => [
                        'createThumbnails' => true,
                        'mediaThumbnailSizes' => [
                            [
                                'width' => 650,
                                'height' => 330,
                            ],
                        ],
                    ],
                ],
            ],
        ], $context);

But the default width of images on blog detail page using default Storefront theme is 893.33px. So the images don't look good:

So we have to adjust the generated thumbnails... So I went with 308px (for blog listing) and 893px (for detail page):

But after I changed it, it's getting worse.... because the desktop version now uses the 308px version (firefox is used):

I guess something is misconfigured in this part of code (src/Resources/views/storefront/element/cms-element-blog-detail.html.twig):

                            {% sw_thumbnails 'blog-image-teaser' with {
                                    media: element.data.media,
                                    sizes: {
                                    'xs': '501px',
                                    'sm': '315px',
                                    'md': '427px',
                                    'lg': '333px',
                                    'xl': '284px'
                                }
                            } %}

Why this template uses small images on xl and large images on xs? After resizing the window to a smaller viewport I will see the sharp version (893px) of the image:

Proposals:

• Add two versions of thumbnails in SasBlogModule.php (one for listing, one for teaser)
• Use only large images in src/Resources/views/storefront/element/cms-element-blog-detail.html.twig (maybe smaller thumbnails version on very small viewports)

But it would be even better, if you could configure those sizes.

[viennt]

Hi @timonf, thanks for your feedback and helpful suggestion. We'll discuss and find the best solution to fix it soon.

[timonf]

Hi @viennt!

If you like, I could create a PR :)

[viennt]

Sure, that sounds great to me ^^

[timonf]

@viennt Any status for the open PR?

[viennt]

@timonf, sorry for the late response. I'm checking it now. Thank you again for the PR.