Skip to content

Commit c3bbfdb

Browse files
committed
feat(gallery): add support for creating PhotoSwipe gallery from the Instagram
1 parent 66eb6c5 commit c3bbfdb

File tree

4 files changed

+98
-6
lines changed

4 files changed

+98
-6
lines changed
Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
---
2+
Title: Gallery -- Use Instagram
3+
authors: Talha Mansoor
4+
Tags: nuances, images, gallery
5+
Date: 2020-02-06
6+
Slug: photoswipe-gallery-using-instagram
7+
Category: Components
8+
---
9+
10+
## Single Image
11+
12+
<div class="elegant-instagram" data-instagram-id="B7yh4IdItNd"></div>
13+
14+
## Gallery
15+
16+
<div class="elegant-instagram" data-instagram-id="B8L0HaWAq47"></div>

gulpfile.babel.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,7 @@ const minifyJS = () => {
9494
"static/photoswipe/photoswipe-array-from-dom.js",
9595
"static/lunr/lunr.js",
9696
"static/clipboard/clipboard.js",
97+
"static/js/create-instagram-gallery.js",
9798
"static/js/copy-to-clipboard.js",
9899
"static/js/lunr-search-result.js",
99100
"!static/js/elegant.prod.9e9d5ce754.js"

static/js/create-instagram-gallery.js

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
const convertInstagramToPhotoSwipe = () => {
2+
// inner function to return figure html
3+
// TODO: iranzo figure out the caption
4+
const getFigureHTML = (image, height, width, thumbnail) => `
5+
<figure
6+
itemprop="associatedMedia"
7+
itemscope
8+
itemtype="http://schema.org/ImageObject"
9+
>
10+
<a
11+
href="${image}"
12+
itemprop="contentUrl"
13+
data-size="${width}x${height}"
14+
>
15+
<img
16+
src="${thumbnail}"
17+
itemprop="thumbnail"
18+
alt="Image description"
19+
/>
20+
</a>
21+
<figcaption itemprop="caption description">
22+
Placeholder image from Unsplash
23+
</figcaption>
24+
</figure>
25+
`;
26+
27+
// Get div.elegant-instagram
28+
document.querySelectorAll(".elegant-instagram").forEach(ele => {
29+
// Get instagram-id
30+
const instagramId = ele.dataset.instagramId;
31+
32+
fetch(`https://www.instagram.com/p/${instagramId}/?__a=1`)
33+
.then(response => {
34+
response.json().then(json => {
35+
// Get Original image from the json
36+
const level1 = json.graphql.shortcode_media;
37+
38+
let divHTML = `<div
39+
class="elegant-gallery"
40+
itemscope
41+
itemtype="http://schema.org/ImageGallery"
42+
>`;
43+
44+
if (
45+
level1.edge_sidecar_to_children &&
46+
level1.edge_sidecar_to_children.edges.length > 0
47+
) {
48+
// It is more than one images
49+
level1.edge_sidecar_to_children.edges.forEach(edge => {
50+
// TODO: iranzo add figure
51+
});
52+
} else {
53+
const origImage = level1.display_url;
54+
const height = level1.dimensions.height;
55+
const width = level1.dimensions.width;
56+
const thumbnail = level1.display_resources[0].src;
57+
divHTML += getFigureHTML(origImage, height, width, thumbnail);
58+
}
59+
60+
// Close div
61+
divHTML += `</div>`;
62+
63+
// Replace ele with the div
64+
ele.innerHTML = divHTML;
65+
ele.replaceWith(ele.children[0]);
66+
67+
// Trigger PhotoSwipe
68+
initPhotoSwipeFromDOM(".elegant-gallery");
69+
});
70+
})
71+
.catch(err => console.error("Failed", err));
72+
});
73+
};
74+
75+
convertInstagramToPhotoSwipe();

static/js/elegant.prod.9e9d5ce754.js

Lines changed: 6 additions & 6 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)