(feat): Add JS suport for instagram gallery

Signed-off-by: Pablo Iranzo Gómez <Pablo.Iranzo@gmail.com>
Pelican-Elegant · Jan 28, 2020 · c550204 · c550204
1 parent 28bcb85
commit c550204
Show file tree

Hide file tree

Showing 3 changed files with 115 additions and 5 deletions.
diff --git a/.yaspeller.json b/.yaspeller.json
@@ -45,6 +45,7 @@
     "FreeLists",
     "freelists",
     "fucking",
+    "galleriaio",
     "GitHub",
     "github",
     "github.com",
@@ -54,6 +55,8 @@
     "Gómez",
     "https",
     "iOS",
+    "instagram",
+    "Instagram",
     "iranzo",
     "Jinja",
     "jinja2",

diff --git a/documentation/content/Supported Plugins/galleriaio.md b/documentation/content/Supported Plugins/galleriaio.md
@@ -0,0 +1,36 @@
+---
+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: 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: <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: OzF8OwS43q
+```
+
+To get it shown on the article.
+
+No other plugin settings must be configured or modified at this time.
diff --git a/templates/article.html b/templates/article.html
@@ -1,7 +1,7 @@
 {% extends 'base.html' %}
 
 {% block title %}
-{{ article.title|striptags|e }} {%if article.subtitle %} - {{ article.subtitle|striptags|e }} {% endif %} · {{ super() }}
+{{ article.title|striptags|e }} {% if article.subtitle %} - {{ article.subtitle|striptags|e }} {% endif %} · {{ super() }}
 {% endblock title %}
 
 {% block head_description %}
@@ -12,7 +12,7 @@
 
 {% block meta_tags_in_head %}
 {% if article.redirect %}
-<meta http-equiv="refresh" content="0;URL={{ article.redirect}}" />
+<meta http-equiv="refresh" content="0;URL={{ article.redirect }}" />
 {% endif %}
 {{ super() }}
 {% if article.tags or article.category or article.keywords %}
@@ -23,6 +23,22 @@
 {{ smo_metadata(article) }}
 {% endblock meta_tags_in_head %}
 
+{% if article.instagram %}
+<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' %}
@@ -35,7 +51,7 @@
         <h1>
             <a href="{{ SITEURL }}/{{ article.url }}">
                 {{ article.title }}
-                {%if article.subtitle %}
+                {% if article.subtitle %}
                 <small class="subtitle">
                     {{ article.subtitle }}
                 </small>
@@ -73,6 +89,61 @@ <h1>{{ title }}</h1>
             </div>
             {% endif %}
 
+            {% if article.instagram %}
+                <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 }}';
+                $.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 %}
@@ -90,7 +161,7 @@ <h1>{{ title }}</h1>
                 {% if article.prev_article %}
                     {% set ptitle = article.prev_article.title|striptags|e %}
                     {% set pv_title = article.prev_article.title|striptags %}
-                    {%if article.prev_article.subtitle %}
+                    {% if article.prev_article.subtitle %}
                     {% set pv_title = pv_title + ' ' +  '<small class="subtitle">' + article.prev_article.subtitle|striptags + '</small>' %}
                         {% set ptitle = ptitle + ' - ' + article.prev_article.subtitle|e %}
                     {% endif %}
@@ -99,7 +170,7 @@ <h1>{{ title }}</h1>
                 {% if article.next_article %}
                     {% set ntitle = article.next_article.title|striptags|e %}
                     {% set nv_title = article.next_article.title|striptags %}
-                    {%if article.next_article.subtitle %}
+                    {% if article.next_article.subtitle %}
                     {% set nv_title = nv_title + ' ' +  '<small class="subtitle">' + article.next_article.subtitle|striptags + '</small>' %}
                         {% set ntitle = ntitle + ' - ' + article.next_article.subtitle|e %}
                     {% endif %}