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

Alter photo gallery with direct linking to slideshow

Browse Source
This commit is contained in:
Rik Veenboer
2017-01-17 15:37:00 +00:00
parent 531469c9fe
commit 0b2b339793
7 changed files with 41 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@@ -1,5 +1,7 @@
/private /private
/.jekyll-metadata /.jekyll-metadata
/_asset
/_site
/_python /_python
/_php /_php
/Gemfile.lock /Gemfile.lock

3
_config.yml
View File

@@ -45,4 +45,5 @@ photo_sizes:
- [96, 96] - [96, 96]
exclude: exclude:
- LICENSE - LICENSE
- README - README
array: []

7
_includes/gallery.html
View File

@@ -5,6 +5,11 @@
<a href="/{{ site.baseurl }}/gallery/{{ include.gallery }}/">[ gallery ]</a><br /> <a href="/{{ site.baseurl }}/gallery/{{ include.gallery }}/">[ gallery ]</a><br />
{% endunless %} {% endunless %}
{% for photo in photos %} {% for photo in photos %}
<a href="/{{ site.baseurl }}/{{ photo.url }}" style="display: inline-block; margin: 3px; text-decoration: none;"><img alt="Photo: {{ photo.title }}" height="96" src="{{ site.asset_prefix }}/gallery/{{ include.gallery }}/{{ photo.name | remove:'.md' }}~96x96.jpg" title="{{ photo.title }}" width="96" style="padding: 1px;" /></a> {% if false != gallery.slideshow %}
{% capture url %}{{ include.gallery }}/slideshow.html#{{ photo.name }}{% endcapture %}
{% else %}
{% capture url %}{{ photo.url }}{% endcapture %}
{% endif %}
<a href="/{{ site.baseurl }}/gallery/{{ url }}" style="display: inline-block; margin: 3px; text-decoration: none;"><img alt="Photo: {{ photo.title }}" height="96" src="{{ site.asset_prefix }}/gallery/{{ include.gallery }}/{{ photo.name | remove:'.md' }}~96x96.jpg" title="{{ photo.title }}" width="96" style="padding: 1px;" /></a>
{% endfor %} {% endfor %}
</div> </div>

2
_includes/header.html
View File

@@ -49,7 +49,7 @@
superSearch({ superSearch({
searchFile: '/blog/atom.xml' searchFile: '/blog/atom.xml'
}); });
} }
</script> </script>
</head> </head>
<body class="layout-{{ page.layout }}{% if page.body_class %} {{ page.body_class }}{% endif %}"> <body class="layout-{{ page.layout }}{% if page.body_class %} {{ page.body_class }}{% endif %}">

7
_layouts/gallery-index.html
View File

@@ -45,7 +45,12 @@ layout: default
<div class="list-gallery"> <div class="list-gallery">
{% for photo in page.photos %} {% for photo in page.photos %}
<span itemprop="image" itemscope itemtype="http://schema.org/Photograph"> <span itemprop="image" itemscope itemtype="http://schema.org/Photograph">
<a href="/{{ site.baseurl }}/{{ photo.url }}" itemprop="url"> {% if false != page.slideshow %}
{% capture url %}slideshow.html#{{ photo.name }}{% endcapture %}
{% else %}
{% capture url %}/{{ site.baseurl }}/{{ photo.url }}{% endcapture %}
{% endif %}
<a href="{{ url }}" itemprop="url">
<img alt="Photo: {{ photo.title }}" height="200" src="{{ site.asset_prefix }}/gallery/{{ page.gallery }}/{{ photo.name }}~200x200.jpg" title="{{ photo.title }}" width="200" /> <img alt="Photo: {{ photo.title }}" height="200" src="{{ site.asset_prefix }}/gallery/{{ page.gallery }}/{{ photo.name }}~200x200.jpg" title="{{ photo.title }}" width="200" />
</a> </a>
</span> </span>

8
_layouts/gallery-photo.html
View File

@@ -51,10 +51,14 @@ layout: default
{% else %} {% else %}
{% assign file='640w' %} {% assign file='640w' %}
{% endif %} {% endif %}
{% if false != page.slideshow %}
{% capture url %}slideshow.html#{{ photo.name }}{% endcapture %}
{% else %}
{% capture url %}{{ photo_url }}~{{ file }}.jpg{% endcapture %}
{% endif %}
<p style="text-align: center;"> <p style="text-align: center;">
<a href="{{ photo_url }}~{{ file }}.jpg"><img alt="Photo: {{ photo.title }}" src="{{ photo_url }}~{{ file }}.jpg" style="max-width:630px;" /></a> <a href="{{ url }}"><img alt="Photo: {{ photo.title }}" src="{{ photo_url }}~{{ file }}.jpg" style="max-width:630px;" /></a>
</p> </p>
{% if photo.description %} {% if photo.description %}
<div itemprop="description"> <div itemprop="description">
{{ photo.description }} {{ photo.description }}

28
_layouts/gallery-slideshow.html
View File

@@ -43,8 +43,10 @@
<body> <body>
<section> <section>
<h1>{{ page.title }}</h1> <h1>{{ page.title }}</h1>
{% assign photo_names = site.array %}
{% for photo in page.photos %} {% for photo in page.photos %}
<div class="photo" style="border-radius:2px;display:inline-block;margin:4px;overflow:hidden;"> <div class="photo" style="border-radius:2px;display:inline-block;margin:4px;overflow:hidden;">
{% assign photo_names = photo_names | push:photo.name %}
{% capture photo_url %}{{ site.asset_prefix }}/gallery/{{ page.gallery }}/{{ photo.name }}{% endcapture %} {% capture photo_url %}{{ site.asset_prefix }}/gallery/{{ page.gallery }}/{{ photo.name }}{% endcapture %}
{% if photo.width %} {% if photo.width %}
{% assign width=photo.width %} {% assign width=photo.width %}
@@ -52,17 +54,18 @@
{% assign width=640 %} {% assign width=640 %}
{% endif %} {% endif %}
{% assign sizes=''|split:'' %} {% assign sizes=''|split:'' %}
{% assign height=width %}
{% assign file='640w' %}
{% assign label='640x360' %}
{% for size in site.photo_sizes %} {% for size in site.photo_sizes %}
{% if size[0] == width %} {% if size[0] == width %}
{% assign height=size[1] %} {% assign height=size[1] %}
{% if width != 640 %}
{% capture label %}{{ width }}x{{ height }}{% endcapture %}
{% assign file=label %}
{% endif %}
{% endif %} {% endif %}
{% endfor %} {% endfor %}
{% capture label %}{{ width }}x{{ height }}{% endcapture %}
{% if width == 640 %}
{% assign file='640w' %}
{% else %}
{% assign file=label %}
{% endif %}
<a href="{{ photo_url }}~{{ file }}.jpg" data-size="{{ label }}"> <a href="{{ photo_url }}~{{ file }}.jpg" data-size="{{ label }}">
<img src="{{ photo_url }}~200x200.jpg" height="100" alt="{{ photo.title }}" width="100" data-size="200x200" /> <img src="{{ photo_url }}~200x200.jpg" height="100" alt="{{ photo.title }}" width="100" data-size="200x200" />
</a> </a>
@@ -178,7 +181,6 @@
dom.addEvent('click', function (e) { dom.addEvent('click', function (e) {
openPhotoSwipe(i); openPhotoSwipe(i);
e.preventDefault(); e.preventDefault();
}); });
@@ -190,8 +192,14 @@
mdom : imgdom mdom : imgdom
}); });
}); });
openPhotoSwipe(0); index = 0
var photos = ['{{ photo_names | join:"', '" }}'];
if (window.location.hash) {
var hash = window.location.hash.substring(1)
index = Math.max(photos.indexOf(hash), 0)
}
openPhotoSwipe(index)
}); });
</script> </script>
</body> </body>