Skip to content

Commit ad1bcea

Browse files
talha131talha131
committed
feat(gallery): add support for PhotoSwipe image gallery using raw HTML
Update #567
1 parent f5047d4 commit ad1bcea

19 files changed

Lines changed: 10324 additions & 14 deletions

‎documentation/content/Components/photoswipe-raw-gallery.md‎

Lines changed: 200 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,200 @@
1+
---
2+
Title: Gallery -- Use PhotoSwipe For Your Image Gallery
3+
authors: Talha Mansoor
4+
Tags: nuances, images, gallery
5+
Date: 2020-02-02
6+
comments: false
7+
Slug: photoswipe-gallery-using-raw-html
8+
Category: Components
9+
---
10+
11+
Elegant integrates with [PhotoSwipe](https://photoswipe.com/) to create gallery of images. Here is an example.
12+
13+
<div class="photoswipe-gallery" itemscope itemtype="http://schema.org/ImageGallery">
14+
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
15+
<a href="https://i.picsum.photos/id/1019/5472/3648.jpg" itemprop="contentUrl" data-size="5472x3648">
16+
<img src="https://i.picsum.photos/id/1019/200/200.jpg" itemprop="thumbnail" alt="Image description" />
17+
</a>
18+
<figcaption itemprop="caption description">Placeholder image from Unsplash</figcaption>
19+
</figure>
20+
21+
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
22+
<a href="https://i.picsum.photos/id/101/2621/1747.jpg" itemprop="contentUrl" data-size="2621x1747">
23+
<img src="https://i.picsum.photos/id/101/200/200.jpg" itemprop="thumbnail" alt="Image description" />
24+
</a>
25+
<figcaption itemprop="caption description">You can write anything in the caption</figcaption>
26+
</figure>
27+
28+
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
29+
<a href="https://i.picsum.photos/id/1015/6000/4000.jpg" itemprop="contentUrl" data-size="6000x4000">
30+
<img src="https://i.picsum.photos/id/1015/200/200.jpg" itemprop="thumbnail" alt="Image description" />
31+
</a>
32+
<figcaption itemprop="caption description">You can use <i>HTML</i> <a href="https://picsum.photos/" target="_blank" rel="nofollow noopener noreferrer" >Unsplash</a></figcaption>
33+
</figure>
34+
35+
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
36+
<a href="https://i.picsum.photos/id/127/4032/2272.jpg" itemprop="contentUrl" data-size="4032x2272">
37+
<img src="https://i.picsum.photos/id/127/200/200.jpg" itemprop="thumbnail" alt="Image description" />
38+
</a>
39+
<figcaption itemprop="caption description">Another sample image</figcaption>
40+
</figure>
41+
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
42+
<a href="https://i.picsum.photos/id/103/2592/1936.jpg" itemprop="contentUrl" data-size="2592x1936">
43+
<img src="https://i.picsum.photos/id/103/200/200.jpg" itemprop="thumbnail" alt="Image description" />
44+
</a>
45+
<figcaption itemprop="caption description">Last sample image</figcaption>
46+
</figure>
47+
48+
</div>
49+
50+
To use it, you will have to add raw HTML in your markdown file.
51+
52+
Here is the require HTML with two images in it.
53+
54+
```html
55+
<div
56+
class="photoswipe-gallery"
57+
itemscope
58+
itemtype="http://schema.org/ImageGallery"
59+
>
60+
<figure
61+
itemprop="associatedMedia"
62+
itemscope
63+
itemtype="http://schema.org/ImageObject"
64+
>
65+
<a
66+
href="https://i.picsum.photos/id/1019/5472/3648.jpg"
67+
itemprop="contentUrl"
68+
data-size="5472x3648"
69+
>
70+
<img
71+
src="https://i.picsum.photos/id/1019/100/100.jpg"
72+
itemprop="thumbnail"
73+
alt="Image description"
74+
/>
75+
</a>
76+
<figcaption itemprop="caption description">
77+
Placeholder image from Unsplash
78+
</figcaption>
79+
</figure>
80+
81+
<figure
82+
itemprop="associatedMedia"
83+
itemscope
84+
itemtype="http://schema.org/ImageObject"
85+
>
86+
<a
87+
href="https://i.picsum.photos/id/101/2621/1747.jpg"
88+
itemprop="contentUrl"
89+
data-size="2621x1747"
90+
>
91+
<img
92+
src="https://i.picsum.photos/id/101/100/100.jpg"
93+
itemprop="thumbnail"
94+
alt="Image description"
95+
/>
96+
</a>
97+
<figcaption itemprop="caption description">
98+
You can write anything in the caption
99+
</figcaption>
100+
</figure>
101+
</div>
102+
```
103+
104+
<div class="photoswipe-gallery" itemscope itemtype="http://schema.org/ImageGallery">
105+
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
106+
<a href="https://i.picsum.photos/id/1019/5472/3648.jpg" itemprop="contentUrl" data-size="5472x3648">
107+
<img src="https://i.picsum.photos/id/1019/100/100.jpg" itemprop="thumbnail" alt="Image description" />
108+
</a>
109+
<figcaption itemprop="caption description">Placeholder image from Unsplash</figcaption>
110+
</figure>
111+
112+
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
113+
<a href="https://i.picsum.photos/id/101/2621/1747.jpg" itemprop="contentUrl" data-size="2621x1747">
114+
<img src="https://i.picsum.photos/id/101/100/100.jpg" itemprop="thumbnail" alt="Image description" />
115+
</a>
116+
<figcaption itemprop="caption description">You can write anything in the caption</figcaption>
117+
</figure>
118+
</div>
119+
120+
## Define a `div`
121+
122+
```html
123+
<div
124+
class="photoswipe-gallery"
125+
itemscope
126+
itemtype="http://schema.org/ImageGallery"
127+
>
128+
<div></div>
129+
</div>
130+
```
131+
132+
Notice the class, `photoswipe-gallery`. You should not change it.
133+
134+
## Define `figure`
135+
136+
Place it inside the `div` defined above.
137+
138+
```html
139+
<figure
140+
itemprop="associatedMedia"
141+
itemscope
142+
itemtype="http://schema.org/ImageObject"
143+
></figure>
144+
```
145+
146+
## Link to your image
147+
148+
Place it inside the `figure`.
149+
150+
```html
151+
<a
152+
href="https://i.picsum.photos/id/1019/5472/3648.jpg"
153+
itemprop="contentUrl"
154+
data-size="5472x3648"
155+
>
156+
</a>
157+
```
158+
159+
`data-size` is important. It should have the correct width and height of the image.
160+
161+
## Add the thumbnail
162+
163+
Create a thumbnail of your image and then place link to it inside the `<a>` you create above.
164+
165+
```html
166+
<img
167+
src="https://i.picsum.photos/id/1019/100/100.jpg"
168+
itemprop="thumbnail"
169+
alt="Image description"
170+
/>
171+
```
172+
173+
This is it. Your gallery should start working.
174+
175+
## Define caption
176+
177+
You can also define the caption of your image using `figcaption`. You must place it inside the `figure` tag.
178+
179+
```htmk
180+
<figcaption
181+
itemprop="caption description"
182+
>
183+
You can write anything in the caption
184+
</figcaption>
185+
```
186+
187+
You can use HTML inside the `figcaption`.
188+
189+
!!! Attention "Developer Required"
190+
191+
Ideally, a Pelican plugin should generate this raw HTML, but at the time of writing, such a plugin does not exist.
192+
193+
If you create such a plugin, then [let us know](https://github.com/Pelican-Elegant/elegant/issues). It will be a big help to thousands of Pelican users.
194+
195+
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
196+
`article.content` or `page.content`.
197+
198+
The user should be able to insert more than one galleries in the article, at any place. (Currently, the [Photos plugin](https://github.com/getpelican/pelican-plugins/tree/master/photos) forces themes to append gallery in the bottom of the article.)
199+
200+
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.

‎gulpfile.babel.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,9 @@ const minifyJS = () => {
8888
"static/tipuesearch/tipuesearch_set.js",
8989
"static/tipuesearch/tipuesearch.min.js",
9090
"static/applause-button/applause-button.js",
91+
"static/photoswipe/photoswipe.js",
92+
"static/photoswipe/photoswipe-ui-default.js",
93+
"static/photoswipe/photoswipe-array-from-dom.js",
9194
"!static/js/elegant.prod.js"
9295
])
9396
.pipe(concat("elegant.prod.js"))
@@ -106,6 +109,8 @@ const compileCSS = () => {
106109
return src([
107110
"static/applause-button/applause-button.css",
108111
"static/tipuesearch/tipuesearch.css",
112+
"static/photoswipe/photoswipe.css",
113+
"static/photoswipe/default-skin/default-skin.css",
109114
"static/css/*.css",
110115
"!static/css/elegant.prod.css"
111116
])

‎static/css/default-skin.png‎

547 Bytes
Loading

‎static/css/default-skin.svg‎

Lines changed: 1 addition & 0 deletions
Loading

0 commit comments

Comments
 (0)