diff --git a/.yaspeller.json b/.yaspeller.json
index d9a94bd3..f032190a 100644
--- a/.yaspeller.json
+++ b/.yaspeller.json
@@ -58,6 +58,8 @@
"gulpjs",
"Gómez",
"https",
+ "instagram",
+ "Instagram",
"iOS",
"iranzo",
"Jinja",
diff --git a/documentation/content/Components/line-numbers-code-snippet.md b/documentation/content/Components/line-numbers-code-snippet.md
index 2014ca55..033389c0 100644
--- a/documentation/content/Components/line-numbers-code-snippet.md
+++ b/documentation/content/Components/line-numbers-code-snippet.md
@@ -36,7 +36,7 @@ markup. Use `linenos` flag to switch on line numbers for the snippet.
[CodeHilite](https://python-markdown.github.io/extensions/code_hilite/)
extension for syntax highlighting. Setup
CodeHilite
-, then use Shebang `!#` to
+, then use Shebang `#!` to
generate line numbers.
:::markdown
diff --git a/documentation/content/Components/photoswipe-instagram-gallery.md b/documentation/content/Components/photoswipe-instagram-gallery.md
new file mode 100644
index 00000000..4997a5e1
--- /dev/null
+++ b/documentation/content/Components/photoswipe-instagram-gallery.md
@@ -0,0 +1,48 @@
+---
+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
+
+```
+
+`
` 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
+
+```
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/css/links.css b/static/css/links.css
index b4225b6e..d63d425d 100644
--- a/static/css/links.css
+++ b/static/css/links.css
@@ -1,6 +1,3 @@
-article p:not(#list-of-translations):not(#post-share-links) a:not(.ampl),
-article ol a:not(.ampl),
-blockquote a:not(.ampl),
article
div.article-content
ul:not(.articles-timeline):not(.related-posts-list)
@@ -44,8 +41,7 @@ div.recent-posts-posted a {
text-decoration: none;
}
}
-#lunr-search-result > div.lunr-search-result-item > h4 > a,
-a.ampl {
+#lunr-search-result > div.lunr-search-result-item > h4 > a {
color: royalblue;
display: inline-block;
position: relative;
diff --git a/static/js/create-instagram-gallery.js b/static/js/create-instagram-gallery.js
new file mode 100644
index 00000000..9cd45953
--- /dev/null
+++ b/static/js/create-instagram-gallery.js
@@ -0,0 +1,116 @@
+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 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 = `