Improve Image gallery

.yaspeller.json

@@ -59,6 +59,9 @@
     "Gómez",
     "https",
     "iOS",
+    "instagram",
+    "Instagram",
+    "instagram_id",
     "iranzo",
     "Jinja",
     "jinja2",

documentation/content/Supported Plugins/instagram.md

@@ -0,0 +1,54 @@
+---
+Title: Creating a Photo Gallery Article from Instagram post
+Tags: pelican-theme, pelican-plugin, photo gallery, instagram
+Category: Supported Plugins
+Date: 2020-01-27 17:40
+Slug: how-to-use-the-instragram-plugin
+Subtitle:
+Summary: Elegant can be configured to provide a simple display of pictures.
+Keywords: photos, gallery, photogallery, instagram
+Authors: Pablo Iranzo Gómez
+---
+
+[TOC]
+
+Similar to the use case defined in [Photogallery]({filename}photogallery.md), Pelican has code in place for showing instragram galleries.
+
+## Article contents
+
+To enable the plugin, just define a similar div inside your article for each gallery:
+
+```yaml
+---
+author: Pablo Iranzo Gómez
+title: Instagram
+tags: python, redken, descuenbot, deal, chollo, bargain, rabbate, soldes
+date: 2020-01-27 00:35:00 +0100
+comments: true
+category: blog
+description:
+lang: en
+---
+Before div
+
+<div id="photoswipe-instagram" class="photoswipe-gallery" data-gallery-id="BwWo35fAcR3" itemscope itemtype="http://schema.org/ImageGallery">
+<div></div>
+</div>
+After div
+
+<div id="photoswipe-instagram" class="photoswipe-gallery" data-gallery-id="B71YHQ6DugB" itemscope itemtype="http://schema.org/ImageGallery">
+<div></div>
+</div>
+```
+
+For reference, the `data-gallery-id` is taken from Instagram picture URL, for example:
+
+`https://www.instagram.com/p/OzF8OwS43q/` will mean adding to the div the parameter `data-gallery-id=OzF8OwS43q`.
+
+To get it shown on the article.
+
+No other plugin settings must be configured or modified at this time.
+
+!!! hint "data-gallery-id defines either picture or set of pictures"
+
+    Note that `data-gallery-id` is the part in the url of a post, that can be a single or multiple pictures 'post' and in both case the library will show them.

templates/article.html

@@ -29,6 +29,109 @@
 {% endblock head_links %}
 
 {% block content %}
+    <script type='text/javascript'>
+        function getgram(pic) {
+            // This function grabs from instagram the data about images and returns HTML to show it in photoswipe
+            var mypics = []
+            var request = new XMLHttpRequest();
+            var data = "";
+            request.open('GET', `https://www.instagram.com/p/${pic}/?__a=1`, true);
+
+            request.onload = function() {
+            if (this.status >= 200 && this.status < 400) {
+                // Success!
+                data = JSON.parse(this.response);
+                checkData(data);
+            } else {
+                // We reached our target server, but it returned an error
+                data = undefined;
+                console.log("Failure when loading instagram JSON")
+                }
+            }
+
+            request.onerror = function() {
+            // There was a connection error of some sort
+            };
+
+            request.send();
+            function checkData(data) {
+                if (data.graphql.shortcode_media.__typename == 'GraphSidecar'){
+                    // We've a gallery with more than one picture
+                    data.graphql.shortcode_media.edge_sidecar_to_children.edges.forEach(function(item) {
+                    var mynewitem = {};
+                    mynewitem.image = item.node.display_url;
+                    mynewitem.title = "";
+                    mynewitem.height = item.node.dimensions.height;
+                    mynewitem.width = item.node.dimensions.width;
+                    // mynewitem.description = "A detailed description for picture";
+                    // mynewitem.thumb = mynewitem.image;
+                    mynewitem.big = item.node.display_url;
+                    // mynewitem.layer = "<a href='https://www.instagram.com/p/" + pic + "/'>" + "https://www.instagram.com/p/" + pic + "/</a>";
+                    // mynewitem.link = "https://www.instagram.com/p/" + pic + "/";
+                    mynewitem.html = "<figure itemprop='associatedMedia' itemscope itemtype='http://schema.org/ImageObject'><a data-size='" + mynewitem.width + "x"+ mynewitem.height + "' itemprop='contentUrl' href='" + mynewitem.big + "' /'><img itemprop='thumbnail' src='" + mynewitem.image + "' /></a></figure>";
+                    mypics.push(mynewitem);
+                    });
+                } else if (data.graphql.shortcode_media.__typename == 'GraphImage'){
+                    // Post with single picture
+                    var mynewitem = {};
+                    mynewitem.image = data.graphql.shortcode_media.display_url;
+                    mynewitem.title = "<a href='https://www.instagram.com/p/" + pic + "/'>" + "https://www.instagram.com/p/" + pic + "/</a>";
+                    mynewitem.height = data.graphql.shortcode_media.dimensions.height;
+                    mynewitem.width = data.graphql.shortcode_media.dimensions.width;
+                    // mynewitem.description = "A detailed description for picture";
+                    // mynewitem.thumb = mynewitem.image;
+                    mynewitem.big = mynewitem.image;
+                    // mynewitem.layer = "<a href='https://www.instagram.com/p/" + pic + "/'>" + "https://www.instagram.com/p/" + pic + "/</a>";
+                    // mynewitem.link = "https://www.instagram.com/p/" + pic + "/";
+                    mypics.push(mynewitem);
+                }
+
+                    var myhtml = "";
+                    mypics.forEach(function(item){
+                        myhtml = myhtml + item.html;
+                        });
+                    if (myhtml) {
+                        myhtml = '<div>' + myhtml + '</div>';
+                    }
+
+                    // Set innerHTML after we have got the result
+
+                    document.querySelectorAll('#photoswipe-instagram').forEach(function(divisor){
+                        mygalleryid = divisor.getAttribute('data-gallery-id');
+                        if (mygalleryid === pic) {
+                            divisor.innerHTML = myhtml;
+                            }
+                        });
+                }
+        }
+
+        function updategalleries(){
+            document.querySelectorAll('#photoswipe-instagram').forEach(function(divisor){
+                mygalleryid = divisor.getAttribute('data-gallery-id');
+                if (mygalleryid){
+                    getgram(mygalleryid);
+                   }
+                })
+            }
+
+        function ready(fn) {
+           if (document.readyState != 'loading')
+                fn();
+            else if (document.addEventListener)
+                document.addEventListener('DOMContentLoaded', fn);
+            else
+                document.attachEvent('onreadystatechange', function() {
+            if (document.readyState != 'loading')
+                fn();
+                });
+            }
+
+        ready(function(){
+            updategalleries();
+        });
+
+    </script>
+
 <article itemscope>
 <div class="row-fluid">
     <header class="page-header span10 offset2">