diff options
| author | Earl Ng <ng.earl@gmail.com> | 2020-10-04 14:14:57 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2020-10-04 14:14:57 +0300 |
| commit | 637539e3e25711ad630e4654dc1d7508d0a6e6cb (patch) | |
| tree | 82da25ee0c5e312838e40c59de27b0572b030d04 | |
| parent | 691852610ee39185f66b6f7a74c913854a8882f6 (diff) | |
card featured image should crop instead of resize
Use .Resize will make the featured images seem distorted when displayed on cards if the featured images do not match the aspect ration of 700x350. Using .Fill instead will crop the image so that it does not look distorted.
Source: https://gohugo.io/content-management/image-processing/#smart-cropping-of-images
| -rw-r--r-- | layouts/_default/card.html | 2 |
1 files changed, 1 insertions, 1 deletions
diff --git a/layouts/_default/card.html b/layouts/_default/card.html index 01c06fc..41b7c9c 100644 --- a/layouts/_default/card.html +++ b/layouts/_default/card.html @@ -5,7 +5,7 @@ {{- $images := . -}} {{- with $page.Site.GetPage "section" "images" -}} {{- with .Resources.GetMatch (strings.TrimPrefix "/images/" (index $images 0)) -}} - {{- $image := .Resize "700x350" -}} + {{- $image := .Fill "700x350" -}} <img data-src="{{ $image.RelPermalink }}" class="card-img-top mx-auto d-block" alt="{{ $page.Title }}"> {{- end -}} {{- end -}} |