Skip to content
Grav 2.0 is officially stable. Read the announcement →
Archive

Figure with caption

Started by Muut Archive 11 years ago · 9 replies · 1871 views
11 years ago

Is it possible to render an image with caption like this?

TXT

<figure>
    <img src='image.jpg' alt='title' />
    <figcaption>Caption goes here</figcaption>
</figure>
---
11 years ago

You would have to just enter that html in the markdown. Alternatively you could create a simple plugin or a shortcode (for shortcode plugin) to do it.

11 years ago

OK, thanks. I'll explore the options. I plan to move a few Wordpress sites to Grav and I'm having fun with it. I don't think I'm going to miss Wordpress...

10 years ago

MultiMarkdown and Pandoc turn Markdown images that exist alone in their own paragraph into figure>img+figcaption, while keeping inline images as the standard img.

Is there any (easy) way of swapping the Parsedown for any of those Markdown parsers? I read the suggestion about using [the Shortcakes plugin](https://github.com/sommerregen/grav-plugin-shortcodes, but I had rather stick to public markdown syntax (even if it is a specific flavor) if I can.

10 years ago

Alternatively, you can save some time and use the ImgCaptions-plugin which:

Wraps images in <figure> and captions in <figcaption> based on the title-attribute of the img-element.

10 years ago

Unfortunately ImgCaptions converts all images, instead of only those in their own paragraphs. figure is a block-level element and therefore not appropriate for inline images. Converting only the former is the behavior of Multimarkdown & Pandoc. I have added this feature request as an issue in the plugin’s repository.

10 years ago

Ignore my last message. ImgCaptions does indeed do its thing only on images in their own pararaphs, not on inline images. I was misled by the theme’s CSS that I am using applying display:block to all images (-_-;)

10 years ago

Trying out this plugin https://github.com/OleVik/grav-plugin-imgcaptions It seems it's easy to control which images plugin includes/excludes by including/omitting image title in markdown ![Upload images](upload.jpg "Upload images") would add figcaption, whereas ![Upload images](upload.jpg) would not.

10 years ago

Yes, the <figcaption>-element is only added if a title is found.

Suggested topics

Topic Participants Replies Views Activity
Archive · by Deleted User, 9 years ago
0 1350 9 years ago
Archive · by Muut Archive, 9 years ago
2 935 9 years ago
Archive · by Muut Archive, 9 years ago
2 4061 9 years ago
Archive · by Muut Archive, 9 years ago
1 2948 9 years ago
Archive · by Muut Archive, 9 years ago
3 1119 9 years ago