rik/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Move galleries to collection, generate map and slideshow on build, stop using loopdir plugin, update templates accordingly

Browse Source
This commit is contained in:
Rik Veenboer
2016-01-22 19:27:34 +00:00
parent 0d0edee3a7
commit ad219ff8cc
18 changed files with 236 additions and 213 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
_layouts/gallery-list.html
View File

@@ -11,34 +11,33 @@ layout: default
</h1>
</header>
<section class="post-content">
<p>{{ content }}</p>
{{ content }}
{% if false != page.slideshow %}
<a href="slideshow.html">[ slideshow ]</a>
{% endif %}
{% if false != page.slideshow and false != page.map %}
{% if false != page.slideshow and page.map %}
&nbsp;|&nbsp;
{% endif %}
{% if false != page.map %}
{% if page.map %}
<a href="map.html">[ map ]</a>
{% endif %}
{% include gallery_list.html gallery=gallery %}
{% capture list %}
{% for post in site.posts %}
{% if post.content contains gallery %}
<li>
<a href="{{ post.url }}">{{ post.title }}</a>
</li>
{% assign items = site.array %}
{% for p in site.posts %}
{% if p.content contains gallery %}
{% assign items = items | push:p %}
{% endif %}
{% endfor %}
{% endcapture %}
{% if list %}
{% if items | size > 0 %}
<p>{{ site.mentioned_in }}</p>
<ul>
{{ list }}
{% for item in items %}
<li><a href="{{ item.url }}">{{ item.title }}</a></li>
{% endfor %}
</ul>
{% endif %}
{% include gallery-list.html gallery=gallery %}
</section>
{% if false != page.comments %}
{% include disqus.html %}
{% endif %}
</section>
</section>

26
_layouts/gallery-map.html
View File

@@ -1,7 +1,9 @@
---
layout: post
---
{% capture gallery %}{{ page.url|replace:'/map.html',''|remove_first:'/' }}{% endcapture %}
<section class="post-content">
<a href="/{{ site.baseurl }}/gallery/{{ page.gallery }}/">[ list ]</a>
</section>
<div id="googlemap" style="height:400px;margin-top:8px;"></div>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key={{ site.maps }}&amp;sensor=false"></script>
<script type="text/javascript">
@@ -12,22 +14,23 @@ layout: post
var map = new google.maps.Map(
document.getElementById("googlemap"),
{
center : new google.maps.LatLng({{ page.gallery_map.latitude }}, {{ page.gallery_map.longitude }}),
center : new google.maps.LatLng({{ page.map.latitude }}, {{ page.map.longitude }}),
mapTypeId : google.maps.MapTypeId.TERRAIN,
zoom : {{ page.gallery_map.zoom }}
zoom : {{ page.map.zoom }}
}
);
{% loopdir path:gallery match:"*.md" sort:"ordering" %}{% if item.location %}
{% for p in site.pages %}
{% if p.layout == 'gallery-photo' and p.gallery == page.gallery %}
{% if p.location %}
(function () {
var wo = false;
var m = new google.maps.Marker({
position: new google.maps.LatLng({{ item.location.latitude }}, {{ item.location.longitude }}),
position: new google.maps.LatLng({{ p.location.latitude }}, {{ p.location.longitude }}),
map : map,
title : "{{ item.title }}"
title : "{{ p.title }}"
});
var w = new google.maps.InfoWindow({
content: '<div style="margin-bottom:5px;">{{ item.title|replace:"'","\\'" }}</div><a href="/{{ site.baseurl }}/{{ item.fullname }}.html"><img alt="Photo: {{ item.title|replace:"'","\\'" }}" height="200" src="{{ site.asset_prefix }}/{{ item.fullname }}~200x200.jpg" title="{{ item.title|replace:"'","\\'" }}" width="200" /></a>'
content: '<div style="margin-bottom:5px;">{{ p.title|replace:"'","\\'" }}</div><a href="/{{ site.baseurl }}/{{ p.url }}"><img alt="Photo: {{ p.title | replace:"'","\\'" }}" height="200" src="{{ site.asset_prefix }}/gallery/{{ page.gallery }}/{{ p.name | remove:'.md' }}~200x200.jpg" title="{{ p.title|replace:"'","\\'" }}" width="200" /></a>'
});
google.maps.event.addListener(
m,
@@ -38,12 +41,13 @@ layout: post
} else {
w.open(map, m);
}
wo = !wo;
}
);
})();
{% endif %}{% endloopdir %}
{% endif %}
{% endif %}
{% endfor %}
}
);
</script>
</script>

24
_layouts/gallery-photo.html
View File

@@ -5,12 +5,16 @@ layout: default
<header>
<div class="timeline">
{% if page.date %}
<time datetime="{{ page.date|date_to_xmlschema }}" title="{{ page.date|date_to_xmlschema }}"><strong>{{ page.date|date:"%b %d"|upcase }}</strong><br />{{ page.date|date:"%Y" }}</time>
<time datetime="{{ page.date|date_to_xmlschema }}" title="{{ page.date|date_to_xmlschema }}"><strong>{{ page.date | date:"%b %d" | upcase }}</strong><br />{{ page.date | date:"%Y" }}</time>
{% endif %}
{% if page.location %}
<a href="https://maps.google.com/maps?hl=en&amp;ll={{ page.location.latitude }},{{ page.location.longitude }}&amp;t=w&amp;z=12"><img alt="map" height="49" src="https://maps.googleapis.com/maps/api/staticmap?center={{ page.location.latitude }},{{ page.location.longitude }}&amp;zoom=9&amp;size=98x98&amp;sensor=false" title="{{ page.location.title }}" width="49" /></a>
{% endif %}
</div>
<section class="post-content">
<p>{{ content }}</p>
<a href="/{{ site.baseurl }}/gallery/{{ page.gallery }}/">[ list ]</a>
</section>
<ul style="margin-top:0;">
{% if page.previous %}
<li><a href="/{{ site.baseurl }}/gallery/{{ page.gallery }}/{{ page.previous }}.html" rel="prev">&nbsp;&larr;&nbsp;</a></li>
@@ -52,21 +56,21 @@ layout: default
<div style="float:left;width:352px;">
<dl style="margin-top:0;">
<dt>Date</dt>
<dd itemprop="dateCreated" content="{{ page.date|date:'%FT%TZ' }}">{{ page.date|date:'%A, %B %d at %I:%M %p'|replace:' 0',' '|replace:' AM',' am'|replace:' PM',' pm' }}
<dd itemprop="dateCreated" content="{{ page.date|date:'%FT%TZ' }}">{{ page.date | date:'%A, %B %d at %I:%M %p' | replace:' 0',' ' | replace:' AM',' am' | replace:' PM',' pm' }}
{% if page.exif.aperture %}
{% if page.aperture %}
<dt>Camera</dt>
<dd>{{ page.exif.make }} {{ page.exif.model }}</dd>
<dd>{{ page.make }} {{ page.model }}</dd>
{% endif %}
{% if page.exif.aperture %}
{% if page.aperture %}
<dt>Aperture</dt>
<dd>{{ page.exif.aperture }}</dd>
<dd>{{ page.aperture }}</dd>
{% endif %}
{% if page.exif.aperture %}
{% if page.aperture %}
<dt>Exposure</dt>
<dd>{{ page.exif.exposure }}</dd>
<dd>{{ page.exposure }}</dd>
{% endif %}
{% if page.sizes %}
@@ -116,9 +120,5 @@ layout: default
<div style="clear:both;"></div>
</div>
<div class="meta-social screen-only">
<a href="https://twitter.com/share" class="twitter-share-button" data-via="dpb587">Tweet</a>
<div class="g-plusone" data-size="medium" data-width="300"></div>
</div>
</div>
</section>

35
_layouts/gallery-slideshow.html
View File

@@ -1,10 +1,10 @@
{% assign item = site.gallery | where:'name', page.gallery | first %}
<html>
{% capture gallery %}{{ page.url|replace:'/slideshow.html',''|remove_first:'/' }}{% endcapture %}
<head>
<title>{{ page.title }}</title>
<script src="http://ajax.googleapis.com/ajax/libs/mootools/1.5.1/mootools-yui-compressed.js"></script>
<!-- Core CSS file -->
<link rel="stylesheet" href="{{ site.static_prefix }}/photo-swipe/photoswipe.css">
@@ -40,24 +40,27 @@
}
</style>
</head>
<body>
<section>
<h1>{{ page.title }}</h1>
{% loopdir path:gallery match:"*.md" sort:"ordering" %}<div class="photo" style="border-radius:2px;display:inline-block;margin:4px;overflow:hidden;">
{% assign maxsize = 0 %}
{% assign maxref = false %}
{% for size in item.sizes %}
{% if maxsize < size[1].height * size[1].width %}
{% assign maxsize = size[1].height * size[1].width %}
{% assign maxref = size %}
{% endif %}
{% endfor %}
<a href="{{ site.asset_prefix }}/{{ item.fullname }}~{{ maxref[0] }}.jpg" data-size="{{ maxref[1].width }}x{{ maxref[1].height }}">
<img src="{{ site.asset_prefix }}/{{ item.fullname }}~200x200.jpg" height="100" alt="{{ item.title }}" width="100" data-size="200x200" />
{% for p in site.pages %}
{% if p.layout == 'gallery-photo' and p.gallery == page.gallery %}
<div class="photo" style="border-radius:2px;display:inline-block;margin:4px;overflow:hidden;">
{% assign maxsize = 0 %}
{% assign maxref = false %}
{% for size in p.sizes %}
{% if maxsize < size[1].height * size[1].width %}
{% assign maxsize = size[1].height * size[1].width %}
{% assign maxref = size %}
{% endif %}
{% endfor %}
<a href="{{ site.asset_prefix }}/gallery/{{ page.gallery }}/{{ p.name | remove:'.md' }}~{{ maxref[0] }}.jpg" data-size="{{ maxref[1].width }}x{{ maxref[1].height }}">
<img src="{{ site.asset_prefix }}/gallery/{{ page.gallery }}/{{ p.name | remove:'.md' }}~200x200.jpg" height="100" alt="{{ p.title }}" width="100" data-size="200x200" />
</a>
<div class="caption" style="display:none;">{{ item.content }}</div>
</div>{% endloopdir %}
<div class="caption" style="display:none;">{{ p.content }}</div>
</div>
{% endif %}
{% endfor %}
</section>
<!-- Root element of PhotoSwipe. Must have class pswp. -->