markdown-it-gallery

A markdown-it plugin for wrapping a sequence of images with a custom block element.

Usage

Options

• galleryClass: String
• galleryTag: String Default: figure
• imgClass: String
• wrapImagesInLinks: Boolean Default: false
• linkClass: String
• linkTarget: String Link target attribute
• imgTokenType: String Default: image
• linkTokenType: String Default: link
• imageFilterFn: function(token) { ... } => Boolean token argument is a Token instance
• imageSrcFn: function(token) { ... } => String token argument is a Token instance
• linkHrefFn: function(token) { ... } => String token argument is a Token instance

Example

const Md = require('markdown-it');
const galleryPlugin = require('markdown-it-gallery');
 
const md = Md().use(galleryPlugin, {
    galleryClass: 'md-gallery',
    galleryTag: 'figure',
    imgClass: 'md-gallery__image',
    wrapImagesInLinks: true,
    linkClass: 'md-gallery__link',
    linkTarget: '_blank',
    imgTokenType: 'image',
    linkTokenType: 'link',
    imageFilterFn: token => /example.com/.test(token.attrGet('src')),
    imageSrcFn: token => token.attrGet('src').replace(/(\.\w+$)/, '-320x320$1'),
    linkHrefFn: token => token.attrGet('src').replace(/(\.\w+$)/, '-1920x1920$1'),
});
 
/**
 * @param {string} markdown 
 * @returns {string} HTML
 */
function render(markdown) {
    return md.render(markdown);
}

Input markdown:

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 
![Gallery Image 1](http://example.com/image-1.jpg)
![Gallery Image 2](http://example.com/image-2.jpg)
 
Aliquam elit felis, varius non ligula et, vestibulum pulvinar libero.
 
![Gallery Image 3](http://example.com/image-3.jpg)
 
![Filtered Image 3](http://example.net/image-4.jpg)
 
Cras ut rutrum est, sodales porta orci. ![Inline image 1](http://example.com/inline-image-1.jpg) Quisque aliquet ipsum sit amet lacus consequat varius.
 
![Inline image 2](http://example.com/inline-image-2.jpg)
Proin pretium tortor in turpis tristique, in pharetra ipsum maximus.

Output HTML:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
 
<figure class="md-gallery">
    <a href="http://example.com/image-1-1920x1920.jpg" class="md-gallery__link" target="_blank">
        <img src="http://example.com/image-1-320x320.jpg" alt="Gallery Image 1" class="md-gallery__image">
    </a>
    <a href="http://example.com/image-2-1920x1920.jpg" class="md-gallery__link" target="_blank">
        <img src="http://example.com/image-2-320x320.jpg" alt="Gallery Image 2" class="md-gallery__image">
    </a>
</figure>
 
<p>Aliquam elit felis, varius non ligula et, vestibulum pulvinar libero.</p>
 
<figure class="md-gallery">
    <a href="http://example.com/image-3-1920x1920.jpg" class="md-gallery__link" target="_blank">
        <img src="http://example.com/image-3-320x320.jpg" alt="Gallery Image 3" class="md-gallery__image">
    </a>
</figure>
 
<p>
    <img src="http://example.net/image-4.jpg" alt="Filtered Image 3">
</p>
 
<p>
    Cras ut rutrum est, sodales porta orci. <img src="http://example.com/inline-image-1.jpg" alt="Inline image 1"> Quisque aliquet ipsum sit amet lacus consequat varius.
</p>
 
<p>
    <img src="http://example.com/inline-image-2.jpg" alt="Inline image 2">
    Proin pretium tortor in turpis tristique, in pharetra ipsum maximus.
</p>