Redesign image captions

[kdkasad]

Changes the style of image captions. This creates a distinciton between the title and caption attributes. The former now shows up more prominently than the latter. Both are centered below the image, which resolves #246.

Since there are no pages in the example site with images, I've added one in my fork's exampleSite branch: kdkasad@e7e62d98d4356c57bc9878e7cda8d5048f743f38. Below are screenshots of the various images on that page.

Screenshots

Edit: captions are no longer centered. See this comment for updated screenshots.

Cover image with caption:

Content image with title, caption, and attribution:

Content image with title and caption:

Content image with title:

Content image with caption:

[adityatelange]

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.

[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.

I didn't think of that. Should I make the captions left-aligned as they were before, or should I try to center them to the image, even if the image is smaller than the page?
Or another option is to center the whole figure, so both the image and caption are centered.

[Jarmos-san]

Centering figure makes the most sense here. That way, even if the image is smaller in width than the rest of the page, it won't look weird for the reader.

[adityatelange]

Centering figure makes the most sense here. That way, even if the image is smaller in width than the rest of the page, it won't look weird for the reader.

I am sorry but this is your preference, not everyone wants this

[kdkasad]

Centering figure makes the most sense here. That way, even if the image is smaller in width than the rest of the page, it won't look weird for the reader.

I am sorry but this is your preference, not everyone wants this

I completely understand. I've rebased the code to remove the center-alignment. Captions are now aligned according to the language's direction, which fixes the problems with images that are smaller than the page width. Here are some example images:

Left-to-right language direction

Right-to-left language direction

Right-to-left language direction with small image

[Jarmos-san]

Well, these image orientations works for me too! I wouldn't mind that. Hugo's default formatting for figure just looks bland for PaperMod is what I wanted to say.

Centering it wasn't specifically for my needs, but was rather a suggestion I thought would look nice with the theme. Apologies if my suggestions sounded otherwise.

[adityatelange]

Everything else looks good :)

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication