Elegant integrates with PhotoSwipe to create gallery of images. Here is an example.
To use it, you will have to add raw HTML in your markdown file.
Here is the require HTML with two images in it.
<div
class="elegant-gallery"
itemscope
itemtype="http://schema.org/ImageGallery"
>
<figure
itemprop="associatedMedia"
itemscope
itemtype="http://schema.org/ImageObject"
>
<a
href="https://i.picsum.photos/id/1019/5472/3648.jpg"
itemprop="contentUrl"
data-size="5472x3648"
>
<img
src="https://i.picsum.photos/id/1019/100/100.jpg"
itemprop="thumbnail"
alt="Image description"
/>
</a>
<figcaption itemprop="caption description">
Placeholder image from Unsplash
</figcaption>
</figure>
<figure
itemprop="associatedMedia"
itemscope
itemtype="http://schema.org/ImageObject"
>
<a
href="https://i.picsum.photos/id/101/2621/1747.jpg"
itemprop="contentUrl"
data-size="2621x1747"
>
<img
src="https://i.picsum.photos/id/101/100/100.jpg"
itemprop="thumbnail"
alt="Image description"
/>
</a>
<figcaption itemprop="caption description">
You can write anything in the caption
</figcaption>
</figure>
</div>
Define a div
<div
class="elegant-gallery"
itemscope
itemtype="http://schema.org/ImageGallery"
></div>
Notice the class, elegant-gallery. You should not change it.
Define figure
Place it inside the div defined above.
<figure
itemprop="associatedMedia"
itemscope
itemtype="http://schema.org/ImageObject"
></figure>
Link to your image
Place it inside the figure.
<a
href="https://i.picsum.photos/id/1019/5472/3648.jpg"
itemprop="contentUrl"
data-size="5472x3648"
>
</a>
data-size is important. It should have the correct width and height of the image.
Add the thumbnail
Create a thumbnail of your image and then place link to it inside the <a> you create above.
<img
src="https://i.picsum.photos/id/1019/100/100.jpg"
itemprop="thumbnail"
alt="Image description"
/>
This is it. Your gallery should start working.
Define caption
You can also define the caption of your image using figcaption. You must place it inside the figure tag.
<figcaption
itemprop="caption description"
>
You can write anything in the caption
</figcaption>
You can use HTML inside the figcaption.
Developer Required
Ideally, a Pelican plugin should generate this raw HTML, but at the time of writing, such a plugin does not exist.
If you create such a plugin, then let us know. It will be a big help to thousands of Pelican users.
The plugin, should create a thumbnail of the image, read size of the image, and then generate the required raw HTML, which then gets inserted into
article.content or page.content.
The user should be able to insert more than one galleries in the article, at any place. (Currently, the Photos plugin forces themes to append gallery in the bottom of the article.)
Finally, let the user define gallery images and their captions inside an article in a friendly and easy way. Like, as YAML or JSON inside the markdown.
