How can I scale an image in a Hugo page

Obsolesce

@JaredBusch said in How can I scale an image in a Hugo page:

Currently, markdown does not natively have a way to scale images.
https://daringfireball.net/projects/markdown/syntax#img

This seems to be an issues for me with using Hugo, I have an existing site that I am converting and the images are scaled with the normal <img> tag.

Searching the net, it seems a lot of tools have added functionality to markdown to support image scaling, but it seems Hugo's implementation of Markdown has not.

I tried to just use the HTML element in the Hugo page, but it was not rendered.

Can you "inspect element" in your browser of the image you are talking about and screenshot the whole hierarchy and I'll see if I can get the CSS going that you can add to the custom.css file in your other thread.

JaredBusch

@Obsolesce said in How can I scale an image in a Hugo page:

Can you "inspect element" in your browser of the image you are talking about and screenshot the whole hierarchy and I'll see if I can get the CSS going that you can add to the custom.css file in your other thread.

I took it all back out last night before i stopped. Tonight it is too late to fuck with, but I will next I work on this.

Specifying dimensions is a normal thing with images.

JaredBusch

So, Hugo has a built in short code for this...

https://gohugo.io/content-management/shortcodes/#example-figure-input

{{< figure src="/images/dwarf1.jpg" alt="dwarf" width="100px" >}}

JaredBusch

Now to figure out how to make an image be to the left or right.

...and the figure shortcode allows the class attribute.. so that was easy. CSS can handle it.

in my dwarf.css

.about-left {
    float: left;
    padding: 0 20px 20px 0;
}

and the new shortcode

{{< figure src="/images/dwarf1.jpg" alt="dwarf" width="100px" class="about-left" >}}

1337

@JaredBusch said in How can I scale an image in a Hugo page:

and the new shortcode

{{< figure src="/images/dwarf1.jpg" alt="dwarf" width="100px" class="about-left" >}}

Just an observation but I wonder what the "shortcode" is short for, when it's basically exactly the same as html?

<img src="/images/dwarf1.jpg" alt="dwarf" width="100" class="about-left">

In html when you provide width or height it's enough to do one of them and then that become the constraining factor and the image keeps it's aspect ratio..

JaredBusch

@Pete-S said in How can I scale an image in a Hugo page:

@JaredBusch said in How can I scale an image in a Hugo page:
and the new shortcode
{{< figure src="/images/dwarf1.jpg" alt="dwarf" width="100px" class="about-left" >}}
Just an observation but I wonder what the "shortcode" is short for, when it's basically exactly the same as html?

Huog is all markdown based, and depending on the theme (apparently) you cannot jsut use html in a page.

JaredBusch

@Pete-S said in How can I scale an image in a Hugo page:

In html when you provide width or height it's enough to do one of them and then that become the constraining factor and the image keeps it's aspect ratio..

Yes

JaredBusch

ok issue with the shortcode. it makes each image on it's own line, even though I have it all on one line.

{{< figure src="/images/dwarf1.jpg" alt="dwarf" width="200px" >}} {{< figure src="/images/c64.jpg" alt="c64" width="200px" >}} {{< figure src="/images/tower.jpg" alt="computer tower" width="200px" >}}

Inspect element:

View Source:

View source shows the three images appear to be wrapped in a single <p>

Visible output:

JaredBusch

@Pete-S said in How can I scale an image in a Hugo page:

Just an observation but I wonder what the "shortcode" is short for, when it's basically exactly the same as html?

Here is an example.

This:

Results in this:

Obsolesce

I don't get where you are putting the shortcode where you define the image file.

JaredBusch

@Obsolesce said in How can I scale an image in a Hugo page:

I don't get where you are putting the shortcode where you define the image file.

In the page/post of course.

In this case about.md

Obsolesce

@JaredBusch said in How can I scale an image in a Hugo page:

@Pete-S said in How can I scale an image in a Hugo page:

Just an observation but I wonder what the "shortcode" is short for, when it's basically exactly the same as html?

Here is an example.

This:

Results in this:

So "This:" is the about.md file, where you have both the html img line and shortcode?

stacksofplates

@Pete-S said in How can I scale an image in a Hugo page:

@JaredBusch said in How can I scale an image in a Hugo page:
and the new shortcode
{{< figure src="/images/dwarf1.jpg" alt="dwarf" width="100px" class="about-left" >}}
Just an observation but I wonder what the "shortcode" is short for, when it's basically exactly the same as html?
<img src="/images/dwarf1.jpg" alt="dwarf" width="100" class="about-left">
In html when you provide width or height it's enough to do one of them and then that become the constraining factor and the image keeps it's aspect ratio..

The shortcodes vary depending on what they are. Here's the youtube shortcode to embed a youtube video:

{{< youtube w7Ft2ymGmfc >}}

stacksofplates

@JaredBusch said in How can I scale an image in a Hugo page:

So, Hugo has a built in short code for this...

https://gohugo.io/content-management/shortcodes/#example-figure-input
{{< figure src="/images/dwarf1.jpg" alt="dwarf" width="100px" >}}

I missed that somehow, my bad.

JaredBusch

@Obsolesce said in How can I scale an image in a Hugo page:

@JaredBusch said in How can I scale an image in a Hugo page:

@Pete-S said in How can I scale an image in a Hugo page:

Just an observation but I wonder what the "shortcode" is short for, when it's basically exactly the same as html?

Here is an example.

This:

Results in this:

So "This:" is the about.md file, where you have both the html img line and shortcode?

Oh, FFS. The image tag was only there to show him what happens to HTML. Pay attention.

JaredBusch

@stacksofplates said in How can I scale an image in a Hugo page:

@JaredBusch said in How can I scale an image in a Hugo page:
So, Hugo has a built in short code for this...

https://gohugo.io/content-management/shortcodes/#example-figure-input
{{< figure src="/images/dwarf1.jpg" alt="dwarf" width="100px" >}}
I missed that somehow, my bad.

I never found it when searching either.

Obsolesce

@JaredBusch said in How can I scale an image in a Hugo page:

@Obsolesce said in How can I scale an image in a Hugo page:

@JaredBusch said in How can I scale an image in a Hugo page:

@Pete-S said in How can I scale an image in a Hugo page:

Just an observation but I wonder what the "shortcode" is short for, when it's basically exactly the same as html?

Here is an example.

This:

Results in this:

So "This:" is the about.md file, where you have both the html img line and shortcode?

Oh, FFS. The image tag was only there to show him what happens to HTML. Pay attention.

Yeah, I figured. Nothing wrong with verifying something that looks contradicting, though. There's not enough of that around here tbh, too much assumption.

JaredBusch

@Obsolesce said in How can I scale an image in a Hugo page:

@JaredBusch said in How can I scale an image in a Hugo page:

@Obsolesce said in How can I scale an image in a Hugo page:

@JaredBusch said in How can I scale an image in a Hugo page:

@Pete-S said in How can I scale an image in a Hugo page:

Just an observation but I wonder what the "shortcode" is short for, when it's basically exactly the same as html?

Here is an example.

This:

Results in this:

So "This:" is the about.md file, where you have both the html img line and shortcode?

Oh, FFS. The image tag was only there to show him what happens to HTML. Pay attention.

Yeah, I figured. Nothing wrong with verifying something that looks contradicting, though. There's not enough of that around here tbh, too much assumption.

Okay, I’ll give you that.

Solved How can I scale an image in a Hugo page

Inspect element:

View Source:

Visible output: