How to resize images

support
1

How do you resize the image to make it smaller?

2

Hi there,

You have a different question to the post you were replying to (which is over a year old now, and also already answered) so I opened a new topic for you.

3

Resizing an image, literally or visually, is a common action in web development. We support questions concerning Hugo. Show what you’ve tried in code, and explain what you want, and we’ll see what we can do.

4

I am trying to add thumbnail images next to every post on my home page. I added the below code to my frontmatter but no matter how I set the width of the image, it extends the length of the page.

<img width="20" height="400" src="{{ with .Params.image }}{{ . }}{{ end }}" >

Currently width is set to 20 but any value yields the same result, only the height parameter works.

5

I would refer you to this: https://gohugo.io/content-management/image-processing/#fit

This allows Hugo to actually resize the underlying image, then you display the image without specifying the dimensions.

6

20 units of what? I know the HTML5 spec is sometimes loosey-goosey with attributes, but I’m pretty sure you need to have a unit present.

You ought to share a link to your code, so someone can see the whole thing. For instance:

That doesn’t go in frontmatter, so it would be better if you showed what you have, rather than describing it. :sunglasses:

7

Sorry - I meant to say markdown, not frontmatter. Here’s the full code in my markdown file.

`

{{ range where .Paginator.Pages "Params.hidden" "ne" "true" }}

 <img width="20" height="400" src="{{ with .Params.image }}{{ . }}{{ end }}"  frameborder = "10">

{{ $url := replace .Permalink .Site.BaseURL "" }}
    {{ if ne $url "about/" }}
        <li>
            <aside class="dates">{{ .Date.Format "Jan 2" }}</aside>

            <a href='{{ .Permalink }}'>
                {{ .Title }}
                {{ if .Site.Params.enableSummary }}
                    {{ if .Site.Params.useDescriptionReplaceSummary }}
                        <h2>{{ .Description | plainify }}</h2>
                    {{ else }}
                        <h2>{{ .Summary | plainify | htmlUnescape }}</h2>
                    {{ end }}
                {{ end }}
            </a>

        </li>
    {{ end }}
{{ end }}
`

Once again, the height parameter works fine but the width parameter doesn’t. How else should I be showing the problem? Would a link to my github help?

8