(feat): Add JS suport for instagram gallery

Signed-off-by: Pablo Iranzo Gómez <Pablo.Iranzo@gmail.com>

.yaspeller.json

@@ -45,6 +45,7 @@
     "FreeLists",
     "freelists",
     "fucking",
+    "galleriaio",
     "GitHub",
     "github",
     "github.com",
@@ -54,6 +55,9 @@
     "Gómez",
     "https",
     "iOS",
+    "instagram",
+    "Instagram",
+    "instagram_id",
     "iranzo",
     "Jinja",
     "jinja2",

documentation/content/Supported Plugins/galleriaio.md

@@ -0,0 +1,40 @@
+---
+Title: Creating a Photo Gallery Article from Instagram post
+Tags: pelican-theme, pelican-plugin, photo gallery, instagram, galleriaio
+Category: Supported Plugins
+Date: 2020-01-27 17:40
+Slug: how-to-use-galleriaio-plugin
+Subtitle:
+Summary: Elegant can be configured to provide a simple display of pictures.
+Keywords: photos, gallery, photogallery, instagram, galleriaio
+Authors: Pablo Iranzo Gómez
+instagram_id: B3ePmL7gd1P
+---
+
+[TOC]
+
+Similar to the use case defined in [Photogallery]({filename}photogallery.md), Pelican uses <https://galleria.io> code to show images from instagram.
+
+## Article Metadata
+
+To enable the plugin, just set a `yaml preamble` entry for instagram like:
+
+```yaml
+instagram_id: <picture ID>
+```
+
+For reference, the `picture ID` is taken from Instagram picture URL, for example:
+
+`https://www.instagram.com/p/OzF8OwS43q/` will mean adding to the headers:
+
+```yaml
+instagram_id: OzF8OwS43q
+```
+
+To get it shown on the article.
+
+No other plugin settings must be configured or modified at this time.
+
+!!! hint "instagram_id defines either picture or set of pictures"
+
+    Note that `instagram_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

@@ -23,6 +23,22 @@
 {{ smo_metadata(article) }}
 {% endblock meta_tags_in_head %}
 
+{% if article.instagram_id %}
+<link type="text/css" rel="stylesheet" href="//cdn.jsdelivr.net/npm/galleria@1.6.1/dist/themes/twelve/galleria.twelve.min.css">
+<style>
+    .galleria { width: 700px; height: 400px; background: #FFFFFF }
+    .galleria-stage {
+        height:450px; <-- set this to any height and i should work :)
+        position: absolute;
+        top: 10px;
+        bottom: 60px;
+        left: 10px;
+        right: 10px;
+        overflow:hidden;}
+    .galleria-errors {display: none;}
+</style>
+{% endif %}
+
 {% block head_links %}
 {{ super() }}
 {% include '_includes/photos_header.html' %}
@@ -73,6 +89,61 @@ <h1>{{ title }}</h1>
             </div>
             {% endif %}
 
+            {% if article.instagram_id %}
+                <div class="galleria">
+                </div>
+                <script src="//code.jquery.com/jquery.min.js"></script>
+                <script src="//cdn.jsdelivr.net/npm/galleria@1.6.1/dist/galleria.min.js"></script>
+
+                <script type='text/javascript'>
+                var mypics = []
+                var pic = '{{ article.instagram_id }}';
+                $.getJSON("https://www.instagram.com/p/" + pic + "/?__a=1", function( data ) {
+                    $.each(data.graphql.shortcode_media, function(key,val){
+                if (key == '__typename'){
+                    var items = [];
+                    if (val == 'GraphSidecar'){
+                        $.each( data.graphql.shortcode_media.edge_sidecar_to_children.edges, function( key, val ) {
+                            var mynewitem = {};
+                            mynewitem.image = val.node.display_url;
+                            mynewitem.title = "<a href='https://www.instagram.com/p/" + pic + "/'>" + "https://www.instagram.com/p/" + pic + "/</a>";
+                            // 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);
+                        });
+                    }
+                    if (val == 'GraphImage'){
+                        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.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);
+                    }
+
+                }
+                    Galleria.loadTheme('https://cdn.jsdelivr.net/npm/galleria@1.6.1/dist/themes/twelve/galleria.twelve.min.js');
+                    Galleria.run('.galleria', {
+                            dataSource: mypics,
+                            autoplay: true,
+                            responsive: true,
+                            maxVideoSize: 1300,
+                            imageCrop: false,
+                            width: 700,
+                            height: 400,
+                            imageTimeout: 1E10,
+                            wait: true,
+                    });
+                })});
+                </script>
+            {% endif %}
+
             {% from '_includes/applause_button.html' import applause_button with context %}
             {{ applause_button(article) }}
             {% from '_includes/share_links.html' import share_links with context %}