How to center the text in a caption?

[Jarmos-san]

Related to #241. As suggested, I did use the provided shortcode figure & it "works" but not as intended.

I was trying to caption an image like this:

But the formatting of the text in the caption generated by Hugo is like this:

What am I doing wrong? Or am I missing some feature of your theme? I see you provide a customized version of the figure shortcode with PaperMod. So, perhaps I'm not using it the right way?

Any guidance will be much appreciated.

[kdkasad]

Have you tried using both the title and caption parameters? If not, try both (i.e. only one at a time, but try each of the two). I can't tell just from looking at layouts/shortcodes/figure.html if it'll help at all, but it's worth a shot.

Example:

{{< figure src="/img/whatever.png" title="Caption goes here" >}}
{{< figure src="/img/whatever.png" caption="Caption goes here" >}}

[Jarmos-san]

@kdkasad both the title & the caption parameters do the same thing. Can confirm since I checked it just now.

[adityatelange]

@Jarmos-san That is how the caption looks by default, as provided by hugo.
Checkout PR #127 where @kdkasad only adds the template in order to fix the heading appearing in table of contents

[kdkasad]

@adityatelange what do you think about changing the look of the caption parameter? I can leave title how it is, and change the look of the caption text to what @Jarmos-san showed they wanted above. It seems pointless to have two identical parameters, anyways.

[Jarmos-san]

@kdkasad if you could change how caption behaves that would be great! Right now the behaviour for title & caption are the same. It seems kinda redundant to me even if that's how Hugo renders the caption text by default.

Besides, the implementation details don't appear too difficult either. And I see you had plans to customize the caption text similar to how it shows up under the cover image as well? So, if you could make a new PR with that implementation as well, I would be grateful!

Anyway, thanks for the great work! ❤️ Without the contributions you guys are making, developers like me with no experience whatsoever with frontend stuff would perish. That said, do link the PR with this issue thread, so it can be closed. @adityatelange your opinion?

[kdkasad]

I'm going to open a PR sometime soon with a reworked caption layout. I plan to make both the title and caption appear centered directly below the image. The title will be bold and will have the primary color. The caption will be directly below the title, and will be a normal font weight with the secondary color.

I'll also adjust the style of the cover image's caption to match.

Here's a screenshot of the paperesque theme, which follows the same layout but with a different style:

[Jarmos-san]

Looks good to me! I'm surprised to see Hugo's figure shortcode doesn't apply the same formatting by default. But regardless, once again thanks for your contribution.

[adityatelange]

@adityatelange your opinion?

I was of the opinion that let the figure shortcode the way it is presented by hugo

[adityatelange]

@Jarmos-san @kdkasad

The issue I thought for customizing captions in #127 inside the post was Cover image is meant to be full sized and fits the width.

While in case of images inside a post, the images can be smaller than width of main hence centering the caption and title does not seem a nice idea to me.

Ex.

Originally posted by @adityatelange in #247 (comment)

[Jarmos-san]

@adityatelange makes sense, you're right.

In that case, wouldn't it make sense to also center the image as well? In other words, you could provide a customize version of the figure shortcode that centers the image, it's title & the caption as well. That said, I think it would be logical to rename your customized figure shortcode to avoid confusion between the shortcode provided by Hugo itself.

[kdkasad]

@adityatelange makes sense, you're right.

you could provide a customize version of the figure shortcode that centers the image, it's title & the caption as well. That said, I think it would be logical to rename your customized figure shortcode to avoid confusion between the shortcode provided by Hugo itself.

If we're doing that, I'd recomend just providing an align parameter, which could take the values left, center, and right, and would align both the image and caption accordingly.

[adityatelange]

@adityatelange makes sense, you're right.
you could provide a customize version of the figure shortcode that centers the image, it's title & the caption as well. That said, I think it would be logical to rename your customized figure shortcode to avoid confusion between the shortcode provided by Hugo itself.

If we're doing that, I'd recomend just providing an align parameter, which could take the values left, center, and right, and would align both the image and caption accordingly.

We have multilingual configs with us, align values won't work properly there is what I would say

[adityatelange]

In that case, wouldn't it make sense to also center the image as well? In other words, you could provide a customize version of the figure shortcode that centers the image, it's title & the caption as well. That said, I think it would be logical to rename your customized figure shortcode to avoid confusion between the shortcode provided by Hugo itself.

In that case the theme is free to be personalized and customized as one wants

---

I could be wrong, but can't you customize your theme by adding the necessary changes under layouts/_defaults? Perhaps, you could take a look at the documentations on Single Page Templates as well.

Originally posted by @Jarmos-san in #239 (comment)

[Jarmos-san]

We have multilingual configs with us, align values won't work properly there is what I would say

Got it now!

So, unless you configure the figure shortcode to also work with languages like Arabic, it would break again for someone else.

What's a better alternative in your opinion then?

[kdkasad]

@adityatelange makes sense, you're right.
you could provide a customize version of the figure shortcode that centers the image, it's title & the caption as well. That said, I think it would be logical to rename your customized figure shortcode to avoid confusion between the shortcode provided by Hugo itself.

If we're doing that, I'd recomend just providing an align parameter, which could take the values left, center, and right, and would align both the image and caption accordingly.

We have multilingual configs with us, align values won't work properly there is what I would say

I actually disagree with this. I think a custom align property would work fine. Here's a behavior table:

align	languageDirection	Result
unspecified or default	ltr	left-aligned image and captions
unspecified or default	rtl	right-aligned image and captions
left	any	left-aligned image and captions
right	any	right-aligned image and captions
center	any	centered image and captions

This would add support for custom image alignment without breaking any functionality for right-to-left languages. If I am wrong, please correct me. I do not deal with RTL languages, so I'm probably missing something.

I also think that if we were to add this align parameter, it could be done in the existing figure shortcode, since it doesn't override anything provided by standard Hugo. Usage of figures without the align parameter would follow default behavior, and if someone included the align parameter in a theme which doesn't support it, it would be silently ignored, causing no harm.

Edit: I've pushed a proof-of-concept branch at kdkasad@29f7fe0a904597a2f0a5965e05310c8fb0b3941d. There's a test page in the example site at kdkasad@605c805feae682e1817ea1a0f728c6890118f3ff.

[adityatelange]

@adityatelange makes sense, you're right.
you could provide a customize version of the figure shortcode that centers the image, it's title & the caption as well. That said, I think it would be logical to rename your customized figure shortcode to avoid confusion between the shortcode provided by Hugo itself.

If we're doing that, I'd recomend just providing an align parameter, which could take the values left, center, and right, and would align both the image and caption accordingly.

We have multilingual configs with us, align values won't work properly there is what I would say

I actually disagree with this. I think a custom align property would work fine. Here's a behavior table:

align languageDirection Result
unspecified or default ltr left-aligned image and captions
unspecified or default rtl right-aligned image and captions
left any left-aligned image and captions
right any right-aligned image and captions
center any centered image and captions
This would add support for custom image alignment without breaking any functionality for right-to-left languages. If I am wrong, please correct me. I do not deal with RTL languages, so I'm probably missing something.

I also think that if we were to add this align parameter, it could be done in the existing figure shortcode, since it doesn't override anything provided by standard Hugo. Usage of figures without the align parameter would follow default behavior, and if someone included the align parameter in a theme which doesn't support it, it would be silently ignored, causing no harm.

Edit: I've pushed a proof-of-concept branch at kdkasad/hugo-PaperMod@29f7fe0. There's a test page in the example site at kdkasad/hugo-PaperMod@605c805.

@kdkasad Amazing, that works flawlessly, can we have a PR with only center align included ?

[kdkasad]

@kdkasad Amazing, that works flawlessly, can we have a PR with only center align included ?

PR is #256. Updated test page for it is available at kdkasad@4312fd35350ed8e2550f26d8ae963a7e1fd9d1fe.