atomjoy/parsedown-gallery

Parser for Markdown with gallery slider.

v1.0 2026-04-20 19:28 UTC

Requires

• php: >=7.2
• ext-mbstring: *
• erusev/parsedown: 1.8.0

Requires (Dev)

• phpunit/phpunit: ^7.5|^8.5|^9.6

MIT

• Atomjoy

• parser
• markdown
• markdown-gallery

README

Create an image gallery from a Markdown file (splide slider).

Install

composer require atomjoy/parsedown-gallery

How to ParsedownGallery

Install Parsedown and copy this class to your project.

<?php

$p = new ParsedownGallery();

// Default class .gallery-content
echo $p->text("%%%\nhttps://img.icons8.com/bubbles/100/google-logo.jpg\nhttps://img.icons8.com/bubbles/100/google-logo.jpg\nhttps://img.icons8.com/bubbles/100/google-logo.jpg\n%%%");

// Custom class .gallery-box
echo $p->text("%%%box\nhttps://img.icons8.com/bubbles/100/google-logo.jpg\nhttps://img.icons8.com/bubbles/100/google-logo.jpg\nhttps://img.icons8.com/bubbles/100/google-logo.jpg\n%%%");

Created ParsedownGallery html

<div class="gallery-wrapper">
    <ul class="gallery-content">
        <li>
            <img
                src="https://img.icons8.com/bubbles/100/google-logo.jpg"
                data-image="1"
                class="gallery-image gallery-image-1"
                alt="Image"
            />
        </li>
        <li>
            <img
                src="https://img.icons8.com/bubbles/100/google-logo.jpg"
                data-image="2"
                class="gallery-image gallery-image-2"
                alt="Image"
            />
        </li>
        <li>
            <img
                src="https://img.icons8.com/bubbles/100/google-logo.jpg"
                data-image="3"
                class="gallery-image gallery-image-3"
                alt="Image"
            />
        </li>
    </ul>
</div>

How to ParsedownGallerySplide

Install Parsedown and copy this class to your project.

<?php

$p = new ParsedownGallerySplide();

echo $p->text("&&&\nhttps://img.icons8.com/bubbles/100/google-logo.jpg\nhttps://img.icons8.com/bubbles/100/google-logo.jpg\nhttps://img.icons8.com/bubbles/100/google-logo.jpg\n&&&");

echo $p->text("&&&box\nhttps://img.icons8.com/bubbles/100/google-logo.jpg\nhttps://img.icons8.com/bubbles/100/google-logo.jpg\nhttps://img.icons8.com/bubbles/100/google-logo.jpg\n&&&");

Created ParsedownGallerySplide html

<div class="splide">
    <div class="splide__track">
        <ul class="splide__list">
            <li class="splide__slide">
                <img
                    src="https://img.icons8.com/bubbles/200/google-logo.jpg"
                    data-image="1"
                    class="splide__image splide__image__1"
                    alt="Image"
                />
            </li>
            <li class="splide__slide">
                <img
                    src="https://img.icons8.com/bubbles/200/google-logo.jpg"
                    data-image="2"
                    class="splide__image splide__image__2"
                    alt="Image"
                />
            </li>
            <li class="splide__slide">
                <img
                    src="https://img.icons8.com/bubbles/200/google-logo.jpg"
                    data-image="3"
                    class="splide__image splide__image__3"
                    alt="Image"
                />
            </li>
            <li class="splide__slide">
                <img
                    src="https://img.icons8.com/bubbles/200/google-logo.jpg"
                    data-image="4"
                    class="splide__image splide__image__4"
                    alt="Image"
                />
            </li>
            <li class="splide__slide">
                <img
                    src="https://img.icons8.com/bubbles/200/google-logo.jpg"
                    data-image="5"
                    class="splide__image splide__image__5"
                    alt="Image"
                />
            </li>
        </ul>
    </div>
</div>

Add Splide slider plugin and css

<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script>
<link
    href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css"
    rel="stylesheet"
/>

<script>
    /* Required */
    onload = (event) => {
        new Splide('.splide').mount();
    };
</script>

<style>
    .splide {
        background: #fafafa;
        width: 100%;
        height: 400px;
        /* aspect-ratio: 16/9; */
    }

    .splide__image {
        object-fit: cover;
        width: 100%;
        height: 400px;
        /* aspect-ratio: 16/9; */
    }
</style>

Secure input (optional)

$p = new ParsedownGallery();

$p->setSafeMode(true);