atomjoy/parsedown-media

Create audio, video, embed video and image gallery with slider from Markdown file.

v1.0 2026-05-05 12:49 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
• markdown-media
• markdown-audio
• markdown-video
• markdown-embed

README

Create audio, video, embed video and image gallery with slider from Markdown file.

Install

composer require atomjoy/parsedown-media

How to Media Files

<?php

$p = new \Atomjoy\Parsedown\ParsedownMedia();

echo $p->text("{Description or empty}(embed)(https://www.youtube.com/embed/y5g3UMaODxo?si=evrMVC4n9DbZ3OQD)");
echo $p->text("{Description or empty}(video)(https://afe019d0-9895-400c-9385-5c25c4775c8e.mdnplay.dev/shared-assets/videos/flower.webm)");
echo $p->text("{Description or empty}(audio)(https://361fc8d0-210a-4e2b-9cff-6f13be3457ad.mdnplay.dev/shared-assets/audio/t-rex-roar.mp3)");

Created Media html

<!-- Embed -->
<div class="media-wrapper">
    <iframe
        width="100%"
        src="https://www.youtube.com/embed/NGsjwNsXE0w?si=eI0hyNw8NE_X61v4"
        style="aspect-ratio: 16/9;"
        frameborder="0"
        referrerpolicy="strict-origin-when-cross-origin"
        allowfullscreen=""
    ></iframe>
    <p class="media-description">Video description goes here.</p>
</div>

<!-- Video -->
<div class="media-wrapper">
    <video controls="" width="100%" style="aspect-ratio: 16/9;">
        <source
            src="https://afe019d0-9895-400c-9385-5c25c4775c8e.mdnplay.dev/shared-assets/videos/flower.webm"
        />
    </video>
    <p class="media-description">Video description goes here.</p>
</div>

How to ParsedownGallery

<?php

$p = new \Atomjoy\Parsedown\ParsedownMedia();

// 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

<?php

$p = new \Atomjoy\Parsedown\ParsedownMedia();

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);