Multipleids for Instagram gallery

.yaspeller.json

@@ -58,6 +58,8 @@
     "gulpjs",
     "Gómez",
     "https",
+    "instagram",
+    "Instagram",
     "iOS",
     "iranzo",
     "Jinja",

documentation/content/Components/photoswipe-instagram-gallery.md

@@ -0,0 +1,61 @@
+---
+Title: Gallery -- Embed Instagram Post
+authors: Talha Mansoor, Pablo Iranzo Gómez
+Tags: nuances, images, gallery, instagram
+Date: 2020-02-07 13:17
+Slug: gallery-embed-instagram-post
+Category: Components
+---
+
+Pelican-Elegant has built in support for Instagram post.
+
+## Article contents
+
+To embed Instagram post, just define a div in this manner,
+
+```html
+<div class="elegant-instagram" data-instagram-id="BwWo35fAcR3"></div>
+```
+
+`<div>` class should be `elegant-instagram`.
+
+Value of `data-instagram-id` attribute is taken from Instagram post URL, for example:
+
+If URL is <https://www.instagram.com/p/OzF8OwS43q/> then set `data-instagram-id` to `OzF8OwS43q`.
+
+Instagram URL can be a single or multiple pictures post.
+
+Here is how Elegant will render your Instagram posts.
+
+## A Post With Multiple Images
+
+<div class="elegant-instagram" data-instagram-id="BwWo35fAcR3"></div>
+
+It's code is
+
+```html
+<div class="elegant-instagram" data-instagram-id="BwWo35fAcR3"></div>
+```
+
+## Single Image Post
+
+<div class="elegant-instagram" data-instagram-id="B7yh4IdItNd"></div>
+
+It's code is
+
+```html
+<div class="elegant-instagram" data-instagram-id="B7yh4IdItNd"></div>
+```
+
+## A combined single + multiple post
+
+<div class="elegant-instagram" data-instagram-id="BwWo35fAcR3,B7yh4IdItNd"></div>
+
+It's code is
+
+```html
+<div
+  class="elegant-instagram"
+  data-instagram-id="BwWo35fAcR3,B7yh4IdItNd"
+></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,115 @@
+const convertInstagramToPhotoSwipe = () => {
+  // inner function to return figure html
+  const getFigureHTML = (
+    image,
+    height,
+    width,
+    thumbnail,
+    username,
+    name,
+    instagramId
+  ) => `
+     <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">
+          <a href="https://www.instagram.com/p/${instagramId}/"
+              target="_blank" rel="nofollow noopener noreferrer"
+          >
+              Photo
+          </a> by
+          <a href="https://www.instagram.com/${username}/"
+              target="_blank" rel="nofollow noopener noreferrer"
+          >
+              ${name}
+          </a>
+        </figcaption>
+     </figure>
+    `;
+
+  // Get div.elegant-instagram
+  document.querySelectorAll(".elegant-instagram").forEach(ele => {
+    // Get instagram-id
+    const instagramIds = ele.dataset.instagramId;
+    let divHTML = `<div
+                          class="elegant-gallery"
+                          itemscope
+                          itemtype="http://schema.org/ImageGallery"
+                        >`;
+    instagramIds.split(",").forEach(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;
+            const username = level1.owner.username;
+            const name = level1.owner.full_name;
+
+            if (
+              level1.edge_sidecar_to_children &&
+              level1.edge_sidecar_to_children.edges.length > 0
+            ) {
+              // It is more than one image
+              level1.edge_sidecar_to_children.edges.forEach(edge => {
+                const origImage = edge.node.display_url;
+                const height = edge.node.dimensions.height;
+                const width = edge.node.dimensions.width;
+                const thumbnail = edge.node.display_resources[0].src;
+
+                divHTML += getFigureHTML(
+                  origImage,
+                  height,
+                  width,
+                  thumbnail,
+                  username,
+                  name,
+                  instagramId
+                );
+              });
+            } 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,
+                username,
+                name,
+                instagramId
+              );
+            }
+          });
+
+          // Close div
+          divHTML += `</div>`;
+
+          // Replace ele with the div
+          ele.innerHTML = divHTML;
+          ele.replaceWith(ele.children[0]);
+
+          // Trigger PhotoSwipe
+          initPhotoSwipeFromDOM(".elegant-gallery");
+        }
+      );
+    });
+  });
+};
+
+convertInstagramToPhotoSwipe();