Gatsby-theme-novela: Add an optional caption under images

[freddydumont]

It'd be nice to have to credit the photo author or just to add context to the image. Like this on medium:

[jletey]

Would also be nice to support markdown as well

[brotzky]

Agreed. We have this feature on our own blogs. For example https://www.narative.co/articles/creating-the-new-narative-co-website.

Agreed we should support markdown or HTML and different data sources.

[brotzky]

I think this will be implemented through MDX. Originally I thought of pulling the alt tag but there are cases where you want links and other features to to work within that description.

[kevinra]

I'm not sure if this is the right way but here's how I implemented the image caption.

1. Create Figcaption.tsx under src/@narative/gatsby-theme-novela/components/Figcaption/
   Its content can look something like this:

import styled from "@emotion/styled";

const Figcaption = styled.figcaption`
  padding: 0 10px;
  color: ${p => p.theme.colors.grey};
  font-size: 14px;
`;

export default Figcaption;

1. Create MDX.tsx under src/@narative/gatsby-theme-novela/components/MDX/ to shadow MDX component. Add these two lines somewhere in the code:

import Figcaption from "@components/Figcaption/Figcaption.tsx"
...
figcaption: Figcaption, // Note that this should be under components definition block

1. Use figcaption element inside image div like this to achieve the effect:

<div className="Image__Small">
  <img
    src="./images/article-image-2.jpg"
    title="Logo Title Text 1"
    alt="Alt text"
  />
  <figcaption>This is example image caption. Nice picture by the way!</figcaption>
</div>

This will make it look like this in the example first post in the theme:

[brotzky]

I think that's the best way to implement it as well, @kevinra. Gives you full customizability and takes advantage of the beauty of MDX.

[EmaSuriano]

@brotzky do you think this feature should be implemented using shallowing by each developer or if it should be part of the official theme?

[brotzky]

In this instance you're not shadowing as you're creating the component yourself and not overriding anything from Novela.

The component seems quite simple so maybe it's best to keep it outside and have userland do it like they want :)

But PR welcome to anyone that wants to integrate this into Novela!

[kevinra]

I think it's a good idea to have an image caption feature on Novela theme. An experienced dev can always tweak existing tools like this to fit their needs because they understand the framework. On the other hand, people like me who have limited front end development experience, it's hard to implement such features on their own without lots of Googling and help. Our life can be easier if such features are provided with an example so that we can decide whether to use them or not. After all, I think image caption is commonly seen on any online article.

I can create PR if you guys are interested.

[brotzky]

PR is welcomed <3

If you can, please style it closer to how Medium does it (in the original screenshot above)

[kevinra]

When an image fits the paragraph width, it's fine. There's a problem when the image is narrower. It looks ugly when the text spans wider than the image its describing.

I want to make the figcaption to have the same width as the image but don't know how. Is there a way to match the width of gatsby-resp-image-wrapper on figcaption style?

[brotzky]

I believe we have a set of widths defined here. You could re-use the image classes if you wanted to:
https://github.com/narative/gatsby-theme-novela/blob/master/%40narative/gatsby-theme-novela/src/components/MDX/MDX.tsx#L210

It's not the cleanest implementation right now, but there you should be able to see the breakpoints and max-widths of each image variation.

[kevinra]

Hmm I don't understand your solution. the max-width in MDX.tsx files are the max-width of Image__* container meaning figcaption inherits the same width.

Here's a detailed example of the problem. The small image (let's say A) I have has a width of 360. Image__Small is set to have max-width of 680. Image A is contained by gatsby-resp-image-wrapper with max-width=360px. Now figcaption must have max-width of 360, not 680. How do I achieve this by modifying MDX.tsx?

I was thinking solutions like this but no luck:
https://stackoverflow.com/questions/30686191/how-to-make-image-caption-width-to-match-image-width
https://stackoverflow.com/questions/37442430/limiting-caption-to-width-of-the-image

[imprashast]

When an image fits the paragraph width, it's fine. There's a problem when the image is narrower. It looks ugly when the text spans wider than the image its describing.

I want to make the figcaption to have the same width as the image but don't know how. Is there a way to match the width of gatsby-resp-image-wrapper on figcaption style?

What do you mean narrower than paragraph? I style the css like this for the class Image__Small and it looks absolutely fine:

This is my css:

  color: ${p => p.theme.colors.grey};
  font-size: 14px;
  text-align: center;
  width: 100%;

[kevinra]

@imprashast Is the image width greater or equal to paragraph width? If not, try expanding the browser width. Please refer to the image below for the problem I'm facing. FYI, I made the figcaption background for easy visualization.

If I shrink the browser width to make it look like yours, it's not bad:

Of course,
a workaround is to avoid using small image but what if I need to place such square image?

[imprashast]

Well, my css still works:

Do you want me to send the PR?

[kevinra]

Interesting. I wonder why my implementation doesn't work :(
Yes it would be great if everyone can benefit from this feature!

[imprashast]

@brotzky Can you give me access to push to the repo?

[brotzky]

@imprashast make a PR, should be the easiest way :)
https://help.github.com/en/github/collaborating-with-issues-and-pull-requests/creating-a-pull-request

(also, we'll want a bit of spacing under the image. From the screenshots it looks a bit too close. mybe 6px)

[imprashast]

Can be closed now 😄