Skip to content

Commit

Permalink
Move code from base to article
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
iranzo committed Feb 6, 2020
1 parent 460af1a commit ebdebe4
Show file tree
Hide file tree
Showing 2 changed files with 103 additions and 88 deletions.
103 changes: 103 additions & 0 deletions templates/article.html
View file
Expand Up @@ -29,6 +29,109 @@
{% endblock head_links %}

{% block content %}
<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 = []
var request = new XMLHttpRequest();
var data = "";
request.open('GET', `https://www.instagram.com/p/${pic}/?__a=1`, true);

request.onload = function() {
if (this.status >= 200 && this.status < 400) {
// Success!
data = JSON.parse(this.response);
checkData(data);
} else {
// We reached our target server, but it returned an error
data = undefined;
console.log("Failure when loading instagram JSON")
}
}

request.onerror = function() {
// There was a connection error of some sort
};

request.send();
function checkData(data) {
if (data.graphql.shortcode_media.__typename == 'GraphSidecar'){
// We've a gallery with more than one picture
data.graphql.shortcode_media.edge_sidecar_to_children.edges.forEach(function(item) {
var mynewitem = {};
mynewitem.image = item.node.display_url;
mynewitem.title = "";
mynewitem.height = item.node.dimensions.height;
mynewitem.width = item.node.dimensions.width;
// mynewitem.description = "A detailed description for picture";
// mynewitem.thumb = mynewitem.image;
mynewitem.big = item.node.display_url;
// 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 + "/";
mynewitem.html = "<figure itemprop='associatedMedia' itemscope itemtype='http://schema.org/ImageObject'><a data-size='" + mynewitem.width + "x"+ mynewitem.height + "' itemprop='contentUrl' href='" + mynewitem.big + "' /'><img itemprop='thumbnail' src='" + mynewitem.image + "' /></a></figure>";
mypics.push(mynewitem);
});
} else if (data.graphql.shortcode_media.__typename == 'GraphImage'){
// Post with single picture
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.height = data.graphql.shortcode_media.dimensions.height;
mynewitem.width = data.graphql.shortcode_media.dimensions.width;
// 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);
}

var myhtml = "";
mypics.forEach(function(item){
myhtml = myhtml + item.html;
});
if (myhtml) {
myhtml = '<div>' + myhtml + '</div>';
}

// Set innerHTML after we have got the result

document.querySelectorAll('#photoswipe-instagram').forEach(function(divisor){
mygalleryid = divisor.getAttribute('data-gallery-id');
if (mygalleryid === pic) {
divisor.innerHTML = myhtml;
}
});
}
}

function updategalleries(){
document.querySelectorAll('#photoswipe-instagram').forEach(function(divisor){
mygalleryid = divisor.getAttribute('data-gallery-id');
if (mygalleryid){
getgram(mygalleryid);
}
})
}

function ready(fn) {
if (document.readyState != 'loading')
fn();
else if (document.addEventListener)
document.addEventListener('DOMContentLoaded', fn);
else
document.attachEvent('onreadystatechange', function() {
if (document.readyState != 'loading')
fn();
});
}

ready(function(){
updategalleries();
});

</script>

<article itemscope>
<div class="row-fluid">
<header class="page-header span10 offset2">
Expand Down
88 changes: 0 additions & 88 deletions templates/base.html
View file
Expand Up @@ -107,94 +107,6 @@
<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 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 = []
var request = new XMLHttpRequest();
request.open('GET', `https://www.instagram.com/p/${pic}/?__a=1`, true);

request.onload = function() {
if (this.status >= 200 && this.status < 400) {
// Success!
var data = JSON.parse(this.response);
} else {
// We reached our target server, but it returned an error
}
};

request.onerror = function() {
// There was a connection error of some sort
};

request.send();
if (data){
data.graphql.shortcode_media.forEach(function(key,val){
if (key == '__typename'){
var items = [];
if (val == 'GraphSidecar'){
data.graphql.shortcode_media.edge_sidecar_to_children.edges.forEach(function( key, val ) {
var mynewitem = {};
mynewitem.image = val.node.display_url;
mynewitem.title = "";
mynewitem.height = val.node.dimensions.height;
mynewitem.width = val.node.dimensions.width;
// mynewitem.description = "A detailed description for picture";
// mynewitem.thumb = mynewitem.image;
mynewitem.big = val.node.display_url;
// 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 + "/";
mynewitem.html = "<figure itemprop='associatedMedia' itemscope itemtype='http://schema.org/ImageObject'><a data-size='" + mynewitem.width + "x"+ mynewitem.height + "' itemprop='contentUrl' href='" + mynewitem.big + "' /'><img itemprop='thumbnail' src='" + mynewitem.image + "' /></a></figure>";
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.height = data.graphql.shortcode_media.dimensions.height;
mynewitem.width = data.graphql.shortcode_media.dimensions.width;
// 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);
}
}
})
}

var myhtml = "";
$.each(mypics, (function(item){
myhtml = myhtml + mypics[item].html;
}));
if (myhtml) {
myhtml = '<div>' + myhtml + '</div>';
}

// Set innerHTML after we have got the result

document.querySelectorAll('#photoswipe-instagram').forEach(function(divisor){
mygalleryid = divisor.getAttribute('data-gallery-id');
if (mygalleryid === pic) {
divisor.innerHTML = myhtml;
}
});
});
}

$(function updategalleries(){
document.querySelectorAll('#photoswipe-instagram').forEach(function(divisor){
mygalleryid = divisor.getAttribute('data-gallery-id');
if (mygalleryid){
getgram(mygalleryid);
}
})})

</script>

<script>
function validateForm(query)
{
Expand Down

0 comments on commit ebdebe4

Please sign in to comment.