feat(gallery): add support for the Instagram album with multiple images

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

.yaspeller.json

@@ -58,6 +58,8 @@
     "gulpjs",
     "Gómez",
     "https",
+    "instagram",
+    "Instagram",
     "iOS",
     "iranzo",
     "Jinja",

documentation/content/Components/photoswipe-instagram-gallery.md

@@ -0,0 +1,45 @@
+---
+Title: Gallery -- Use Instagram
+authors: Talha Mansoor, Pablo Iranzo Gómez
+Tags: nuances, images, gallery, instagram
+Date: 2020-02-06
+Slug: photoswipe-gallery-using-instagram
+Category: Components
+---
+
+Similar to the use case defined in [Photogallery]({filename}photoswipe-raw-gallery.md), Pelican-Elegant has code in place for showing Instagram galleries.
+
+## Article contents
+
+To embed Instagram gallery, just define a div in this manner,
+
+```yaml
+## Multiple image
+<div class="elegant-instagram" data-instagram-id="BwWo35fAcR3"></div>
+
+## Single image
+
+<div class="elegant-instagram" data-instagram-id="B7yh4IdItNd"></div>
+```
+
+For reference, the `data-instagram-id` is taken from Instagram picture URL, for example:
+
+`https://www.instagram.com/p/OzF8OwS43q/` will mean adding to the div the parameter `data-instagram-id=OzF8OwS43q`.
+
+!!! hint "`data-instagram-id` defines either picture or set of pictures"
+
+    Note that `data-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.
+
+!!! danger "`class=elegant-instagram` class"
+
+    Note that `<div>`class must be `elegant-instagram` for the code to work properly, do not change it.
+
+The above `article` code will then render as this:
+
+## Multiple images
+
+<div class="elegant-instagram" data-instagram-id="BwWo35fAcR3"></div>
+
+## Single image
+
+<div class="elegant-instagram" data-instagram-id="B7yh4IdItNd"></div>

static/js/create-instagram-gallery.js

@@ -1,7 +1,14 @@
 const convertInstagramToPhotoSwipe = () => {
   // inner function to return figure html
-  // TODO: iranzo figure out the caption
-  const getFigureHTML = (image, height, width, thumbnail) => `
+  const getFigureHTML = (
+    image,
+    height,
+    width,
+    thumbnail,
+    username,
+    name,
+    instagramId
+  ) => `
      <figure
     itemprop="associatedMedia"
     itemscope
@@ -19,7 +26,7 @@ const convertInstagramToPhotoSwipe = () => {
       />
     </a>
     <figcaption itemprop="caption description">
-      Placeholder image from Unsplash
+      Picture by <a href="https://www.instagram.com/${username}/">${name}</a> available at <a href="https://www.instagram.com/p/${instagramId}/">https://www.instagram.com/p/${instagramId}/</a>
     </figcaption>
   </figure>
     `;
@@ -45,16 +52,40 @@ const convertInstagramToPhotoSwipe = () => {
             level1.edge_sidecar_to_children &&
             level1.edge_sidecar_to_children.edges.length > 0
           ) {
-            // It is more than one images
+            const username = level1.owner.username;
+            const name = level1.owner.full_name;
+            // It is more than one image
             level1.edge_sidecar_to_children.edges.forEach(edge => {
-              //  TODO: iranzo add figure
+              const origImage = edge.node.display_url;
+              const height = edge.node.dimensions.height;
+              const width = edge.node.dimensions.width;
+              const thumbnail = edge.node.display_resources[0].src;
+              divHTML += getFigureHTML(
+                origImage,
+                height,
+                width,
+                thumbnail,
+                username,
+                name,
+                instagramId
+              );
             });
           } else {
             const origImage = level1.display_url;
             const height = level1.dimensions.height;
             const width = level1.dimensions.width;
             const thumbnail = level1.display_resources[0].src;
-            divHTML += getFigureHTML(origImage, height, width, thumbnail);
+            const username = level1.owner.username;
+            const name = level1.owner.full_name;
+            divHTML += getFigureHTML(
+              origImage,
+              height,
+              width,
+              thumbnail,
+              username,
+              name,
+              instagramId
+            );
           }
 
           // Close div