Remove jquery

Signed-off-by: Pablo Iranzo Gómez <[email protected]>
Pelican-Elegant · Feb 5, 2020 · c001766 · c001766
1 parent fc9596e
commit c001766
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 136 deletions.
diff --git a/.yaspeller.json b/.yaspeller.json
@@ -47,7 +47,6 @@
     "FreeLists",
     "freelists",
     "fucking",
-    "galleriaio",
     "GitHub",
     "github",
     "github.com",

diff --git a/documentation/content/2020-01-27-instagram.md b/documentation/content/2020-01-27-instagram.md
diff --git a/documentation/content/Supported Plugins/galleriaio.md b/documentation/content/Supported Plugins/galleriaio.md
diff --git a/documentation/content/Supported Plugins/instagram.md b/documentation/content/Supported Plugins/instagram.md
@@ -0,0 +1,55 @@
+---
+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 instrgram 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
+instagram: B71YHQ6DugB
+---
+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.
diff --git a/templates/article.html b/templates/article.html
@@ -23,22 +23,6 @@
 {{ smo_metadata(article) }}
 {% endblock meta_tags_in_head %}
 
-{% if article.instagram_id %}
-<link type="text/css" rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/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' %}
@@ -89,61 +73,6 @@ <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/[email protected]/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/[email protected]/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 %}

diff --git a/templates/base.html b/templates/base.html
@@ -106,13 +106,14 @@
         {% endif %}
         <script src="//code.jquery.com/jquery.min.js"></script>
         <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
+        <script src="{{ SITEURL }}/theme/js/elegant.prod.2aace21d63.js"></script>
 
         <script src="//code.jquery.com/jquery.min.js"></script>
         <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 = []
-            $.getJSON("https://www.instagram.com/p/" + pic + "/?__a=1", function( data ) {
+            $.getJSON(`https://www.instagram.com/p/${pic}/?__a=1`, function( data ) {
                 $.each(data.graphql.shortcode_media, function(key,val){
                     if (key == '__typename'){
                         var items = [];
@@ -167,7 +168,6 @@
             });
         }
 
-        var pic = 'BwWo35fAcR3';
         $(function updategalleries(){
         document.querySelectorAll('#photoswipe-instagram').forEach(function(divisor){
             mygalleryid = divisor.getAttribute('data-gallery-id');