Merge pull request #434 from nunocoracao/418-revert-image-processing-behaviour-fill-to-resize
⏪️ revert image processing behaviour (.fill to .resize)
Nuno Coração
GitHub
|
|
@ -76,7 +76,7 @@ defaultBackgroundImage = "/img/iceland.jpg"
|
||||||
showViews = true
|
showViews = true
|
||||||
showLikes = true
|
showLikes = true
|
||||||
showTableOfContents = true
|
showTableOfContents = true
|
||||||
showCards = false
|
showCards = true
|
||||||
groupByYear = false
|
groupByYear = false
|
||||||
cardView = true
|
cardView = true
|
||||||
cardViewScreenWidth = false
|
cardViewScreenWidth = false
|
||||||
|
|
|
||||||
|
|
@ -38,12 +38,12 @@ Hugo has various builtin methods to resize, crop and optimize images.
|
||||||
As an example - in `layouts/partials/article-link/card.html`, you have the following code:
|
As an example - in `layouts/partials/article-link/card.html`, you have the following code:
|
||||||
|
|
||||||
```go
|
```go
|
||||||
{{ with .Fill "600x600" }}
|
{{ with .Resize "600x" }}
|
||||||
<div class="w-full thumbnail_card nozoom" style="background-image:url({{ .RelPermalink }});"></div>
|
<div class="w-full thumbnail_card nozoom" style="background-image:url({{ .RelPermalink }});"></div>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
```
|
```
|
||||||
|
|
||||||
The default behavior of Hugo here is to use Smartcrop to dynamically set the anchor point (crop placement) on the image and resize it to fill 600x600px.
|
The default behavior of Hugo here is to resize the image to 600px keeping the ratio.
|
||||||
|
|
||||||
It is worth noting here that default image configurations such as [anchor point](https://gohugo.io/content-management/image-processing/#anchor) can also be set in your [site configuration](https://gohugo.io/content-management/image-processing/#processing-options) as well as in the template itself.
|
It is worth noting here that default image configurations such as [anchor point](https://gohugo.io/content-management/image-processing/#anchor) can also be set in your [site configuration](https://gohugo.io/content-management/image-processing/#processing-options) as well as in the template itself.
|
||||||
|
|
||||||
|
|
|
||||||
|
After Width: | Height: | Size: 693 KiB |
|
After Width: | Height: | Size: 333 KiB |
|
After Width: | Height: | Size: 733 KiB |
|
After Width: | Height: | Size: 464 KiB |
|
After Width: | Height: | Size: 568 KiB |
|
After Width: | Height: | Size: 671 KiB |
|
After Width: | Height: | Size: 727 KiB |
|
After Width: | Height: | Size: 454 KiB |
|
After Width: | Height: | Size: 719 KiB |
|
After Width: | Height: | Size: 709 KiB |
|
After Width: | Height: | Size: 742 KiB |
|
After Width: | Height: | Size: 613 KiB |
|
After Width: | Height: | Size: 517 KiB |
|
After Width: | Height: | Size: 473 KiB |
|
After Width: | Height: | Size: 814 KiB |
|
After Width: | Height: | Size: 154 KiB |
|
After Width: | Height: | Size: 40 KiB |
|
After Width: | Height: | Size: 147 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 154 KiB |
|
After Width: | Height: | Size: 40 KiB |
|
After Width: | Height: | Size: 147 KiB |
|
After Width: | Height: | Size: 85 KiB |
|
|
@ -19,7 +19,7 @@
|
||||||
<div class="w-full thumbnail_card nozoom" style="background-image:url({{ .RelPermalink }});"></div>
|
<div class="w-full thumbnail_card nozoom" style="background-image:url({{ .RelPermalink }});"></div>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
{{ else }}
|
{{ else }}
|
||||||
{{ with .Fill "600x600" }}
|
{{ with .Resize "600x" }}
|
||||||
<div class="w-full thumbnail_card nozoom" style="background-image:url({{ .RelPermalink }});"></div>
|
<div class="w-full thumbnail_card nozoom" style="background-image:url({{ .RelPermalink }});"></div>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
|
||||||
|
|
@ -46,7 +46,7 @@
|
||||||
<div class="{{ $articleImageClasses }}" style="background-image:url({{ .RelPermalink }});"></div>
|
<div class="{{ $articleImageClasses }}" style="background-image:url({{ .RelPermalink }});"></div>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
{{ else }}
|
{{ else }}
|
||||||
{{ with .Fill "600x400" }}
|
{{ with .Resize "600x" }}
|
||||||
<div class="{{ $articleImageClasses }}" style="background-image:url({{ .RelPermalink }});"></div>
|
<div class="{{ $articleImageClasses }}" style="background-image:url({{ .RelPermalink }});"></div>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
|
||||||
|
|
@ -17,7 +17,7 @@
|
||||||
<div class="w-full thumbnail_card nozoom" style="background-image:url({{ .RelPermalink }});"></div>
|
<div class="w-full thumbnail_card nozoom" style="background-image:url({{ .RelPermalink }});"></div>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
{{ else }}
|
{{ else }}
|
||||||
{{ with .Fill "600x600" }}
|
{{ with .Resize "600x" }}
|
||||||
<div class="w-full thumbnail_card nozoom" style="background-image:url({{ .RelPermalink }});"></div>
|
<div class="w-full thumbnail_card nozoom" style="background-image:url({{ .RelPermalink }});"></div>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
|
||||||