adjust image sizing in feature

[ptitle]

Checks

• I have searched the docs, existing issues, and existing discussions for answers first.

Link to your website repo

https://github.com/ptitle/macroEEB

Version of Lab Website Template you are using

1.3.4

Description

I am using the feauture component for my team page (https://github.com/ptitle/macroEEB/blob/main/people/index.md). But one image is cut off - it must be too tall (this is the last team person on the page: https://ptitle.github.io/macroEEB/people/). I tried adding a width or height argument, but it doesn't seem to have an effect. How can I adjust this so that the full image is shown?

(there are many other aspects not working on my site currently, but I know that - this is a work in progress)

[vincerubinetti]

If you want to just remove the restriction that keeps all the images at a consistent size, comment out the aspect-ratio line within the .feature-image class in _styles/feature.scss:

But the aspect-ratio is there to ensure images look good without authors having to do much, as long as the subject of the picture is in the center of the frame. I would instead just crop that last picture to be more square, with the face closer to the center.

You could also change object-fit: fit; to object-fit: contain; and remove box-shadow: var(--shadow), which I don't think looks good:

[ptitle]

Thanks for this! I agree - ultimately some changes to the picture itself make the most sense.

[ptitle]

and I assume this sort of thing cannot be adjusted on a case-by-case basis, per image.

[vincerubinetti]

Not within the feature component, no. In the figure component you can specify a width/height, but that's designed differently for a different purpose.

You could modify _includes/feature.html to accept new parameters that change the specific styling on a per-image basis, but I don't think that would be worth the effort and added complexity unless you were making much much more heavy use of the component. Editing the individual images to have consistent framing will be easier and probably better for you in the long run.

[ptitle]

I appreciate the feedback - thanks!