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

This commit is contained in:
2016-01-22 19:27:34 +00:00
parent 0d0edee3a7
commit ad219ff8cc
18 changed files with 236 additions and 213 deletions

View File

@@ -25,6 +25,20 @@ previous_page: '← Vorige pagina'
next_page: 'Volgende pagina →'
mentioned_in: 'Komt voor in:'
# collections
collections:
gallery:
output: true
permalink: /:collection/:name/
# defaults
defaults:
-
scope:
type: gallery
values:
layout: gallery-list
# other
gems: [jekyll-paginate]
markdown: rdiscount
@@ -33,3 +47,4 @@ rdiscount:
exclude:
- LICENSE
- README
array: []

View File

@@ -1,5 +1,9 @@
<div style="width: {{ include.width }}px;" class="caption">
{% if include.link %}
<a href="{{ include.link }}"><img src="{{ include.image }}" /></a>
{% else %}
<img src="{{ include.image }}" />
{% endif %}
{% if include.text %}
{{ include.text | markdownify | hyphenate }}
{% endif %}

View File

@@ -0,0 +1,11 @@
<div class="list-gallery">
{% for p in site.pages %}
{% if p.layout == 'gallery-photo' and p.gallery == gallery %}
<span itemprop="image" itemscope itemtype="http://schema.org/Photograph">
<a href="/{{ site.baseurl }}/{{ p.url }}" itemprop="url">
<img alt="Photo: {{ p.title }}" height="200" src="{{ site.asset_prefix }}/gallery/{{ gallery }}/{{ p.name | remove:'.md' }}~200x200.jpg" title="{{ p.title }}" width="200" />
</a>
</span>
{% endif %}
{% endfor %}
</div>

View File

@@ -1,4 +1,7 @@
{% capture path %}gallery/{{ include.gallery }}{% endcapture %}
<div style="line-height:0; padding:4px 0 0 1px;">
{% loopdir path:path match:"*.md" sort:"ordering" %}<a href="/{{ site.baseurl }}/{{ item.fullname }}.html" style="display: inline-block; margin: 3px; text-decoration: none;"><img alt="Photo: {{ item.title }}" height="48" src="{{ site.asset_prefix }}/{{ item.fullname }}~96x96.jpg" title="{{ item.title }}" width="48" style="padding: 1px;" /></a>{% endloopdir %}
{% for p in site.pages %}
{% if p.layout == 'gallery-photo' and p.gallery == include.gallery %}
<a href="/{{ site.baseurl }}/{{ p.url }}" style="display: inline-block; margin: 3px; text-decoration: none;"><img alt="Photo: {{ p.title }}" height="48" src="{{ site.asset_prefix }}/gallery/{{ include.gallery }}/{{ p.name | remove:'.md' }}~96x96.jpg" title="{{ p.title }}" width="48" style="padding: 1px;" /></a>
{% endif %}
{% endfor %}
</div>

View File

@@ -1,4 +0,0 @@
<div class="list-gallery">
{% capture path %}gallery/{{ include.gallery }}{% endcapture %}
{% loopdir path:path match:"*.md" sort:"ordering" %}<span itemprop="image" itemscope itemtype="http://schema.org/Photograph"><a href="/{{ site.baseurl }}/{{ item.fullname }}.html" itemprop="url"><img alt="Photo: {{ item.title }}" height="200" src="{{ site.asset_prefix }}/{{ item.fullname }}~200x200.jpg" title="{{ item.title }}" width="200" /></a></span>{% endloopdir %}
</div>

View File

@@ -1,2 +0,0 @@
{% capture path %}gallery/{{ include.gallery }}{% endcapture %}
{% loopdir path:path match:"*.md" sort:"ordering" %}<span itemprop="image" itemscope itemtype="http://schema.org/Photograph"><a href="/{{ item.fullname }}.html" itemprop="url"><img alt="Photo: {{ item.title }}" src="{{ site.asset_prefix }}/{{ item.fullname }}~640w.jpg" title="{{ item.title }}" width="640" /></a></span>{% endloopdir %}

View File

@@ -1,6 +1,8 @@
{% capture image %}/asset/gallery/{{ include.album }}/{{ include.photo }}~640w.jpg{% endcapture %}
{% capture image %}/asset/gallery/{{ include.gallery }}/{{ include.photo }}~640w.jpg{% endcapture %}
{% capture link %}/{{ site.baseurl }}/gallery/{{ include.gallery }}/{{ include.photo }}.html{% endcapture %}
{% include caption.html
width='600'
image=image
text=include.text
link=link
%}

View File

@@ -11,32 +11,31 @@ 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 %}

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>

View File

@@ -11,6 +11,10 @@ layout: default
<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>
@@ -54,19 +58,19 @@ layout: default
<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' }}
{% 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>

View File

@@ -1,5 +1,5 @@
{% 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>
@@ -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;">
{% 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 item.sizes %}
{% 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 }}/{{ 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" />
<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. -->

27
_plugins/gallery.rb Normal file
View File

@@ -0,0 +1,27 @@
module Jekyll
class GalleryPage < Page
def initialize(site, gallery, layout)
@site = site
@dir = gallery.url
@name = layout + '.html'
self.process(@name)
self.read_yaml(File.join(site.source, '_layouts'), 'gallery-' + layout + '.html')
self.data.merge!( gallery.data)
self.data['gallery'] = gallery.url.split('/')[2]
self.data['layout'] = 'gallery-' + layout
end
end
class GalleryPageGenerator < Generator
def generate(site)
site.collections['gallery'].docs.each do |gallery|
if gallery.respond_to?('map')
site.pages << GalleryPage.new(site, gallery, 'map')
end
if !gallery.respond_to?('slideshow')
site.pages << GalleryPage.new(site, gallery, 'slideshow')
end
end
end
end
end

View File

@@ -1,100 +0,0 @@
# inspired by
# - https://gist.github.com/jgatjens/8925165
# - http://simon.heimlicher.com/articles/2012/02/01/jekyll-directory-listing
module Jekyll
class Loopdir < Liquid::Block
include Liquid::StandardFilters
Syntax = /(#{Liquid::QuotedFragment}+)?/
def initialize(tag_name, markup, tokens)
@attributes = {}
@attributes['path'] = nil;
@attributes['parse'] = 'true';
@attributes['match'] = '*';
@attributes['sort'] = 'path';
markup.scan(Liquid::TagAttributes) do | key, value |
if 'path' == key
# path can be dynamic to support includes
@attributes['path'] = Liquid::Variable.new(value)
else
@attributes[key] = value.gsub /"(.*)"/, '\1'
end
end
if @attributes['path'].nil?
raise SyntaxError.new("The `path` attribute is missing for `loopdir` tag.")
end
if 'true' == @attributes['parse']
@attributes['parse'] = true
else
@attributes['parse'] = false
end
super
end
def render(context)
context.registers[:loopdir] ||= Hash.new(0)
items = []
path = @attributes['path'].render(context)
Dir.glob(File.join(path, @attributes['match'])).each do |pathname|
if @attributes['parse']
item = {}
content = File.read(pathname)
if content =~ /^(---\s*\n.*?\n?)^(---\s*$\n?)/m
content = $POSTMATCH
begin
item = YAML.load($1)
rescue => e
puts "YAML Exception reading #{name}: #{e.message}"
end
end
item['content'] = content
else
context['item'] = pathname
end
item['name'] = File.basename(pathname, @attributes['match'].sub('*', ''))
item['fullname'] = pathname.gsub(/\.[^\.]+$/, '')
item['path'] = pathname
items.push item
end
sortby = @attributes['sort'].gsub(/^-/, '')
items.sort! do | x, y |
x[sortby] <=> y[sortby]
end
if sortby != @attributes['sort']
items.reverse!
end
context.stack do
result = []
items.each do | item |
context['item'] = item
result << render_all(@nodelist, context)
end
result
end
end
end
end
Liquid::Template.register_tag('loopdir', Jekyll::Loopdir)

View File

@@ -0,0 +1,96 @@
<?php
require __DIR__ . '/../_php/autoload.php';
use Symfony\Component\Yaml\Yaml;
$sOriginalDir = '_gallery.orig';
$sCollectionDir = '_gallery';
$sGalleryDir = 'gallery';
if (!is_dir($sCollectionDir)) {
mkdir($sCollectionDir);
}
if (!is_dir($sGalleryDir)) {
mkdir($sGalleryDir);
}
foreach (glob($sOriginalDir . '/*/index.html') as $sFile) {
$sBasename = basename($sFile, '.md');
$sGallery = basename(dirname($sFile));
printf("%s..\n", $sGallery);
$sDir = sprintf('%s/%s', $sOriginalDir, $sGallery);
$sMapFile = sprintf('%s/map.html', $sDir);
parseFile($sFile, $aYaml, $sContents);
if (strpos($sContents, 'gallery_list') !== false) {
$sContents = null;
}
$aYaml['date'] = date('Y-m-d', $aYaml['date']);
if (strpos($aYaml['title'], ' ') !== false) {
$aYaml['title'] = sprintf('"%s"', $aYaml['title']);
}
if (isset($aYaml['end_date'])) {
$aYaml['end_date'] = date('Y-m-d', $aYaml['end_date']);
}
unset($aYaml['highlight_photo']);
unset($aYaml['layout']);
unset($aYaml['map']);
if (file_exists($sMapFile)) {
parseFile($sMapFile, $aMapYaml, $sContents);
if (isset($aMapYaml['gallery_map'])) {
$aYaml['map'] = $aMapYaml['gallery_map'];
}
}
$sCopyDir = sprintf('%s/%s', $sGalleryDir, $sGallery);
if (!file_exists($sCopyDir)) {
mkdir($sCopyDir);
}
$aYaml['photos'] = [];
$aPhotos = [];
foreach (glob(sprintf('%s/*.md', $sDir)) as $sFile) {
$sName = basename($sFile, '.md');
$aYaml['photos'][] = $sName;
$sTargetFile = sprintf('%s/%s.md', $sCopyDir, $sName);
parseFile($sFile, $aPhotoYaml, $sPhotoContents);
// unset($aPhotoYaml['name']);
if (isset($aPhotoYaml['exif'])) {
$aPhotoYaml = array_merge($aPhotoYaml, $aPhotoYaml['exif']);
unset($aPhotoYaml['exif']);
}
if (isset($aPhotoYaml['album'])) {
$aPhotoYaml['gallery'] = $aPhotoYaml['album'];
unset($aPhotoYaml['album']);
}
if (isset($aPhotoYaml['date'])) {
$aPhotoYaml['date'] = date('Y-m-d H:i:s', $aPhotoYaml['date']);
$aPhotos[$aPhotoYaml['date']] = $sName;
}
writeFile($sTargetFile, $aPhotoYaml, $sPhotoContents);
}
ksort($aPhotos);
// $aYaml['photos'] = array_values($aPhotos);
unset($aYaml['photos']);
$aYaml['highlight'] = current($aPhotos);
$sIndexFile = sprintf('%s/%s.md', $sCollectionDir, $sGallery);
// writeFile($sIndexFile, $aYaml, $sContents);
}
function parseFile($sFile, &$aYaml, &$sContents = null) {
$sContents = file_get_contents($sFile);
$aContents = explode("\n", $sContents);
$aParts = explode('---', implode("\n", array_slice($aContents, 1)));
$aYaml = Yaml::parse(trim(str_replace(" - \n", null, current($aParts))));
$sContents = trim(next($aParts));
}
function writeFile($sFile, $aYaml, $sContents) {
file_put_contents($sFile, '---' . "\n" . yamlDump($aYaml) . '---' . "\n" . $sContents);
}
function yamlDump($aData) {
return str_replace("'", null, Yaml::dump($aData, 4, 2));
}

View File

@@ -244,7 +244,7 @@ $oConsole
$oEndDate = $i > 0 ? max($oEndDate, $aPhoto['date']) : $aPhoto['date'];
if (isset($aPhoto['exif']['Make'])) {
$aMatter['exif']['make'] = $aPhoto['exif']['Make'];
$aMatter['make'] = $aPhoto['exif']['Make'];
if (isset($aPhoto['exif']['Model'])) {
$aMatter['model'] = $aPhoto['exif']['Model'];
}
@@ -295,41 +295,6 @@ $oConsole
$oOutput->writeln(' done');
}
// Write slideshow
$bSlideshow = isset($aGallery['slideshow']) ? $aGallery['slideshow'] : true;
if ($bSlideshow) {
$oOutput->write('<comment>slideshow</comment>');
$aMatter = [
'layout' => 'gallery-slideshow',
'title' => empty($aGallery['title']) ? '' : $aGallery['title']
];
file_put_contents(
$sRenderPath . '/slideshow.html',
'---' . "\n" . yamlDump($aMatter) . '---' . "\n"
);
$oOutput->writeln(' done');
}
// Write map
$bMap = count($aLongitude) > 0 && (isset($aGallery['map']) ? $aGallery['map'] : true);
if ($bMap) {
$oOutput->write('<comment>map</comment>');
$aMatter = [
'layout' => 'gallery-map',
'title' => empty($aGallery['title']) ? '' : $aGallery['title'],
'gallery_map' => [
'latitude' => array_sum($aLatitude) / count($aLatitude),
'longitude' => array_sum($aLongitude) / count($aLongitude),
'zoom' => 8
]
];
file_put_contents(
$sRenderPath . '/map.html',
'---' . "\n" . yamlDump($aMatter) . '---' . "\n"
);
$oOutput->writeln(' done');
}
// Write gallery index
$oOutput->write('<comment>index</comment>');
$aMatter = [
@@ -338,9 +303,11 @@ $oConsole
'highlight_photo' => empty($sHighlight) ? $aPhotos[0]['id'] : $sHighlight,
'date' => $oDate->format('Y-m-d')
];
$bSlideshow = isset($aGallery['slideshow']) ? $aGallery['slideshow'] : true;
if (!$bSlideshow) {
$aMatter['slideshow'] = false;
}
$bMap = count($aLongitude) > 0 && (isset($aGallery['map']) ? $aGallery['map'] : true);
if (!$bMap) {
$aMatter['map'] = false;
}
@@ -360,7 +327,6 @@ $oConsole
'---' . "\n" . yamlDump($aMatter) . '---' . "\n" . $sContents
);
$oOutput->writeln(' done');
}
);

View File

@@ -8,11 +8,13 @@ layout: default
</p>
</section>
<section>
{% loopdir path:"gallery" match:"*/index.html" sort:"-date" %}
{% assign items = site.gallery | sort:'date' | reverse %}
{% for item in items %}
{% if item.ignore == null %}
{% assign name = item.id | split:'/' | last %}
<div style="display: inline-block; height: 274px; margin: 8px 10px 0 0; text-align: center; width: 200px;">
<a href="/{{ site.baseurl }}/{{ item.path|replace:'/index.html','/' }}" style="text-decoration:none;">
<img alt="{{ item.title }}" height="200" src="{{ site.asset_prefix }}/{{ item.path|replace:'/index.html','' }}/{{ item.highlight_photo }}~200x200.jpg" title="{{ item.title }}" width="200" style="border-radius:4px;" />
<a href="/{{ site.baseurl }}/{{ item.collection }}/{{ name }}/" style="text-decoration:none;">
<img alt="{{ item.title }}" height="200" src="{{ site.asset_prefix }}/{{ item.collection }}/{{ name }}/{{ item.highlight }}~200x200.jpg" title="{{ item.title }}" width="200" style="border-radius:4px;" />
<span style="text-decoration:underline;">{{ item.title }}</span>
{% if item.date %}<br />
<small>
@@ -26,5 +28,5 @@ layout: default
</a>
</div>
{% endif %}
{% endloopdir %}
{% endfor %}
</section>

View File

@@ -1,19 +1,16 @@
---
title: Home
layout: default
tags: blog scotland chemistry phd
layout: default
---
<section>
<p>
In dit blog houd ik jullie zo goed mogelijk op de hoogte van mijn belevenissen in St Andrews, Schotland. Daar ben ik in november 2013 begonnen aan een vierjarige PhD in de scheikunde, met als uiteindelijk doel het halen van de doctor titel. Om het voor iedereen leuk te houden zal ik niet uitweiden over ontwikkelingen op academisch gebied. Nostalgicie zijn misschien verknocht aan de <a href="http://csbnw.no-ip.org:38/">oude versie</a> van dit blog.
</p>
</section>
{% for post in paginator.posts %}
{% include post_detail.html %}
{% include post-detail.html %}
{% endfor %}
{% if paginator.total_pages > 1 %}
<section>
<ul class="pager">