images have wrong dimensions

[js32]

Hi! First let me thank you for your work!

I'm having issues getting figures displayed correctly.

The page in Question is here. The first image is added wit the shortcode img.html:

{{ $path := .Get "src" }}
{{ $caption := .Get "title" }}
<div class="fancybox">
    <a data-fancybox="gallery" href="{{ $path | absURL }}" data-caption="{{ $caption }}">
        <img src="{{ $path | absURL }}"  width="100%"  alt="" loading="lazy"/>
    </a>
</div>

and is displayed with correct dimensions.

The second, third and fourth images I've added respectively like so:

{{< load-photoswipe >}}
{{< figure src="/img/fixed-background-bottom.jpg" width="400px" height="auto" >}}
{{< figure link="/img/fixed-background-bottom.jpg" thumb="-small" >}}
{{< figure link="/img/fixed-background-bottom.jpg" thumb="-small" width="400px" >}}

As you can see, the first image has the wrong dimension and the third and fourth one don't display the smaller preview images.. The lightbox is working though.

Edit: I've fixed the thumbnails not displaying... I was using .jpeginstead of .jpg:)

Could you please assist?

Thanks in advance and have a good one :)

[EmielH]

Hi @js32, it's not possible to set the height using the figure shortcode. The width property translates to max-width in CSS. That might explain what you're seeing.

[kishorbhat]

@js32 do you still need help with this? I'm getting a 404 on the linked page.