commit
9a9701467a
43 changed files with 1206 additions and 0 deletions
@ -0,0 +1 @@ |
|||||
|
.vscode |
||||
@ -0,0 +1,20 @@ |
|||||
|
The MIT License (MIT) |
||||
|
|
||||
|
Copyright (c) 2020 YOUR_NAME_HERE |
||||
|
|
||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy of |
||||
|
this software and associated documentation files (the "Software"), to deal in |
||||
|
the Software without restriction, including without limitation the rights to |
||||
|
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of |
||||
|
the Software, and to permit persons to whom the Software is furnished to do so, |
||||
|
subject to the following conditions: |
||||
|
|
||||
|
The above copyright notice and this permission notice shall be included in all |
||||
|
copies or substantial portions of the Software. |
||||
|
|
||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR |
||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS |
||||
|
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR |
||||
|
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER |
||||
|
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN |
||||
|
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. |
||||
@ -0,0 +1,122 @@ |
|||||
|
# Photo Stream |
||||
|
|
||||
|
A theme to showcase your photo albums, powered by [Hugo](https://gohugo.io). |
||||
|
A live demo is available [at photo-stream.netlify.com](https://photo-stream.netlify.com/). |
||||
|
|
||||
|
## Features |
||||
|
|
||||
|
This theme is basically a port of [maxvoltar's photo-stream theme](https://github.com/maxvoltar/photo-stream). |
||||
|
Thanks to him for this nice creation! |
||||
|
|
||||
|
This theme features: |
||||
|
|
||||
|
* Lazy loading of photos (a photo is downloaded when it appears in the viewport) |
||||
|
* Albums containing photos |
||||
|
* Photos thumbnail are resized to fit 800x800 |
||||
|
* The large version is resized to fit 2048x2048 |
||||
|
* The background is filled with a tint matching the photo |
||||
|
* Keyboard shortcuts for previous / next / back to list |
||||
|
|
||||
|
## Installation |
||||
|
|
||||
|
You can install the theme either as a clone or submodule. |
||||
|
|
||||
|
I recommend the latter. From the root of your Hugo site, type the following: |
||||
|
|
||||
|
```sh |
||||
|
git submodule add https://github.com/nmasse-itix/photo-stream.git themes/photo-stream |
||||
|
git submodule init |
||||
|
git submodule update |
||||
|
``` |
||||
|
|
||||
|
Now you can get updates of this theme in the future by updating the submodule: |
||||
|
|
||||
|
```sh |
||||
|
git submodule update --remote themes/photo-stream |
||||
|
``` |
||||
|
|
||||
|
## Configuration |
||||
|
|
||||
|
After installation, take a look at the `exampleSite` folder inside `themes/photo-stream`. |
||||
|
|
||||
|
To get started, copy the `config.toml` file inside `exampleSite` to the root of your Hugo site: |
||||
|
|
||||
|
```sh |
||||
|
cp themes/photo-stream/exampleSite/config.toml . |
||||
|
``` |
||||
|
|
||||
|
Now edit this file and add your own information. Note that some fields can be omitted. |
||||
|
|
||||
|
## Demo Website |
||||
|
|
||||
|
A live demo is available [at photo-stream.netlify.com](https://photo-stream.netlify.com/) but you can have a look by yourself at the example site. |
||||
|
|
||||
|
```sh |
||||
|
cd themes/photo-stream |
||||
|
./fetch-photos.sh |
||||
|
hugo serve |
||||
|
``` |
||||
|
|
||||
|
## How to create an album |
||||
|
|
||||
|
The theme provides an **archetype** named `album`. |
||||
|
Create a new album with the `hugo new` command. |
||||
|
|
||||
|
```sh |
||||
|
hugo new my-album/index.md -k album |
||||
|
``` |
||||
|
|
||||
|
## How to add photos |
||||
|
|
||||
|
To add photos to an album, simply copy your JPEG files in the album directory, **under content, NOT static!** |
||||
|
|
||||
|
```sh |
||||
|
cp path/to/DCIM_*.jpeg content/my-album/ |
||||
|
``` |
||||
|
|
||||
|
## How to customize an album |
||||
|
|
||||
|
A minimal `index.md` looks like this: |
||||
|
|
||||
|
```yaml |
||||
|
--- |
||||
|
date: "2016-01-01" |
||||
|
title: Animals |
||||
|
- src: '**.jpeg' |
||||
|
--- |
||||
|
``` |
||||
|
|
||||
|
This index file defines an album with a date, a title and instructs to add all JPEG files to the album. |
||||
|
|
||||
|
But a usual `index.md` would include more customization: |
||||
|
|
||||
|
```yaml |
||||
|
--- |
||||
|
date: "2016-01-01" |
||||
|
title: Animals |
||||
|
sort_by: "Exif.Date" |
||||
|
resources: |
||||
|
- src: 'camel.jpeg' |
||||
|
params: |
||||
|
cover: true |
||||
|
- src: '**.jpeg' |
||||
|
- src: '**.jpg' |
||||
|
--- |
||||
|
``` |
||||
|
|
||||
|
This index also specifies: |
||||
|
|
||||
|
* To sort photos by date (specified in the EXIF metadata). |
||||
|
* To also include files with `.jpg` extension. |
||||
|
* To set `camel.jpeg` as the cover photo for the album. |
||||
|
|
||||
|
## Global configuration |
||||
|
|
||||
|
The Date format for the album can be set in your `config.toml`. |
||||
|
|
||||
|
```toml |
||||
|
[params] |
||||
|
album_date_format = "01/2006" |
||||
|
``` |
||||
|
|
||||
|
Check the Go documentation for possible formats: [time.Format](https://golang.org/pkg/time/#Time.Format). |
||||
@ -0,0 +1,19 @@ |
|||||
|
--- |
||||
|
title: "{{ replace .Name "-" " " | title }}" |
||||
|
date: {{ .Date }} |
||||
|
# By default, photos are sorted by filename |
||||
|
sort_by: Name |
||||
|
# But you can sort instead by EXIF date if you prefer |
||||
|
# sort_by: Exif.Date |
||||
|
resources: |
||||
|
# |
||||
|
# You can set the album cover image by setting the param 'cover: true' |
||||
|
# on a photo. |
||||
|
# |
||||
|
# - src: 'IMG_1234.jpeg' |
||||
|
# params: |
||||
|
# cover: true |
||||
|
# |
||||
|
- src: '**.jpeg' |
||||
|
- src: '**.jpg' |
||||
|
--- |
||||
@ -0,0 +1,430 @@ |
|||||
|
* { |
||||
|
padding: 0; |
||||
|
margin: 0; |
||||
|
list-style: none; |
||||
|
font-size: 1em; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
@mixin dark { |
||||
|
@media (prefers-color-scheme: dark) { |
||||
|
@content |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@mixin button { |
||||
|
display: block; |
||||
|
border-radius: 16px; |
||||
|
text-indent: 150%; |
||||
|
overflow: hidden; |
||||
|
white-space: nowrap; |
||||
|
width: 32px; |
||||
|
height: 32px; |
||||
|
background-repeat: no-repeat; |
||||
|
background-position: 8px; |
||||
|
background-size: 16px; |
||||
|
transition: background-color .1s linear; |
||||
|
-webkit-backdrop-filter: blur(20px); |
||||
|
-moz-backdrop-filter: blur(20px); |
||||
|
backdrop-filter: blur(20px); |
||||
|
background-color: rgba(200, 200, 200, .25); |
||||
|
// Disable until Safari supports `prefers-color-scheme` in SVG's |
||||
|
// @include dark { |
||||
|
// background-color: rgba(0, 0, 0, .25); |
||||
|
// } |
||||
|
|
||||
|
&:hover, |
||||
|
&:focus { |
||||
|
background-color: rgba(200, 200, 200, .5); |
||||
|
// Disable until Safari supports `prefers-color-scheme` in SVG's |
||||
|
// @include dark { |
||||
|
// background-color: rgba(0, 0, 0, .5); |
||||
|
// } |
||||
|
} |
||||
|
|
||||
|
&:active { |
||||
|
background-color: rgba(200, 200, 200, .25); |
||||
|
// Disable until Safari supports `prefers-color-scheme` in SVG's |
||||
|
// @include dark { |
||||
|
// background-color: rgba(0, 0, 0, .75); |
||||
|
// } |
||||
|
} |
||||
|
|
||||
|
|
||||
|
} |
||||
|
|
||||
|
body, |
||||
|
html { |
||||
|
min-height: 100%; |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
body { |
||||
|
flex-grow: 1; |
||||
|
font: 16px/24px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; |
||||
|
background: #fff; |
||||
|
color: #2e2f30; |
||||
|
|
||||
|
@include dark { |
||||
|
background: #000; |
||||
|
color: #eee; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// PHOTO GRID |
||||
|
|
||||
|
.grid { |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
position: relative; |
||||
|
align-content: flex-start; |
||||
|
|
||||
|
&:after { |
||||
|
content: ""; |
||||
|
display: block; |
||||
|
flex-grow: 10; |
||||
|
outline: 2px solid #fff; |
||||
|
position: relative; |
||||
|
|
||||
|
@include dark { |
||||
|
outline-color: #000; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.item { |
||||
|
height: 40vh; |
||||
|
flex-grow: 1; |
||||
|
outline: 2px solid #fff; |
||||
|
position: relative; |
||||
|
background-size: 100%; |
||||
|
|
||||
|
@include dark { |
||||
|
outline-color: #000; |
||||
|
} |
||||
|
|
||||
|
img { |
||||
|
max-height: 100%; |
||||
|
min-width: 100%; |
||||
|
min-height: 100%; |
||||
|
width: auto; |
||||
|
object-fit: cover; |
||||
|
display: block; |
||||
|
} |
||||
|
|
||||
|
.open, |
||||
|
.close { |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
left: 0; |
||||
|
text-indent: 150%; |
||||
|
overflow: hidden; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
|
||||
|
.open { |
||||
|
cursor: zoom-in; |
||||
|
background-color: rgba(0, 0, 0, 0); |
||||
|
transition: background-color .15s ease-out; |
||||
|
|
||||
|
&:hover, |
||||
|
&:focus { |
||||
|
background-color: rgba(0, 0, 0, .25); |
||||
|
} |
||||
|
|
||||
|
&:active { |
||||
|
background-color: rgba(0, 0, 0, .5); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.close { |
||||
|
display: none; |
||||
|
cursor: zoom-out; |
||||
|
} |
||||
|
|
||||
|
.full { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
.previous, |
||||
|
.next { |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
bottom: 0; |
||||
|
left: 0; |
||||
|
z-index: 20; |
||||
|
width: 80px; |
||||
|
display: none; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
|
||||
|
span { |
||||
|
@include button; |
||||
|
background-image: url(../img/icon-left.svg); |
||||
|
pointer-events: none; |
||||
|
} |
||||
|
|
||||
|
&:hover, |
||||
|
&:focus { |
||||
|
span { |
||||
|
background-color: rgba(200, 200, 200, .5); |
||||
|
// Disable until Safari supports `prefers-color-scheme` in SVG's |
||||
|
// @include dark { |
||||
|
// background-color: rgba(0, 0, 0, .5); |
||||
|
// } |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&:active { |
||||
|
span { |
||||
|
background-color: rgba(200, 200, 200, .25); |
||||
|
// Disable until Safari supports `prefers-color-scheme` in SVG's |
||||
|
// @include dark { |
||||
|
// background-color: rgba(0, 0, 0, .75); |
||||
|
// } |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.next { |
||||
|
right: 0; |
||||
|
left: auto; |
||||
|
|
||||
|
span { |
||||
|
background-image: url(../img/icon-right.svg); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.name { |
||||
|
display: flex; |
||||
|
position: absolute; |
||||
|
right: 4px; |
||||
|
bottom: 12px; |
||||
|
color: #fff; |
||||
|
text-shadow: #000 0 1px 1px, #000 0 2px 4px; |
||||
|
opacity: 1; |
||||
|
font-size: larger; |
||||
|
margin-right: 12px; |
||||
|
} |
||||
|
|
||||
|
.date { |
||||
|
display: flex; |
||||
|
position: absolute; |
||||
|
left: 4px; |
||||
|
bottom: 12px; |
||||
|
color: #fff; |
||||
|
text-shadow: #000 0 1px 1px, #000 0 2px 4px; |
||||
|
opacity: 1; |
||||
|
margin-left: 12px; |
||||
|
} |
||||
|
|
||||
|
// PHOTO DETAIL |
||||
|
|
||||
|
&.target { |
||||
|
position: fixed; |
||||
|
top: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
left: 0; |
||||
|
height: 100%; |
||||
|
z-index: 10; |
||||
|
background: #fff; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
|
||||
|
@media (prefers-color-scheme: dark) { |
||||
|
background: #000; |
||||
|
} |
||||
|
|
||||
|
.open { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
.close { |
||||
|
display: block; |
||||
|
} |
||||
|
|
||||
|
img { |
||||
|
object-fit: contain; |
||||
|
animation: fade-in .5s ease-out; |
||||
|
} |
||||
|
|
||||
|
.full { |
||||
|
display: flex; |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
left: 0; |
||||
|
animation: fade-in .5s ease-out; |
||||
|
|
||||
|
span { |
||||
|
flex-grow: 1; |
||||
|
background-size: contain; |
||||
|
background-repeat: no-repeat; |
||||
|
background-position: center; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.meta { |
||||
|
display: none !important; |
||||
|
} |
||||
|
|
||||
|
.previous, |
||||
|
.next { |
||||
|
display: flex; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// SOCIAL LINKS |
||||
|
|
||||
|
.links { |
||||
|
position: fixed; |
||||
|
bottom: 24px; |
||||
|
right: 24px; |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
margin-left: 16px; |
||||
|
|
||||
|
li { |
||||
|
margin-left: 8px; |
||||
|
|
||||
|
a { |
||||
|
@include button; |
||||
|
} |
||||
|
|
||||
|
&.github { |
||||
|
a { |
||||
|
background-image: url(../img/icon-github.svg); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&.rss { |
||||
|
a { |
||||
|
background-image: url(../img/icon-rss.svg); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&.link { |
||||
|
a { |
||||
|
text-indent: 0; |
||||
|
width: auto; |
||||
|
font-size: 13px; |
||||
|
line-height: 32px; |
||||
|
text-transform: uppercase; |
||||
|
padding: 0 12px; |
||||
|
color: rgba(0, 0, 0, .75); |
||||
|
font-weight: 600; |
||||
|
text-decoration: none; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 404 |
||||
|
|
||||
|
.four-oh-four { |
||||
|
flex-grow: 1; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
height: 100%; |
||||
|
padding: 64px; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
text-align: center; |
||||
|
|
||||
|
img { |
||||
|
width: 64px; |
||||
|
vertical-align: bottom; |
||||
|
margin-bottom: 24px; |
||||
|
} |
||||
|
|
||||
|
h1 { |
||||
|
font-size: 32px; |
||||
|
line-height: 48px; |
||||
|
font-weight: 700; |
||||
|
} |
||||
|
|
||||
|
p { |
||||
|
margin-bottom: 32px; |
||||
|
} |
||||
|
|
||||
|
a { |
||||
|
@include button; |
||||
|
text-indent: 0; |
||||
|
width: auto; |
||||
|
font-size: 13px; |
||||
|
line-height: 32px; |
||||
|
text-transform: uppercase; |
||||
|
padding: 0 12px; |
||||
|
color: rgba(0, 0, 0, .75); |
||||
|
font-weight: 600; |
||||
|
text-decoration: none; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// RESPONSIVE |
||||
|
|
||||
|
@media (max-aspect-ratio: 1/1) { |
||||
|
.grid { |
||||
|
.item { |
||||
|
height: 30vh; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@media (max-height: 480px) { |
||||
|
.grid { |
||||
|
.item { |
||||
|
height: 80vh; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@media (max-aspect-ratio: 1/1) and (max-width: 480px) { |
||||
|
.grid { |
||||
|
flex-direction: row; |
||||
|
|
||||
|
.item { |
||||
|
height: auto; |
||||
|
width: 100%; |
||||
|
|
||||
|
img { |
||||
|
width: 100%; |
||||
|
height: auto; |
||||
|
} |
||||
|
|
||||
|
.previous, |
||||
|
.next { |
||||
|
width: 25vw; |
||||
|
max-width: auto; |
||||
|
|
||||
|
span { |
||||
|
display: none; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.previous { |
||||
|
cursor: w-resize; |
||||
|
} |
||||
|
|
||||
|
.next { |
||||
|
cursor: e-resize; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// ANIMATIONS |
||||
|
|
||||
|
@keyframes fade-in { |
||||
|
0% { |
||||
|
opacity: 0; |
||||
|
} |
||||
|
100% { |
||||
|
opacity: 1; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1 @@ |
|||||
|
resources |
||||
@ -0,0 +1,4 @@ |
|||||
|
title = "Photo Stream" |
||||
|
theme = "photo-stream" |
||||
|
[params] |
||||
|
album_date_format = "2006" |
||||
@ -0,0 +1 @@ |
|||||
|
*.jpeg |
||||
@ -0,0 +1,10 @@ |
|||||
|
--- |
||||
|
date: "2016-01-01" |
||||
|
title: Animals |
||||
|
sort_by: "Name" |
||||
|
resources: |
||||
|
- src: 'camel.jpeg' |
||||
|
params: |
||||
|
cover: true |
||||
|
- src: '**.jpeg' |
||||
|
--- |
||||
@ -0,0 +1,10 @@ |
|||||
|
--- |
||||
|
date: "2020-01-01" |
||||
|
title: Architecture |
||||
|
sort_by: "Name" |
||||
|
resources: |
||||
|
- src: 'archi10.jpeg' |
||||
|
params: |
||||
|
cover: true |
||||
|
- src: '**.jpeg' |
||||
|
--- |
||||
@ -0,0 +1,7 @@ |
|||||
|
--- |
||||
|
date: "2020-01-01" |
||||
|
title: Architecture |
||||
|
sort_by: "Exif.Date" |
||||
|
resources: |
||||
|
- src: '**.jpeg' |
||||
|
--- |
||||
@ -0,0 +1,10 @@ |
|||||
|
--- |
||||
|
date: "2019-01-01" |
||||
|
title: Flowers |
||||
|
sort_by: "Name" |
||||
|
resources: |
||||
|
- src: 'flower09.jpeg' |
||||
|
params: |
||||
|
cover: true |
||||
|
- src: '**.jpeg' |
||||
|
--- |
||||
@ -0,0 +1,10 @@ |
|||||
|
--- |
||||
|
date: "2017-01-01" |
||||
|
title: Food and drink |
||||
|
sort_by: "Name" |
||||
|
resources: |
||||
|
- src: 'food06.jpeg' |
||||
|
params: |
||||
|
cover: true |
||||
|
- src: '**.jpeg' |
||||
|
--- |
||||
@ -0,0 +1,7 @@ |
|||||
|
--- |
||||
|
date: "2015-01-01" |
||||
|
title: Happy |
||||
|
sort_by: "Name" |
||||
|
resources: |
||||
|
- src: '**.jpeg' |
||||
|
--- |
||||
@ -0,0 +1,10 @@ |
|||||
|
--- |
||||
|
date: "2014-01-01" |
||||
|
title: Love |
||||
|
sort_by: "Name" |
||||
|
resources: |
||||
|
- src: 'love02.jpeg' |
||||
|
params: |
||||
|
cover: true |
||||
|
- src: '**.jpeg' |
||||
|
--- |
||||
@ -0,0 +1,7 @@ |
|||||
|
--- |
||||
|
date: "2013-01-01" |
||||
|
title: People |
||||
|
sort_by: "Name" |
||||
|
resources: |
||||
|
- src: '**.jpeg' |
||||
|
--- |
||||
@ -0,0 +1,7 @@ |
|||||
|
--- |
||||
|
date: "2012-01-01" |
||||
|
title: Tints |
||||
|
sort_by: "Name" |
||||
|
resources: |
||||
|
- src: '**.jpeg' |
||||
|
--- |
||||
@ -0,0 +1,7 @@ |
|||||
|
--- |
||||
|
date: "2011-01-01" |
||||
|
title: Travel |
||||
|
sort_by: "Name" |
||||
|
resources: |
||||
|
- src: '**.jpeg' |
||||
|
--- |
||||
@ -0,0 +1,130 @@ |
|||||
|
#!/bin/bash |
||||
|
|
||||
|
function fetch() { |
||||
|
file=$1 |
||||
|
url=$2 |
||||
|
if [ ! -e "$1" ]; then |
||||
|
echo "Fetching $1... " |
||||
|
curl -sL -o "$1" "$2" |
||||
|
if [ "$?" -gt 0 ]; then |
||||
|
echo "Failed !" |
||||
|
fi |
||||
|
else |
||||
|
echo "Skipping $1, the file already exists!" |
||||
|
fi |
||||
|
} |
||||
|
|
||||
|
fetch "content/animals/hawk.jpeg" "https://unsplash.com/photos/H27PUqaJyHU/download?force=true" |
||||
|
fetch "content/animals/dog.jpeg" "https://unsplash.com/photos/Am3RoG7GEl0/download?force=true" |
||||
|
fetch "content/animals/cat.jpeg" "https://unsplash.com/photos/G21-GaAZrrs/download?force=true" |
||||
|
fetch "content/animals/bee.jpeg" "https://unsplash.com/photos/VeRn-bKfoVA/download?force=true" |
||||
|
fetch "content/animals/monkey.jpeg" "https://unsplash.com/photos/4nPq-CMKfvY/download?force=true" |
||||
|
fetch "content/animals/turtle.jpeg" "https://unsplash.com/photos/_x-PryfGq0Y/download?force=true" |
||||
|
fetch "content/animals/horse.jpeg" "https://unsplash.com/photos/dr1Hbu8Gwt8/download?force=true" |
||||
|
fetch "content/animals/bird.jpeg" "https://unsplash.com/photos/YezZZpufVL4/download?force=true" |
||||
|
fetch "content/animals/bird2.jpeg" "https://unsplash.com/photos/ZbMJ5VLrpQ4/download?force=true" |
||||
|
fetch "content/animals/spider.jpeg" "https://unsplash.com/photos/BkV2pxgof-U/download?force=true" |
||||
|
fetch "content/animals/wolf.jpeg" "https://unsplash.com/photos/9rloii_qmmw/download?force=true" |
||||
|
fetch "content/animals/dog2.jpeg" "https://unsplash.com/photos/Oq9NDnlFQzU/download?force=true" |
||||
|
fetch "content/animals/fox.jpeg" "https://unsplash.com/photos/oCxaclJklOI/download?force=true" |
||||
|
fetch "content/animals/dog3.jpeg" "https://unsplash.com/photos/8o5uCdOQtko/download?force=true" |
||||
|
fetch "content/animals/camel.jpeg" "https://unsplash.com/photos/i_Z1o10BPPk/download?force=true" |
||||
|
fetch "content/animals/bee2.jpeg" "https://unsplash.com/photos/UPJ0vTjPFXE/download?force=true" |
||||
|
fetch "content/animals/wasp.jpeg" "https://unsplash.com/photos/R_W86FHa-Sk/download?force=true" |
||||
|
fetch "content/animals/dog4.jpeg" "https://unsplash.com/photos/Ugg-EIfzy0c/download?force=true" |
||||
|
fetch "content/animals/rabbit.jpeg" "https://unsplash.com/photos/8bOwZ8ag9UY/download?force=true" |
||||
|
fetch "content/animals/fish.jpeg" "https://unsplash.com/photos/l-QdJMZX7PU/download?force=true" |
||||
|
|
||||
|
fetch "content/architecture/archi01.jpeg" "https://unsplash.com/photos/37Hk9D4Ig_4/download?force=true" |
||||
|
fetch "content/architecture/archi02.jpeg" "https://unsplash.com/photos/3pk1VnBeTQQ/download?force=true" |
||||
|
fetch "content/architecture/archi03.jpeg" "https://unsplash.com/photos/t1tAOh-CaZ4/download?force=true" |
||||
|
fetch "content/architecture/archi04.jpeg" "https://unsplash.com/photos/w6OniVDCfn0/download?force=true" |
||||
|
fetch "content/architecture/archi05.jpeg" "https://unsplash.com/photos/zZ97YKTyj7s/download?force=true" |
||||
|
fetch "content/architecture/archi06.jpeg" "https://unsplash.com/photos/tNGfc-2KNrc/download?force=true" |
||||
|
fetch "content/architecture/archi07.jpeg" "https://unsplash.com/photos/LmS1g1fqyas/download?force=true" |
||||
|
fetch "content/architecture/archi08.jpeg" "https://unsplash.com/photos/I-LFXWk3vLI/download?force=true" |
||||
|
fetch "content/architecture/archi09.jpeg" "https://unsplash.com/photos/4VBFrMweUw8/download?force=true" |
||||
|
fetch "content/architecture/archi10.jpeg" "https://unsplash.com/photos/lLs02_axGOw/download?force=true" |
||||
|
fetch "content/architecture/archi11.jpeg" "https://unsplash.com/photos/NJ3JeCFwj9g/download?force=true" |
||||
|
fetch "content/architecture/archi12.jpeg" "https://unsplash.com/photos/R63O6UiUEzg/download?force=true" |
||||
|
fetch "content/architecture/archi13.jpeg" "https://unsplash.com/photos/IU1QUXkD-90/download?force=true" |
||||
|
fetch "content/architecture/archi14.jpeg" "https://unsplash.com/photos/8o_x-NjXIcQ/download?force=true" |
||||
|
fetch "content/architecture/archi15.jpeg" "https://unsplash.com/photos/YKAUA_Rt6xI/download?force=true" |
||||
|
fetch "content/architecture/archi16.jpeg" "https://unsplash.com/photos/zUOqjnO_ZvM/download?force=true" |
||||
|
fetch "content/architecture/archi17.jpeg" "https://unsplash.com/photos/s07In41ntgg/download?force=true" |
||||
|
fetch "content/architecture/archi18.jpeg" "https://unsplash.com/photos/QsDEa0qvk20/download?force=true" |
||||
|
fetch "content/architecture/archi19.jpeg" "https://unsplash.com/photos/cxyPcOcClSE/download?force=true" |
||||
|
fetch "content/architecture/archi20.jpeg" "https://unsplash.com/photos/fwsiAb2LLZE/download?force=true" |
||||
|
|
||||
|
fetch "content/flowers/flower01.jpeg" "https://unsplash.com/photos/EfhCUc_fjrU/download?force=true" |
||||
|
fetch "content/flowers/flower02.jpeg" "https://unsplash.com/photos/9A_peGrSbZc/download?force=true" |
||||
|
fetch "content/flowers/flower03.jpeg" "https://unsplash.com/photos/tu_mv6p2p5U/download?force=true" |
||||
|
fetch "content/flowers/flower04.jpeg" "https://unsplash.com/photos/koy6FlCCy5s/download?force=true" |
||||
|
fetch "content/flowers/flower05.jpeg" "https://unsplash.com/photos/ct_zXHu8rcM/download?force=true" |
||||
|
fetch "content/flowers/flower06.jpeg" "https://unsplash.com/photos/5lRxNLHfZOY/download?force=true" |
||||
|
fetch "content/flowers/flower07.jpeg" "https://unsplash.com/photos/iMdsjoiftZo/download?force=true" |
||||
|
fetch "content/flowers/flower08.jpeg" "https://unsplash.com/photos/OWq8w3BYMFY/download?force=true" |
||||
|
fetch "content/flowers/flower09.jpeg" "https://unsplash.com/photos/ATgfRqpFfFI/download?force=true" |
||||
|
fetch "content/flowers/flower10.jpeg" "https://unsplash.com/photos/YmPqWIQcl9c/download?force=true" |
||||
|
fetch "content/flowers/flower11.jpeg" "https://unsplash.com/photos/urUdKCxsTUI/download?force=true" |
||||
|
fetch "content/flowers/flower12.jpeg" "https://unsplash.com/photos/p7mo8-CG5Gs/download?force=true" |
||||
|
fetch "content/flowers/flower13.jpeg" "https://unsplash.com/photos/f0heeiu-Ec0/download?force=true" |
||||
|
fetch "content/flowers/flower14.jpeg" "https://unsplash.com/photos/IicyiaPYGGI/download?force=true" |
||||
|
fetch "content/flowers/flower15.jpeg" "https://unsplash.com/photos/KQ6sO8m1ZDE/download?force=true" |
||||
|
fetch "content/flowers/flower16.jpeg" "https://unsplash.com/photos/kkJuQhp9Kw0/download?force=true" |
||||
|
fetch "content/flowers/flower17.jpeg" "https://unsplash.com/photos/aolmXcUxr7Y/download?force=true" |
||||
|
fetch "content/flowers/flower18.jpeg" "https://unsplash.com/photos/zb2vBaHYB2I/download?force=true" |
||||
|
fetch "content/flowers/flower19.jpeg" "https://unsplash.com/photos/BlMj6RYy3c0/download?force=true" |
||||
|
fetch "content/flowers/flower20.jpeg" "https://unsplash.com/photos/whOkVvf0_hU/download?force=true" |
||||
|
|
||||
|
fetch "content/food/food01.jpeg" "https://unsplash.com/photos/oyr21Ey_DPI/download?force=true" |
||||
|
fetch "content/food/food02.jpeg" "https://unsplash.com/photos/8CSYziKPFV4/download?force=true" |
||||
|
fetch "content/food/food03.jpeg" "https://unsplash.com/photos/8W1KIj8iWX4/download?force=true" |
||||
|
fetch "content/food/food04.jpeg" "https://unsplash.com/photos/D7NA2pEn3K0/download?force=true" |
||||
|
fetch "content/food/food05.jpeg" "https://unsplash.com/photos/IlnF2g_3tpY/download?force=true" |
||||
|
fetch "content/food/food06.jpeg" "https://unsplash.com/photos/qNhe2QXzLuo/download?force=true" |
||||
|
fetch "content/food/food07.jpeg" "https://unsplash.com/photos/1J1mEZbag4I/download?force=true" |
||||
|
fetch "content/food/food08.jpeg" "https://unsplash.com/photos/phEaeqe555M/download?force=true" |
||||
|
fetch "content/food/food09.jpeg" "https://unsplash.com/photos/G3GxkxZOOYc/download?force=true" |
||||
|
fetch "content/food/food10.jpeg" "https://unsplash.com/photos/dmnCGaqMEzE/download?force=true" |
||||
|
fetch "content/food/food11.jpeg" "https://unsplash.com/photos/TAj4X5-eRqE/download?force=true" |
||||
|
fetch "content/food/food12.jpeg" "https://unsplash.com/photos/H0fOnITjgw8/download?force=true" |
||||
|
fetch "content/food/food13.jpeg" "https://unsplash.com/photos/MqT0asuoIcU/download?force=true" |
||||
|
fetch "content/food/food14.jpeg" "https://unsplash.com/photos/EGvhPABaBos/download?force=true" |
||||
|
fetch "content/food/food15.jpeg" "https://unsplash.com/photos/_MYcIi9DgYQ/download?force=true" |
||||
|
fetch "content/food/food16.jpeg" "https://unsplash.com/photos/KG8ofkGRl1k/download?force=true" |
||||
|
fetch "content/food/food17.jpeg" "https://unsplash.com/photos/C6JhUKs9q8M/download?force=true" |
||||
|
fetch "content/food/food18.jpeg" "https://unsplash.com/photos/JyxMyWKOlSU/download?force=true" |
||||
|
fetch "content/food/food19.jpeg" "https://unsplash.com/photos/ta6KsvFaBqk/download?force=true" |
||||
|
fetch "content/food/food20.jpeg" "https://unsplash.com/photos/aZfMW0hSnQI/download?force=true" |
||||
|
|
||||
|
fetch "content/happy/happy01.jpeg" "https://unsplash.com/photos/TyQ-0lPp6e4/download?force=true" |
||||
|
fetch "content/happy/happy02.jpeg" "https://unsplash.com/photos/e3OUQGT9bWU/download?force=true" |
||||
|
fetch "content/happy/happy03.jpeg" "https://unsplash.com/photos/FtZL0r4DZYk/download?force=true" |
||||
|
fetch "content/happy/happy04.jpeg" "https://unsplash.com/photos/hRdVSYpffas/download?force=true" |
||||
|
fetch "content/happy/happy05.jpeg" "https://unsplash.com/photos/1AhGNGKuhR0/download?force=true" |
||||
|
|
||||
|
|
||||
|
fetch "content/love/love01.jpeg" "https://unsplash.com/photos/YRgPxwbvY0E/download?force=true" |
||||
|
fetch "content/love/love02.jpeg" "https://unsplash.com/photos/AsahNlC0VhQ/download?force=true" |
||||
|
fetch "content/love/love03.jpeg" "https://unsplash.com/photos/EdULZpOKsUE/download?force=true" |
||||
|
fetch "content/love/love04.jpeg" "https://unsplash.com/photos/Y9mWkERHYCU/download?force=true" |
||||
|
fetch "content/love/love05.jpeg" "https://unsplash.com/photos/bQxGg8Vx1Vc/download?force=true" |
||||
|
|
||||
|
fetch "content/people/people01.jpeg" "https://unsplash.com/photos/4nulm-JUYFo/download?force=true" |
||||
|
fetch "content/people/people02.jpeg" "https://unsplash.com/photos/NAdFJtFFlHE/download?force=true" |
||||
|
fetch "content/people/people03.jpeg" "https://unsplash.com/photos/2RhlxwRz4yc/download?force=true" |
||||
|
fetch "content/people/people04.jpeg" "https://unsplash.com/photos/tokYjYqaPB0/download?force=true" |
||||
|
fetch "content/people/people05.jpeg" "https://unsplash.com/photos/by0XNgDemsc/download?force=true" |
||||
|
|
||||
|
fetch "content/tints/tint01.jpeg" "https://unsplash.com/photos/kKvQJ6rK6S4/download?force=true" |
||||
|
fetch "content/tints/tint02.jpeg" "https://unsplash.com/photos/Lw7BruqPnJY/download?force=true" |
||||
|
fetch "content/tints/tint03.jpeg" "https://unsplash.com/photos/60eMQfQuGIk/download?force=true" |
||||
|
fetch "content/tints/tint04.jpeg" "https://unsplash.com/photos/Q4q7kJxqfGI/download?force=true" |
||||
|
fetch "content/tints/tint05.jpeg" "https://unsplash.com/photos/PsO_PfLXET4/download?force=true" |
||||
|
|
||||
|
fetch "content/travel/travel01.jpeg" "https://unsplash.com/photos/Q2ET6TX1poU/download?force=true" |
||||
|
fetch "content/travel/travel02.jpeg" "https://unsplash.com/photos/c5F1hhK5t0Q/download?force=true" |
||||
|
fetch "content/travel/travel03.jpeg" "https://unsplash.com/photos/A7KD1kdXD-o/download?force=true" |
||||
|
fetch "content/travel/travel04.jpeg" "https://unsplash.com/photos/PSY_KuMcTJU/download?force=true" |
||||
|
fetch "content/travel/travel05.jpeg" "https://unsplash.com/photos/rlIb6DLWcH8/download?force=true" |
||||
@ -0,0 +1 @@ |
|||||
|
../../ |
||||
@ -0,0 +1,11 @@ |
|||||
|
--- |
||||
|
- id: pageNotFound |
||||
|
translation: "Sorry, this page does not exist." |
||||
|
- id: visitHomePage |
||||
|
translation: "Return to home page" |
||||
|
- id: open |
||||
|
translation: "Open" |
||||
|
- id: previous |
||||
|
translation: "Previous" |
||||
|
- id: next |
||||
|
translation: "Next" |
||||
@ -0,0 +1,10 @@ |
|||||
|
- id: pageNotFound |
||||
|
translation: "Désolé, cette page n'existe pas !" |
||||
|
- id: visitHomePage |
||||
|
translation: "Retour à la page d'accueil" |
||||
|
- id: open |
||||
|
translation: "Ouvrir" |
||||
|
- id: previous |
||||
|
translation: "Précédent" |
||||
|
- id: next |
||||
|
translation: "Suivant" |
||||
@ -0,0 +1,8 @@ |
|||||
|
{{ define "main"}} |
||||
|
<div class="four-oh-four"> |
||||
|
<img src="{{ "/favicon.svg" | relURL }}" alt=""> |
||||
|
<h1>404</h1> |
||||
|
<p>{{ i18n "pageNotFound" }}</p> |
||||
|
<a href="{{ "/" | relURL }}">{{ i18n "visitHomePage" }}</a> |
||||
|
</div> |
||||
|
{{ end }} |
||||
@ -0,0 +1,33 @@ |
|||||
|
{{ $photos := .Resources.ByType "image" }} |
||||
|
{{ $scratch := newScratch }} |
||||
|
{{ $scratch.Set "index" 0 }} |
||||
|
{{ range $i, $photo := $photos }} |
||||
|
{{ if index $photo.Params "cover" }} |
||||
|
{{ $scratch.Set "index" $i }} |
||||
|
{{ end }} |
||||
|
{{ end }} |
||||
|
{{ if gt (len $photos) 0 }} |
||||
|
{{ $photo := index $photos ($scratch.Get "index") }} |
||||
|
{{ if $photo.Exif }} |
||||
|
{{ $orientation := index $photo.Exif.Tags "Orientation" }} |
||||
|
{{ if eq $orientation 6 }} |
||||
|
{{ $scratch.Set "image_rotation" "r270" }} |
||||
|
{{ else if eq $orientation 8 }} |
||||
|
{{ $scratch.Set "image_rotation" "r90" }} |
||||
|
{{ else if eq $orientation 3 }} |
||||
|
{{ $scratch.Set "image_rotation" "r180" }} |
||||
|
{{ else }} |
||||
|
{{ $scratch.Set "image_rotation" "" }} |
||||
|
{{ end }} |
||||
|
{{ else }} |
||||
|
{{ $scratch.Set "image_rotation" "" }} |
||||
|
{{ end }} |
||||
|
{{ $tint := $photo.Fill "1x1 Box png" }} |
||||
|
{{ $thumbnail := $photo.Fit (print "800x800 Lanczos q80 " ($scratch.Get "image_rotation")) }} |
||||
|
<li class="item" id="{{ $photo.Name | urlize }}" style="background-image: url('data:image/png;base64,{{ $tint.Content| base64Encode }}')" title="{{ $photo.Name }}"> |
||||
|
<img class="lazyload" data-src="{{ $thumbnail.RelPermalink }}" src="data:image/png;base64,{{ $tint.Content| base64Encode }}" height="{{ $thumbnail.Height}}" width="{{ $thumbnail.Width }}" /> |
||||
|
<a class="open" {{ printf "href=%q" .URL | safeHTMLAttr }}>{{ i18n "open" }}</a> |
||||
|
<div class="name">{{ .Title }}</div> |
||||
|
<div class="date">{{ dateFormat ((index .Site.Params "album_date_format") | default "01/2006") .Date }}</div> |
||||
|
</li> |
||||
|
{{ end }} |
||||
@ -0,0 +1,7 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html> |
||||
|
{{- partial "head.html" . -}} |
||||
|
<body> |
||||
|
{{- block "main" . }}{{- end }} |
||||
|
</body> |
||||
|
</html> |
||||
@ -0,0 +1,8 @@ |
|||||
|
|
||||
|
{{ define "main"}} |
||||
|
<ul class="grid" id="target"> |
||||
|
{{ range .Data.Pages.ByDate.Reverse }} |
||||
|
{{ .Render "album" }} |
||||
|
{{ end }} |
||||
|
</ul> |
||||
|
{{ end }} |
||||
@ -0,0 +1,6 @@ |
|||||
|
{{ define "main"}} |
||||
|
<ul class="grid" id="target"> |
||||
|
{{ $photos := sort (.Resources.ByType "image") (index .Params "sort_by" |default "Name") }} |
||||
|
{{- partial "photos.html" $photos -}} |
||||
|
</ul> |
||||
|
{{ end }} |
||||
@ -0,0 +1,55 @@ |
|||||
|
<head> |
||||
|
<!-- Title --> |
||||
|
{{ $url := replace .Permalink ( printf "%s" .Site.BaseURL) "" }} |
||||
|
{{ if eq $url "/" }} |
||||
|
{{ $.Scratch.Set "title" .Site.Title }} |
||||
|
{{ else }} |
||||
|
{{ $.Scratch.Set "title" .Title }} |
||||
|
{{ end }} |
||||
|
<!-- The data-title attribute is used by Javascript to restore the original |
||||
|
title when the photo is closed --> |
||||
|
<title {{ printf `data-title="%s"` ($.Scratch.Get "title") | safeHTMLAttr }}> |
||||
|
{{ $.Scratch.Get "title" }} |
||||
|
</title> |
||||
|
|
||||
|
<!-- Misc --> |
||||
|
<link rel="canonical" href="{{ .Permalink }}"> |
||||
|
<meta charset="utf-8"> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> |
||||
|
|
||||
|
<!-- RSS Link --> |
||||
|
{{ range .AlternativeOutputFormats -}} |
||||
|
{{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }} |
||||
|
{{ end -}} |
||||
|
|
||||
|
<!-- Open Graph meta tags --> |
||||
|
{{ template "_internal/opengraph.html" . }} |
||||
|
|
||||
|
<!-- Compile SCSS to CSS --> |
||||
|
{{ $scss := resources.Get "/css/master.scss" }} |
||||
|
{{ $css := $scss | resources.ToCSS }} |
||||
|
|
||||
|
<!-- Links to CSS and JS --> |
||||
|
{{ if .Site.Params.cachebuster }} |
||||
|
{{ $t := now }} |
||||
|
<link rel="stylesheet" href="{{ $css.Permalink }}?t={{$t}}"> |
||||
|
{{ range .Site.Params.extracssfiles }} |
||||
|
<link rel="stylesheet" href="{{.}}?t={{$t}}"> |
||||
|
{{ end }} |
||||
|
<script type="text/javascript" src="/js/lazy-loading.js?t={{$t}}"></script> |
||||
|
<script type="text/javascript" src="/js/photos.js?t={{$t}}"></script> |
||||
|
{{ else }} |
||||
|
<link rel="stylesheet" href="{{ $css.Permalink }}"> |
||||
|
{{ range .Site.Params.extracssfiles }} |
||||
|
<link rel="stylesheet" href="{{.}}"> |
||||
|
{{ end }} |
||||
|
<script type="text/javascript" src="/js/lazy-loading.js"></script> |
||||
|
<script type="text/javascript" src="/js/photos.js"></script> |
||||
|
{{ end }} |
||||
|
|
||||
|
<!-- Favicon --> |
||||
|
<link rel="shortcut icon" type="image/svg+xml" href="/favicon.svg" /> |
||||
|
<link rel="shortcut icon" type="image/png" href="/favicon.png" /> |
||||
|
<link rel="apple-touch-icon" href="/touch-icon-iphone.png" /> |
||||
|
<link rel="mask-icon" href="/favicon.svg" /> |
||||
|
</head> |
||||
@ -0,0 +1,8 @@ |
|||||
|
<ul class="links"> |
||||
|
<!-- You can add links (to your social media profiles for example) below --> |
||||
|
<li class="rss"><a rel="alternate" type="application/rss+xml" href="{{ .Params.BaseURL }}feed.xml" title="RSS Feed">RSS Feed</a></li> |
||||
|
<li class="github"><a rel="me" href="https://github.com/maxvoltar/photo-stream" title="Fork on Github">Github</a></li> |
||||
|
<li class="link"><a rel="me" href="https://twitter.com/{{ .Params.twitter_username }}" title="@{{ .Params.twitter_username }} on Twitter">Twitter</a></li> |
||||
|
<!-- <li class="link"><a rel="me" href="https://github.com/{{ .Params.github_username }}" title="@{{ .Params.github_username }} on Github">Github</a></li> --> |
||||
|
<!-- <li class="link"><a rel="me" href="https://instagram.com/{{ .Params.instagram_username }}" title="@{{ .Params.instagram_username }} on Instagram">Instagram</a></li> --> |
||||
|
</ul> |
||||
@ -0,0 +1,45 @@ |
|||||
|
{{ $photos := . }} |
||||
|
{{ $size := len $photos }} |
||||
|
{{ $scratch := newScratch }} |
||||
|
{{ range $index, $photo := $photos }} |
||||
|
{{ if $photo.Exif }} |
||||
|
{{ $orientation := index $photo.Exif.Tags "Orientation" }} |
||||
|
{{ if eq $orientation 6 }} |
||||
|
{{ $scratch.Set "image_rotation" "r270" }} |
||||
|
{{ else if eq $orientation 8 }} |
||||
|
{{ $scratch.Set "image_rotation" "r90" }} |
||||
|
{{ else if eq $orientation 3 }} |
||||
|
{{ $scratch.Set "image_rotation" "r180" }} |
||||
|
{{ else }} |
||||
|
{{ $scratch.Set "image_rotation" "" }} |
||||
|
{{ end }} |
||||
|
{{ else }} |
||||
|
{{ $scratch.Set "image_rotation" "" }} |
||||
|
{{ end }} |
||||
|
{{ $tint := $photo.Fill "1x1 Box png" }} |
||||
|
{{ $thumbnail := $photo.Fit (print "800x800 Lanczos q80 " ($scratch.Get "image_rotation")) }} |
||||
|
{{ $large := $photo.Fit (print "2048x2048 Lanczos q85 " ($scratch.Get "image_rotation")) }} |
||||
|
<li class="item" id="{{ $photo.Name | urlize }}" style="background-image: url('data:image/png;base64,{{ $tint.Content| base64Encode }}')" title="{{ $photo.Name }}"> |
||||
|
<img class="lazyload" data-src="{{ $thumbnail.RelPermalink }}" src="data:image/png;base64,{{ $tint.Content| base64Encode }}" height="{{ $thumbnail.Height}}" width="{{ $thumbnail.Width }}" /> |
||||
|
<span class="full"> |
||||
|
<!-- TODO <a href="{{ $large.RelPermalink }}"></a> --> |
||||
|
<span style="background-image: url('{{ $large.RelPermalink }}')"></span> |
||||
|
</span> |
||||
|
<a class="open" href="#{{ $photo.Name | urlize }}" data-target="{{ $photo.Name | urlize }}">{{ i18n "open" }}</a> |
||||
|
<a class="close" href="#">Close</a> |
||||
|
|
||||
|
{{ if $index }} |
||||
|
{{ $previous_photo := (index $photos (sub $index 1)) }} |
||||
|
<a href="#{{ $previous_photo.Name | urlize }}" data-target="{{ $previous_photo.Name | urlize }}" class="previous" title="{{ i18n "previous" }}"> |
||||
|
<span>{{ i18n "previous" }}</span> |
||||
|
</a> |
||||
|
{{ end }} |
||||
|
|
||||
|
{{ if lt $index (sub $size 1) }} |
||||
|
{{ $next_photo := (index $photos (add $index 1)) }} |
||||
|
<a href="#{{ $next_photo.Name | urlize }}" data-target="{{ $next_photo.Name | urlize }}" class="next" title="{{ i18n "next" }}"> |
||||
|
<span>{{ i18n "next" }}</span> |
||||
|
</a> |
||||
|
{{ end }} |
||||
|
</li> |
||||
|
{{ end }} |
||||
|
After Width: | Height: | Size: 992 B |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 833 B |
|
After Width: | Height: | Size: 7.6 KiB |
@ -0,0 +1,6 @@ |
|||||
|
// Name: Lazy Load 2.0.0-rc.2
|
||||
|
// Source: https://github.com/tuupola/lazyload
|
||||
|
// License: MIT license
|
||||
|
// Copyright: 2007-2019 Mika Tuupola
|
||||
|
|
||||
|
!function(t,e){"object"==typeof exports?module.exports=e(t):"function"==typeof define&&define.amd?define([],e):t.LazyLoad=e(t)}("undefined"!=typeof global?global:this.window||this.global,function(t){"use strict";function e(t,e){this.settings=s(r,e||{}),this.images=t||document.querySelectorAll(this.settings.selector),this.observer=null,this.init()}"function"==typeof define&&define.amd&&(t=window);const r={src:"data-src",srcset:"data-srcset",selector:".lazyload",root:null,rootMargin:"0px",threshold:0},s=function(){let t={},e=!1,r=0,o=arguments.length;"[object Boolean]"===Object.prototype.toString.call(arguments[0])&&(e=arguments[0],r++);for(;r<o;r++)!function(r){for(let o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e&&"[object Object]"===Object.prototype.toString.call(r[o])?t[o]=s(!0,t[o],r[o]):t[o]=r[o])}(arguments[r]);return t};if(e.prototype={init:function(){if(!t.IntersectionObserver)return void this.loadImages();let e=this,r={root:this.settings.root,rootMargin:this.settings.rootMargin,threshold:[this.settings.threshold]};this.observer=new IntersectionObserver(function(t){Array.prototype.forEach.call(t,function(t){if(t.isIntersecting){e.observer.unobserve(t.target);let r=t.target.getAttribute(e.settings.src),s=t.target.getAttribute(e.settings.srcset);"img"===t.target.tagName.toLowerCase()?(r&&(t.target.src=r),s&&(t.target.srcset=s)):t.target.style.backgroundImage="url("+r+")"}})},r),Array.prototype.forEach.call(this.images,function(t){e.observer.observe(t)})},loadAndDestroy:function(){this.settings&&(this.loadImages(),this.destroy())},loadImages:function(){if(!this.settings)return;let t=this;Array.prototype.forEach.call(this.images,function(e){let r=e.getAttribute(t.settings.src),s=e.getAttribute(t.settings.srcset);"img"===e.tagName.toLowerCase()?(r&&(e.src=r),s&&(e.srcset=s)):e.style.backgroundImage="url('"+r+"')"})},destroy:function(){this.settings&&(this.observer.disconnect(),this.settings=null)}},t.lazyload=function(t,r){return new e(t,r)},t.jQuery){const r=t.jQuery;r.fn.lazyload=function(t){return t=t||{},t.attribute=t.attribute||"data-src",new e(r.makeArray(this),t),this}}return e}); |
||||
@ -0,0 +1,104 @@ |
|||||
|
const ESCAPE = 27; |
||||
|
const RIGHT = 39; |
||||
|
const LEFT = 37; |
||||
|
const TARGET_CLASS = 'target'; |
||||
|
|
||||
|
const clickNavigationButton = (buttonClass) => { |
||||
|
const id = window.history.state && window.history.state.id; |
||||
|
if (id) { |
||||
|
const photo = document.getElementById(id); |
||||
|
console.log(photo); |
||||
|
const button = photo.querySelector(buttonClass); |
||||
|
console.log(button); |
||||
|
button && button.click(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const openPhoto = (id, href) => { |
||||
|
console.log(`Opening photo ${id}...`); |
||||
|
const photo = document.getElementById(id); |
||||
|
const title = photo.getAttribute('title'); |
||||
|
removeTargetClass(); |
||||
|
photo.classList.add(TARGET_CLASS); |
||||
|
document.title = title; |
||||
|
if (href) { |
||||
|
window.history.pushState({id: id}, '', href); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const closePhoto = (href) => { |
||||
|
console.log(`Closing photo...`); |
||||
|
const title = document.querySelector('head title').getAttribute('data-title'); |
||||
|
removeTargetClass(); |
||||
|
document.title = title; |
||||
|
if (href) { |
||||
|
window.history.pushState({}, '', href); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const removeTargetClass = () => { |
||||
|
let targets = document.querySelectorAll(`.${TARGET_CLASS}`); |
||||
|
targets.forEach((target) => { |
||||
|
target.classList.remove(TARGET_CLASS); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
const handleClick = (selector, event, callback) => { |
||||
|
if (event.target.matches(selector)) { |
||||
|
callback(); |
||||
|
event.preventDefault(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const handleKey = (keyCode, event, callback) => { |
||||
|
if (event.keyCode === keyCode) { |
||||
|
callback(); |
||||
|
event.preventDefault(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
window.onpopstate = function(event) { |
||||
|
if (event.state && event.state.id) { |
||||
|
const id = event.state.id; |
||||
|
openPhoto(id, null); |
||||
|
} else { |
||||
|
closePhoto(null); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
document.addEventListener('keydown', (event) => { |
||||
|
handleKey(ESCAPE, event, () => { |
||||
|
clickNavigationButton('.close'); |
||||
|
}); |
||||
|
|
||||
|
handleKey(RIGHT, event, () => { |
||||
|
clickNavigationButton('.next'); |
||||
|
}); |
||||
|
|
||||
|
handleKey(LEFT, event, () => { |
||||
|
clickNavigationButton('.previous'); |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
document.addEventListener('click', (event) => { |
||||
|
handleClick('[data-target][href]', event, () => { |
||||
|
const id = event.target.getAttribute('data-target'); |
||||
|
const href = event.target.getAttribute('href'); |
||||
|
openPhoto(id, href); |
||||
|
}); |
||||
|
|
||||
|
handleClick('[href].close', event, () => { |
||||
|
const href = event.target.getAttribute('href'); |
||||
|
closePhoto(href); |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
window.addEventListener('load', (event) => { |
||||
|
console.log("Loaded !"); |
||||
|
const id = window.location.hash.substr(1); |
||||
|
if (id != "") { |
||||
|
openPhoto(id, "#" + id); |
||||
|
} |
||||
|
lazyload(); |
||||
|
}); |
||||
|
|
||||
|
After Width: | Height: | Size: 1.1 MiB |
|
After Width: | Height: | Size: 5.5 KiB |
@ -0,0 +1,20 @@ |
|||||
|
# theme.toml template for a Hugo theme |
||||
|
# See https://github.com/gohugoio/hugoThemes#themetoml for an example |
||||
|
|
||||
|
name = "Photo Stream" |
||||
|
license = "MIT" |
||||
|
licenselink = "https://github.com/nmasse-itix/photo-stream/blob/master/LICENSE" |
||||
|
description = "A theme to host your photo albums, based on maxvoltar's photo-stream theme" |
||||
|
homepage = "https://www.itix.fr/" |
||||
|
tags = [ "photo-stream", "responsive", "flexbox", "minimalistic", "gallery" ] |
||||
|
features = [ "rss", "page resources", "responsive" ] |
||||
|
min_version = "0.68.0" |
||||
|
|
||||
|
[author] |
||||
|
name = "Nicolas Massé" |
||||
|
homepage = "https://www.itix.fr/" |
||||
|
|
||||
|
[original] |
||||
|
name = "Tim Van Damme" |
||||
|
homepage = "http://timvandamme.com/" |
||||
|
repo = "https://github.com/maxvoltar/photo-stream" |
||||
Loading…
Reference in new issue