` class should be `elegant-instagram`.
+
+Value of `data-instagram-id` attribute is taken from Instagram post URL, for example:
+
+If URL is
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
+
+
+
+It's code is
+
+```html
+
+```
+
+## Single Image Post
+
+
+
+It's code is
+
+```html
+
+```
+
+## A combined single + multiple post
+
+
+
+It's code is
+
+```html
+
+```
diff --git a/gulpfile.babel.js b/gulpfile.babel.js
index 1a4315d5..b4c84ab7 100644
--- a/gulpfile.babel.js
+++ b/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"
diff --git a/static/js/create-instagram-gallery.js b/static/js/create-instagram-gallery.js
new file mode 100644
index 00000000..73c3bc74
--- /dev/null
+++ b/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
+ ) => `
+
+
+
+
+
+ Photo
+ by
+
+ ${name}
+
+
+
+ `;
+
+ // Get div.elegant-instagram
+ document.querySelectorAll(".elegant-instagram").forEach(ele => {
+ // Get instagram-id
+ const instagramIds = ele.dataset.instagramId;
+ let divHTML = `
`;
+ 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 += `
`;
+
+ // Replace ele with the div
+ ele.innerHTML = divHTML;
+ ele.replaceWith(ele.children[0]);
+
+ // Trigger PhotoSwipe
+ initPhotoSwipeFromDOM(".elegant-gallery");
+ }
+ );
+ });
+ });
+};
+
+convertInstagramToPhotoSwipe();
diff --git a/static/js/elegant.prod.9e9d5ce754.js b/static/js/elegant.prod.9e9d5ce754.js
index cd25019d..9ba7be8d 100644
--- a/static/js/elegant.prod.9e9d5ce754.js
+++ b/static/js/elegant.prod.9e9d5ce754.js
@@ -1,8 +1,8 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t():"function"==typeof define&&define.amd?define(t):t()}(0,(function(){"use strict";var e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},t=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},n=function(){function e(e,t){for(var n=0;n
>0),g="addEventListener",v="attached",x="Callback",b="detached",w="extends",T="attributeChanged"+x,E="connected"+x,C="disconnected"+x,L="created"+x,S="ADDITION",k="REMOVAL",I="DOMAttrModified",M="DOMContentLoaded",O="<",_="=",A=/^[A-Z][A-Z0-9]*(?:-[A-Z0-9]+)+$/,P=["ANNOTATION-XML","COLOR-PROFILE","FONT-FACE","FONT-FACE-SRC","FONT-FACE-URI","FONT-FACE-FORMAT","FONT-FACE-NAME","MISSING-GLYPH"],D=[],F=[],R="",N=r.documentElement,Q=D.indexOf||function(e){for(var t=this.length;t--&&this[t]!==e;);return t},H=i.prototype,j=H.hasOwnProperty,z=H.isPrototypeOf,B=i.defineProperty,Z=[],V=i.getOwnPropertyDescriptor,U=i.getOwnPropertyNames,q=i.getPrototypeOf,W=i.setPrototypeOf,K=!!i.__proto__,$="__dreCEv1",G=t.customElements,Y=!/^force/.test(n.type)&&!!(G&&G.define&&G.get&&G.whenDefined),X=i.create||i,J=t.Map||function(){var e,t=[],n=[];return{get:function(e){return n[Q.call(t,e)]},set:function(r,i){(e=Q.call(t,r))<0?n[t.push(r)-1]=i:n[e]=i}}},ee=t.Promise||function(e){var t=[],n=!1,r={catch:function(){return r},then:function(e){return t.push(e),n&&setTimeout(i,1),r}};function i(e){for(n=!0;t.length;)t.shift()(e)}return e(i),r},te=!1,ne=X(null),re=X(null),ie=new J,oe=function(e){return e.toLowerCase()},ae=i.create||function e(t){return t?(e.prototype=t,new e):this},se=W||(K?function(e,t){return e.__proto__=t,e}:U&&V?function(){function e(e,t){for(var n,r=U(t),i=0,o=r.length;i1)&&Ke(this)}}}),de(a,T,{value:function(e){-1