Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
feat(gallery): add support for creating PhotoSwipe gallery from the I…
…nstagram
  • Loading branch information
talha131 committed Jun 13, 2020
1 parent 66eb6c5 commit c3bbfdb
Show file tree
Hide file tree
Showing 4 changed files with 98 additions and 6 deletions.
16 changes: 16 additions & 0 deletions documentation/content/Components/photoswipe-instagramp-gallery.md
@@ -0,0 +1,16 @@
---
Title: Gallery -- Use Instagram
authors: Talha Mansoor
Tags: nuances, images, gallery
Date: 2020-02-06
Slug: photoswipe-gallery-using-instagram
Category: Components
---

## Single Image

<div class="elegant-instagram" data-instagram-id="B7yh4IdItNd"></div>

## Gallery

<div class="elegant-instagram" data-instagram-id="B8L0HaWAq47"></div>
1 change: 1 addition & 0 deletions gulpfile.babel.js
Expand Up @@ -94,6 +94,7 @@ const minifyJS = () => {
"static/photoswipe/photoswipe-array-from-dom.js",
"static/lunr/lunr.js",
"static/clipboard/clipboard.js",
"static/js/create-instagram-gallery.js",
"static/js/copy-to-clipboard.js",
"static/js/lunr-search-result.js",
"!static/js/elegant.prod.9e9d5ce754.js"
Expand Down
75 changes: 75 additions & 0 deletions static/js/create-instagram-gallery.js
@@ -0,0 +1,75 @@
const convertInstagramToPhotoSwipe = () => {
// inner function to return figure html
// TODO: iranzo figure out the caption
const getFigureHTML = (image, height, width, thumbnail) => `
<figure
itemprop="associatedMedia"
itemscope
itemtype="http://schema.org/ImageObject"
>
<a
href="${image}"
itemprop="contentUrl"
data-size="${width}x${height}"
>
<img
src="${thumbnail}"
itemprop="thumbnail"
alt="Image description"
/>
</a>
<figcaption itemprop="caption description">
Placeholder image from Unsplash
</figcaption>
</figure>
`;

// Get div.elegant-instagram
document.querySelectorAll(".elegant-instagram").forEach(ele => {
// Get instagram-id
const instagramId = ele.dataset.instagramId;

fetch(`https://www.instagram.com/p/${instagramId}/?__a=1`)
.then(response => {
response.json().then(json => {
// Get Original image from the json
const level1 = json.graphql.shortcode_media;

let divHTML = `<div
class="elegant-gallery"
itemscope
itemtype="http://schema.org/ImageGallery"
>`;

if (
level1.edge_sidecar_to_children &&
level1.edge_sidecar_to_children.edges.length > 0
) {
// It is more than one images
level1.edge_sidecar_to_children.edges.forEach(edge => {
// TODO: iranzo add figure
});
} else {
const origImage = level1.display_url;
const height = level1.dimensions.height;
const width = level1.dimensions.width;
const thumbnail = level1.display_resources[0].src;
divHTML += getFigureHTML(origImage, height, width, thumbnail);
}

// Close div
divHTML += `</div>`;

// Replace ele with the div
ele.innerHTML = divHTML;
ele.replaceWith(ele.children[0]);

// Trigger PhotoSwipe
initPhotoSwipeFromDOM(".elegant-gallery");
});
})
.catch(err => console.error("Failed", err));
});
};

convertInstagramToPhotoSwipe();
12 changes: 6 additions & 6 deletions static/js/elegant.prod.9e9d5ce754.js

Large diffs are not rendered by default.

0 comments on commit c3bbfdb

Please sign in to comment.