mirror of
https://github.com/alrayyes/instagram-hugo-demo-theme
synced 2023-11-13 18:16:41 +00:00
61 lines
3.0 KiB
HTML
61 lines
3.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="author" content="Ryan Kes">
|
|
<meta name="generator" content="Hugo 0.16" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="description" content="A page that demonstrates Hugo working with the Instagram api">
|
|
<meta name="keywords" content="Instagram, Hugo, api, tutorial, demo">
|
|
<meta name="generation-date" content="{{ .Now }}">
|
|
|
|
<title>Instagram Hugo Demo</title>
|
|
<link href="/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
|
|
<link rel="stylesheet" href="/css/style.css" type="text/css"/>
|
|
{{ template "_internal/google_analytics_async.html" . }}
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<a href="https://github.com/alrayyes/instagram-hugo-demo-theme"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/e7bbb0521b397edbd5fe43e7f760759336b5e05f/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677265656e5f3030373230302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png"></a>
|
|
<div class="container-fluid">
|
|
<div class="row text-center">
|
|
<h3 style="color:white;font-family:verdana;">
|
|
<a href="https://www.instagram.com/" target="_new">Instagram</a> <a href="https://gohugo.io/" target="_new">Hugo</a> Demo<br><small><a href="http://ryankes.eu">Ryan Kes</a></small><br><br>
|
|
<a href="https://app.wercker.com/project/byKey/dc30c64139b94a8024dd86e33b9e642b"><img alt="Wercker status" src="https://app.wercker.com/status/dc30c64139b94a8024dd86e33b9e642b/m/master"></a><br><br>
|
|
Design inspired by <a href="http://bootsnipp.com/snippets/featured/image-tiles-full-width" target="_new">Snap TightImage Tiles snippet</a><br>
|
|
See <a href="https://ryankes.eu/post/integrating-instagram-into-your-hugo-site/">blog post</a> for more information
|
|
</h3>
|
|
</div>
|
|
<div class="row">
|
|
{{ $dataJ := getJSON (printf "https://api.instagram.com/v1/users/self/media/recent/?access_token=%s" .Site.Params.access_token) }}
|
|
{{ range $dataJ.data }}
|
|
<a href="{{ .link }}" target="_new">
|
|
|
|
<div class="cover-card col-sm-4" style="background: url({{ .images.standard_resolution.url }}) no-repeat center top;background-size:cover;">
|
|
<p>
|
|
{{ with .caption }}{{ .text }}<br>
|
|
-<br>{{ end }}
|
|
<span class="play-date" data-date="{{ .created_time }}"></span>
|
|
</p>
|
|
</div>
|
|
</a>
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/js/jquery-1.10.2.min.js"></script>
|
|
<script src="/js/bootstrap.min.js"></script>
|
|
<script src="/js/moment.min.js"></script>
|
|
<script>
|
|
$(document).ready(function() {
|
|
$('span.play-date').each(function(i, e) {
|
|
var date = moment.unix($(e).data('date'));
|
|
$(e).html(date.fromNow());
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|