Hi,
Using the following code from the Browser console:
1
2
3
4
5
6
7
8
9
10
11
12
13 | console.log(
'<div class="elegant-gallery" itemscope itemtype="http://schema.org/ImageGallery">'
);
var images = $$("img");
for (each in images) {
console.log(`<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="${images[each].src}" itemprop="contentUrl" data-size="4032x3024">
<img src="${images[each].src}" width="403" height="302" itemprop="thumbnail" alt="Image description" />
</a>
<figcaption itemprop="caption description">Image description</figcaption>
</figure>`);
}
console.log("</div>");
|
It will output a copy-paste ready code for integrating in your blog post and leverage the picture gallery.
Warning
Review the data-size to make it match the image size as PhotoSwipe requires it to match image and adjust the figcaption entry.
Like this post? Share on:
Twitter
❄ Facebook
❄ Email
Pablo Iranzo Gómez
opensource enthusiast and Lego fan doing some python simple programs like @redken_bot in telegram, etc