Fixes #408 Set Aspect Ratio and Object Fit #409
Conversation
| @@ -2,7 +2,7 @@ | |||
| <a href="/{{ .Type | pluralize }}/{{ .Params.username }}"> | |||
| <figure class="image is-96x96" style="margin: 0 auto"> | |||
| <!-- <figure class="image is-96x96 my-0 mx-auto"> --> | |||
| <img src="{{ .Params.avatar }}" alt="{{ .Title }}" class="is-rounded" /> | |||
| <img src="{{ .Params.avatar }}" alt="{{ .Title }}" class="custom__set-1by1 is-rounded" /> | |||
There was a problem hiding this comment.
Would the Bulma is-square or is-1by1 work for this? Or is the object-fit: cover not included in that?
https://bulma.io/documentation/elements/image/#responsive-images-with-ratios
There was a problem hiding this comment.
Unfortunately no, I did try those first.
There was a problem hiding this comment.
custom__set-1by1
is-square
is-1by1
There was a problem hiding this comment.
More like attempt to use the "supported" styles/classes before adding custom parts.
There was a problem hiding this comment.
that gets me thinking then: should we use the "supported" methods differently to create all of the thumbnails?
As in: is this a band-aid, or should we be revisiting how the thumbnails get generated more generally to cover these edge cases? Is there a better way?
There was a problem hiding this comment.
This will provide greater coverage should an image not meet a 1:1 aspect ratio. I'm not exactly sure where they are pulled from or if JB can exert full control over them.
There was a problem hiding this comment.
most of the images were scraped by the scraper from Fireside. The images thus were necessarily previously ingested by Fireside's process and likely made to conform to a specific standard.
Alex' photo is the first to be replaced independent of Fireside - he applied it here as a PR - and thus is the first case of integrating non-standard photos into our site here.
THAT is the difference, and why all a sudden Alex' photo is problematic.
Likely we will need to test a variety of images to see how Hugo & company manage their integration seamlessly.
There was a problem hiding this comment.
Kind of tangentially related, talked about images sizing here a bit: #326 (comment)
ChanceM
changed the title
|
@ChanceM thanks for jumping in on this one so quickly! |
|
@CGBassPlayer when you're satisfied say that word and I'll happily merge this |
Creates a custom size class to set image aspect ratio to 1:1 and object fit to cover for non-square images.
Fixes #408