Image processing

support
1

Hi,
where can I find a working example on how to resize images?
Documentation (https://gohugo.io/content-management/image-processing/) doesn’t help me because I don’t know how to use it.

2

Sample :slight_smile:

{{ define "main" }}

<  snipped >

<div>{{ .Content }}</div>
<hr/>
<div>
{{range .Resources.Match "gallery/*" }}{{ $original := . }}
	{{ $.Scratch.Set "image" ($original.Fit "370x370") }}{{ $image := $.Scratch.Get "image" }}
	<a class="dim b--white" data-fancybox="gallery" href="{{.RelPermalink | relURL}}" >
		<img class="ba bw1 b--dark-blue" src="{{ $image.RelPermalink | relURL}}" width="{{ $image.Width }}" height="{{ $image.Height }}" alt="{{.Name}}" /> 
	</a>
{{ end }}
</div>
{{ end }}

Use of CSS tachyons and Fancybox for the picture gallery.
I store the pictures in sub-dir ./gallery, the thumb images are resized.

1 Like
3

I think the imgproc shortcode in the docs is very helpful.

But, to add to @ju52’s sample, here is another.

Let’s say you have a blog post some-post, and your image is part of a leaf bundle:

├── content
│   └── blog
│       └── some-post
│           ├── index.md
│           └── space.jpg

You could define a shortcode, layouts/shortcodes/img-resize.html:

{{ $original := .Page.Resources.GetMatch (printf "*%s*" (.Get "img")) }}
{{ $new := $original.Resize (.Get "size") }}
<a href="{{ $original.Permalink }}"><img src="{{ $new.Permalink }}"></a>

Then use it in your post like:

{{< img-resize img="space.jpg" size="500x300" >}}

This simple shortcode resizes an image, then gives a link to the original.

4 Likes
4

Thanks a lot - this was really helpful for me :slight_smile: