Crop Less with Focal Point

1

I started using the Academic theme with Hugo.

There are featured images, e.g., for publications. However, I’m unhappy with the focal_point behavior.

# Featured image 
# To use, add an image named `featured.jpg/png` to your page's folder. 
[image]
# Caption (optional)
caption = "Photo by [Academic](https://sourcethemes.com/academic/)"

# Focal point (optional)
# Options: Smart, Center, TopLeft, Top, TopRight, Left, Right, BottomLeft, Bottom, BottomRight
focal_point = "Smart"

Although it has various options, it always crops too much of the picture. How can I modify the theme that it crops less or just doesn’t crop at all? I’m still new to the language, but I suspect it might be around here:

{{ $resource := (.Resources.ByType "image").GetMatch "*featured*" }}
{{ $anchor := .Params.image.focal_point | default "Smart" }}
{{ with $resource }}
{{ $image := .Fill (printf "918x517 q90 %s" $anchor) }}
<div>
<a href="{{ $.RelPermalink }}">
  <img src="{{ $image.RelPermalink }}" class="article-banner" itemprop="image" alt="">
</a>
</div>
{{end}}
2

You could remove the anchor argument from the Fill method.

So edit this line:

{{ $image := .Fill (printf "918x517 q90 %s" $anchor) }}

To be:

{{ $image := .Fill "918x517 q90" }}

For a deeper dive, see the hugo docs on image processing.

Also, I’d recommend just overriding this particular piece of theme. So you would copy this file:

YOUR_SITE/themes/academic/layouts/partials/publication_li_detailed.html

Then paste it to:

YOUR_SITE/layouts/partials/publication_li_detailed.html

Then make your desired changes.

2 Likes
3

Thanks this helps a lot!