Closed kutulus closed 4 years ago
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.
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 :-)
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
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? :-)
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.
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
@kutulus awesome!
It seems that the thumbnails are not working as expected.
Using a Thumbnail Alias results in an error message:
twig Template:
theme.yaml:
The call with cropping parameters is ignored, it seems that 'r' is always applied
twig Template:
output HTML:
But the rendered Image is actual 120x90px