Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixes #408 Set Aspect Ratio and Object Fit #409

Merged
merged 1 commit into from
Sep 8, 2022
Merged

Fixes #408 Set Aspect Ratio and Object Fit #409

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions themes/jb/assets/css/helpers/sizing.sass
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,6 @@
height: 100% !important
&__is-fullwidth
width: 100% !important
&__set-1by1
aspect-ratio: 1/1
object-fit: cover
2 changes: 1 addition & 1 deletion themes/jb/layouts/partials/people/smallest.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unfortunately no, I did try those first.

Copy link
Contributor Author

@ChanceM ChanceM Sep 8, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

custom__set-1by1
image

is-square
image

is-1by1
image

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nice trial&error ; )

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

More like attempt to use the "supported" styles/classes before adding custom parts.

Copy link
Collaborator

@gerbrent gerbrent Sep 8, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Collaborator

@gerbrent gerbrent Sep 8, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Kind of tangentially related, talked about images sizing here a bit: #326 (comment)

</figure>
<strong>{{ .Title }}</strong>
</a>
Expand Down