Extend gallery functionality, general cleanup

This commit is contained in:
2015-12-20 13:56:21 +00:00
parent 89f2ca8f31
commit 234fe32bb8
22 changed files with 81 additions and 99 deletions

View File

@@ -15,7 +15,7 @@ environment: dev
artifact_commit: dev
artifact_branch: master
asset_prefix: /jekyll/asset
static_prefix: /jekyll/static/dev
static_prefix: /jekyll/static
exclude:
- LICENSE
- README

4
_includes/caption.html Normal file
View File

@@ -0,0 +1,4 @@
<div style="width: {{ include.width }}px;" class="caption">
<img src="{{ include.image }}" {% if include.image-width %}width="{{ include.image-width }}" {% endif %}/>
<p>Een fraaie fles voor een bijzondere whisky.</p>
</div>

View File

@@ -3,7 +3,5 @@
This site will be open-source.
Unless noted, software code is licensed under <a href="http://opensource.org/licenses/GPL-3.0">GPL License</a> and all other content under <a href="http://creativecommons.org/licenses/by/3.0/">CC-BY</a>.
</footer>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<script>(function(){var po=document.createElement('script');po.type='text/javascript';po.async=true;po.src='https://apis.google.com/js/plusone.js';var s=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(po,s);})();</script>
</body>
</html>

4
_includes/gallery.html Normal file
View File

@@ -0,0 +1,4 @@
{% 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 %}
</div>

View File

@@ -1,4 +1,4 @@
<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="/{{ 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 %}
{% 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

@@ -37,9 +37,6 @@
</head>
<body class="layout-{{ page.layout }}{% if page.body_class %} {{ page.body_class }}{% endif %}">
<header>
<!--div class="timeline">
<a href="/"><img alt="" src="" /></a>
</div-->
<ul class="screen-only">
{% if 'dev' == site.environment %}
<li><a href="/{{ site.baseurl }}/private/">private</a></li>

View File

@@ -1,4 +1,6 @@
{% include header.html %}
---
layout: "post"
---
<section itemscope itemtype="http://schema.org/ImageGallery">
<header>
<div class="timeline"></div>
@@ -10,4 +12,3 @@
{{ content }}
</section>
</section>
{% include footer.html %}

View File

@@ -1,4 +1,6 @@
{% include header.html %}
---
layout: "post"
---
<section itemscope itemtype="http://schema.org/Photograph">
<header>
<div class="timeline">
@@ -8,28 +10,22 @@
{% 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 %}
{% if page.code %}
<a href="{{ page.code }}"><img alt="code" height="49" src="/include/icons/code.png" width="49" /></a>
{% endif %}
</div>
<ul style="margin-top:0;">
{% if page.previous %}
<li><a href="{{ page.previous }}.html" rel="prev">&nbsp;&larr;&nbsp;</a></li>
<li><a href="/{{ site.baseurl }}{{ page.previous }}.html" rel="prev">&nbsp;&larr;&nbsp;</a></li>
{% else %}
<li><span class="noanchor">&nbsp;&larr;&nbsp;</span></li>
{% endif %}
{% if page.next %}
<li><a href="{{ page.next }}.html" rel="next">&nbsp;&rarr;&nbsp;</a></li>
<li><a href="/{{ site.baseurl }}{{ page.next }}.html" rel="next">&nbsp;&rarr;&nbsp;</a></li>
{% else %}
<li><span class="noanchor">&nbsp;&rarr;&nbsp;</span></li>
{% endif %}
</ul>
<h1>
<span itemprop="name">{{ page.title }}</span>
{% if page.date %}
<small class="print-only">{{ page.date|date:'%A, %B %d, %Y' }}</small>
{% endif %}
</h1>
</header>
<section class="post-content">
@@ -98,13 +94,13 @@
<div class="meta-navigate screen-only">
{% if page.next %}
<div style="float:right;">
<a href="{{ page.next }}.html" rel="next">Next Photo &raquo;</a>
<a href="/{{ site.baseurl }}{{ page.next }}.html" rel="next">Next Photo &raquo;</a>
</div>
{% endif %}
{% if page.previous %}
<div style="float:left;">
<a href="{{ page.previous }}.html" rel="prev">&laquo; Previous</a>
<a href="/{{ site.baseurl }}{{ page.previous }}.html" rel="prev">&laquo; Previous</a>
</div>
{% endif %}
@@ -119,6 +115,4 @@
<div class="g-plusone" data-size="medium" data-width="300"></div>
</div>
</div>
{% include disqus.html %}
</section>
{% include footer.html %}

View File

@@ -8,7 +8,7 @@ layout: default
<div class="timeline">
<time datetime="{{ post.date|date_to_xmlschema }}"><strong>{{ post.date|date:"%b %d"|upcase }}</strong><br />{{ post.date|date:"%Y" }}</time>
</div>
<h1><a href="{{ post.url }}">{{ post.title }}</a></h1>
<h1><a href="/{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a></h1>
{% if post.description %}
<div class="meta" style="margin-bottom:0;margin-top:0;">{{ post.description }}</div>
{% endif %}

View File

@@ -1,11 +1,11 @@
---
title: 'Galleries'
title: Galleries
layout: default
---
<section>
{% loopdir path:"gallery" match:"*/index.html" sort:"-date" %}
<div style="display:inline-block;height:274px;margin:8px 10px 0 0;text-align:center;width:200px;">
<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;" />
<span style="text-decoration:underline;">{{ item.title }}</span>

View File

@@ -1,38 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<script>
function dynvar() {
var vars = {};
var x = document.location.search.substring(1).split('&');
for (var i in x) {
var z = x[i].split('=',2);
if (!vars[z[0]]) {
vars[z[0]] = unescape(z[1]);
}
}
document.getElementById('doctitle').innerHTML = vars.doctitle;
document.getElementById('paginate').innerHTML = 'page ' + vars.page + ' of ' + vars.topage;
}
</script>
<link href="http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css" />
</head>
<body style="margin:0;" onload="dynvar();">
<div style="border-bottom:#CCCCCC solid 1px;color:#333;font-family:Lato,sans-serif;font-size:12px;height:36px;position:relative;">
<div style="float:left;padding:0 5px 0 4px;"><img alt="DPB" src="http://www.gravatar.com/avatar/5544fe6a05400da5a8957ff29dd6718c.png?s=128" style="border-radius:3px;width:32px;" /></div>
<div style="float:right;margin:3px 3px 0;text-align:right;width:120px;">
<strong id="doctitle">{doctitle}</strong><br />
<span id="paginate" style="color:#666666;display:inline-block;font-size:11px;font-weight:300;padding-right:1px;">page {page} of {topage}</span>
</div>
<div>
<strong style="font-size:15px;">Danny Berger</strong><br />
<a href="http://dpb587.me/" style="color:#787878;font-size:10px;font-weight:300;padding-top:2px;text-decoration:none;">http://dpb587.me</a>
</div>
</div>
</body>
</html>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.2 KiB

View File

Before

Width:  |  Height:  |  Size: 547 B

After

Width:  |  Height:  |  Size: 547 B

View File

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

View File

Before

Width:  |  Height:  |  Size: 866 B

After

Width:  |  Height:  |  Size: 866 B

View File

@@ -52,10 +52,10 @@ body > header {
width: 654px;
}
body > header .meta {
body > header .meta {
margin-bottom: 0;
margin-top: 0;
}
}
header ul {
float: right;
@@ -63,30 +63,30 @@ header ul {
margin: 7px 0 0;
}
header ul li {
header ul li {
display: inline-block;
}
}
header ul li a {
header ul li a {
border-radius: 2px;
color: #CF5406;
display: block;
margin-left: 6px;
padding: 1px 5px 2px 5px;
text-decoration: none;
}
}
header ul li a:hover {
header ul li a:hover {
background-color: #CF5406;
color: #FFFFFF;
}
}
header ul li .noanchor {
header ul li .noanchor {
color: #CCCCCC;
display: block;
margin-left: 6px;
padding: 1px 5px 2px 5px;
}
}
.meta {
color: #333333;
@@ -140,11 +140,11 @@ h1 {
padding: 1px 0;
}
h1 small {
h1 small {
display: block;
font-size: 12px;
font-weight: normal;
}
}
h2 {
border-bottom: #DEDEDE solid 1px;
@@ -176,11 +176,11 @@ section .timeline > * {
margin-bottom: 4px;
}
body.layout-post section .timeline > *,
body.layout-gallery-photo section .timeline > *,
section:hover .timeline > * {
body.layout-post section .timeline > *,
body.layout-gallery-photo section .timeline > *,
section:hover .timeline > * {
opacity: 1;
}
}
article.layout-post section {
padding-bottom: 12px;
@@ -349,3 +349,25 @@ blockquote {
.list-gallery img:hover {
border: #999999 solid 1px !important;
}
.caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
margin: 10px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.caption img {
border: 0;
}
.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}