Why is my image-with-caption shortcode making a smaller image

support
,
1

I have a shortcode for adding captions to my pictures.

and when I use it in the very first picture (used twice temporarily in website for you to see. it looks like this: Code is here (will change in future)

First one is just regular img code 2nd one is the shortcode. shortcode is smaller.

{{< img src = "/images/fat-thin-me.webp" >}}

{{< image-with-caption src="/images/fat-thin-me.webp" alt="fat and thin" caption="Left: May, 2023,  Right: Feb, 2024." >}}

short code is here

image
image826Ă—802 126 KB

2

It’s a CSS issue, there is margin attribute for <figure> elements, you can set it to 0 via follows.

figure {
    margin: 0;
}
1 Like
3

looks good on paper, but it is not affecting the size. Shouldn’t margin just affect position? The size is clearly different.

I added to /static/custom.css

/* custom.css */
/* static/css/custom.css */
.bg-maroon {
    background-color: #430909;
    /* Replace with your chosen maroon hex code */
}

figure {
    margin: 0;
}

.standard-image-size img {
    width: 100%;
    /* or any specific width you want */
    height: auto;
    margin: 0;
}

I tried adding this

<!-- layouts/shortcodes/image-with-caption.html -->
<figure class="standard-image-size">
    <img src="{{ .Get "src" | absURL }}" alt="{{ .Get "alt" }}">
    <figcaption>{{ .Get "caption" }}</figcaption>
</figure>
4

Both of those code are using the same image, however <figure> margin takes spaces, that’s is, the 2nd image rendered width is 100%- margin-left - margin-right. You can check this on Chrome console.

image
image1466Ă—250 33.7 KB

5

Okay. it works…
Seems there is some type of cache problem on my browser even if I restart the hugo server.
Then there is a cloudflare variable too.
I loaded live and still had the problem in chrome, but firefox (which I don’t use) seemed to show both as the same size now.

1 Like
6

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.