https://github.com/atomjoy/parsedown-gallery
Parsedown image gallery markdown.
https://github.com/atomjoy/parsedown-gallery
Last synced: 2 months ago
JSON representation
Parsedown image gallery markdown.
- Host: GitHub
- URL: https://github.com/atomjoy/parsedown-gallery
- Owner: atomjoy
- Created: 2026-04-20T12:27:34.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2026-04-20T12:56:08.000Z (2 months ago)
- Last Synced: 2026-04-20T14:41:57.094Z (2 months ago)
- Language: PHP
- Size: 6.84 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Parsedown image gallery
Create an image gallery from a Markdown file (splide slider).
## Install
```sh
composer require atomjoy/parsedown-gallery
```
## How to ParsedownGallery
Install Parsedown and copy this class to your project.
```php
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
```html
-
-
-
```
## How to ParsedownGallerySplide
Install Parsedown and copy this class to your project.
```php
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
```html
-
-
-
-
-
```
### Add Splide slider plugin and css
```html
/* Required */
onload = (event) => {
new Splide('.splide').mount();
};
.splide {
background: #fafafa;
width: 100%;
height: 400px;
/* aspect-ratio: 16/9; */
}
.splide__image {
object-fit: cover;
width: 100%;
height: 400px;
/* aspect-ratio: 16/9; */
}
```
## Secure input (optional)
```php
$p = new ParsedownGallery();
$p->setSafeMode(true);
```