feat(gallery): add support for creating PhotoSwipe gallery from the I…

…nstagram

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>

gulpfile.babel.js

@@ -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"

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();