Skip to content

Commit

Permalink
feat(gallery): add support for the Instagram album with multiple images
Browse files Browse the repository at this point in the history
Signed-off-by: Pablo Iranzo Gómez <Pablo.Iranzo@gmail.com>
  • Loading branch information
iranzo authored and talha131 committed Jun 13, 2020
1 parent c3bbfdb commit cd567cf
Show file tree
Hide file tree
Showing 4 changed files with 84 additions and 22 deletions.
2 changes: 2 additions & 0 deletions .yaspeller.json
Expand Up @@ -58,6 +58,8 @@
"gulpjs",
"Gómez",
"https",
"instagram",
"Instagram",
"iOS",
"iranzo",
"Jinja",
Expand Down
45 changes: 45 additions & 0 deletions 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>
16 changes: 0 additions & 16 deletions documentation/content/Components/photoswipe-instagramp-gallery.md

This file was deleted.

43 changes: 37 additions & 6 deletions 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
Expand All @@ -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>
`;
Expand All @@ -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
Expand Down

0 comments on commit cd567cf

Please sign in to comment.