jpanther / congo

A powerful, lightweight theme for Hugo built with Tailwind CSS.
https://jpanther.github.io/congo/
MIT License
1.23k stars 328 forks source link

Inconsistent picture rendering #828

Closed tomy0000000 closed 6 months ago

tomy0000000 commented 7 months ago

Issue description

According to the shortcode documentation, the following two methods of image rendering should yield the same result:

{{< figure
    src="pittsburgh-in-snow.jpg"
    alt="Abstract purple artwork"
    caption="Test"
>}}
![Abstract purple artwork](pittsburgh-in-snow.jpg "Test")

However, this seems to be different...

CleanShot 2024-03-11 at 16 18 47@2x

The problem here seems to be that they're rendered with different templates:

Kind of confusing to understand the purpose of the figure shortcode, but after getting to know this better, I may be able to work on a fix for this.

Theme version

v2.8.1

Hugo version

hugo v0.123.4-21a41003c4633b142ac565c52da22924dc30637a+extended darwin/amd64

Which browser rendering engines are you seeing the problem on?

Chromium (Google Chrome, Microsoft Edge, Brave, Vivaldi, Opera, etc.)

URL to sample repository or website

No response

Hugo output or build error messages

No response

jpanther commented 6 months ago

The figure shortcode is just to provide a way of adding images using shortcodes as this is how a lot of themes work and so this is a way for people to port their existing content to the theme with minimal friction. The render hook for markdown images is simply a shortcut (that was only introduced in more recent versions of Hugo).

The intent is for both methods to output their images using the same design and styling.