Thumbnails not working as expected

[stefano-HH]

It seems that the thumbnails are not working as expected.

Using a Thumbnail Alias results in an error message:

Argument 2 passed to Bolt\Twig\ImageExtension::thumbnail() must be of the type integer or null, string given, called in /Library/WebServer/Documents/bolt4/websrc/var/cache/dev/twig/12/121b12ad1d8f97a3040979915b064b93463dc1fdba5ee866f640a1bfbea1f93b.php on line 94

twig Template:

 <img src="{{ thumbnail(homepage.image, 'teaser') }}" />

theme.yaml:

thumbnails:
    aliases:
        teaser:
            size: [400, 300]
            cropping: crop

The call with cropping parameters is ignored, it seems that 'r' is always applied

twig Template:

<img src="{{ thumbnail(homepage.image, 120, 120, 'c') }}" />

output HTML:

<img src="/thumbs/120×120×location=c/IMG-3312.jpg" />

But the rendered Image is actual 120x90px

Bolt version: 4.0.0 RC 32

 * Install type: Composer install
 * Database: sqlite 3.28.0 (without JSON)
 * PHP version: 7.2.21

 * Symfony version: v4.4.11
 * Operating System: Darwin - 18.7.0

[milosa]

Are aliases even supported in 4?

I thought they weren't, but they should. I was going to make an issue about that, because the parameters of the thumbnails shouldn't be modifiable by visitors imo.

[I-Valchev]

Hi @kutulus ,

A mixture of things, but primarily the docs needed a bit more love :-)

Thumbnail config in theme.yaml is not available (yet?). But you can thumbnail and crop images in many ways.

If you check the changes in this docs PR, you'll see how to.

The image extension works similarly (though not exactly) as the configured thumbnail option. Maybe it will help :-)

[stefano-HH]

hi Ivo,
thanks for your feedback and clarifications...

I use Bolt RC 33 now.

If I use the Responsive image extension:
I would expect to get a square image
all generated images keep their original proportions

ivovalchev-imageextension.yaml

productcard_big:
     widths: [ 300, 600, 900, 1000 ]
     heights: [ 300, 600, 900, 1000 ] # Optional. If heights is not set, the height will be relative to the width.
     fit: crop # Uses Bolt's `thumbnail` fit options. Pass an array, e.g. [ crop, fit, crop ] 
     class: 'productcard-big'
     sizes: ["(min-width: 1024px) 569px", "(min-width: 680px) 569px", "(min-width: 480px) 340px", "100vw"]

twig Template:

  {{ responsive_image(image, 'productcard_big') }}

Generated HTML:

  <img src='/files/IMG-3317.jpg' alt='Bild 1 pt' class='productcard-big' srcset='/thumbs/300×225/IMG-3317.jpg 300w,/thumbs/600×450/IMG-3317.jpg 600w,/thumbs/900×675/IMG-3317.jpg 900w,/thumbs/1000×750/IMG-3317.jpg 1000w' sizes='(min-width: 1024px) 569px,(min-width: 680px) 569px,(min-width: 480px) 340px,100vw' />

Call with the thumbnail function:

twig Template:

<img class="xyz" src="{{ image|thumbnail(width=100, height=100, fit="c") }}" alt="{{image.alt}}"/>

Generated HTML:

<img class="xyz" src="/thumbs/100×100×fit=c/IMG-3317.jpg" alt="Bild 1 pt"/>

the actual size of the rendered image is 100x75px

Here is the part of the contenttype:

pages:
    name: Pages
    singular_name: Page
    fields:
        ...
        
        sections:
            type: collection
            label: Content Sections
            info: Hier eine Info...
            class: mySet
            localize: true
            collapsible: true
            fields:
                productcard:
                    type: set
                    collapsible: true
                    label: Product Card
                    localize: true
                    fields:
                        ...
                        
                        image:
                            label: 5 Images with description
                            type: imagelist
                            extensions: [ gif, jpg, png ]
                            upload: productcard
                            limit: 5
                            required: true

Greetings
Stefano

[I-Valchev]

Hi @kutulus , I was also able to replicate the same issues that you describe.

The options in Bolt 4 are different to Bolt 3 had (same functionality, but the names are different). You can check the updated docs here.

Note that until the next RC is released, you'd only be able to use the full names for the fit option (e.g. fill, not just f).

The image extension relies on Bolt's thumbnail filter. So if we use that with the correct parameters, it should work too.

Does that fix the issue for you? :-)

[I-Valchev]

Also, I was wrong by saying you can't define default thumbnail options..

You can do so, but in config.yaml under the thumbnails option.

[stefano-HH]

HI @I-Valchev,
The fit Parameter now works like a charm!

With thumbnail()
<img class="zzz" src="{{ thumbnail(image, 100, 100, fit='crop') }}" alt="{{image.alt}}"/>
and also your image extension
{{ responsive_image(image, 'productcard_big') }}
Thanks! and Greetings
Stefano

[I-Valchev]

@kutulus awesome!