Browse Source

Flesh out photos page some more.

dev
Chris Smith 8 years ago
parent
commit
f29bcf3e35
6 changed files with 76 additions and 21 deletions
  1. 1
    1
      _layouts/default.html
  2. 17
    0
      _layouts/photos.html
  3. 6
    3
      import-photos.sh
  4. 1
    0
      index.html
  5. 42
    14
      photos/2015-08-Maui/index.html
  6. 9
    3
      res/css/style.css

+ 1
- 1
_layouts/default.html View File

@@ -1,7 +1,7 @@
1 1
 <!DOCTYPE html>
2 2
 <html>
3 3
   <head>
4
-    <title>Chameth.com</title>
4
+    <title>{{page.title}}</title>
5 5
     <meta charset="utf-8">
6 6
     <link rel="stylesheet" href="/res/css/style.css">
7 7
   </head>

+ 17
- 0
_layouts/photos.html View File

@@ -0,0 +1,17 @@
1
+---
2
+layout: default
3
+---
4
+<article class="post">
5
+  <header>
6
+    <div class="title">
7
+      <h2>{{ page.album_title }}</h2>
8
+      <p>{{ page.album_date }}</p>
9
+    </div>
10
+  </header>
11
+  <!-- Base URL: https://photos.chameth.com/{{page.path | replace:'index.html',''}}/ -->
12
+  {% for photo in page.photos %}
13
+    <a class="image gallery">
14
+      <img src="{{ photo.file }}" alt="{{photo.alt}}">
15
+    </a>
16
+  {% endfor %}
17
+</article>

+ 6
- 3
import-photos.sh View File

@@ -3,11 +3,15 @@
3 3
 SOURCE=~/Dropbox/photos-site
4 4
 TEMPLATE='---
5 5
 layout: photos
6
-title: Unknown album
6
+album_title: XXX
7
+album_date: YYY
8
+title: Photos of XXX — YYY · Chameth.com
7 9
 photos:
8 10
 $PHOTOS
9 11
 ---'
10 12
 
13
+PHOTO_PRINTF='- file: %f\n  alt: Unknown\n  caption: Unknown\n'
14
+
11 15
 for folder in $SOURCE/*; do
12 16
     foldername=${folder##*/}
13 17
     mkdir -p photos/$foldername
@@ -19,8 +23,7 @@ for folder in $SOURCE/*; do
19 23
     done
20 24
 
21 25
     if [ ! -e "photos/$foldername/index.html" ]; then
22
-        export PHOTOS=$(find "photos/$foldername" -type f -printf '- %f\n')
26
+        export PHOTOS=$(find "photos/$foldername" -type f -printf "$PHOTO_PRINTF")
23 27
         envsubst <<< "$TEMPLATE" > "photos/$foldername/index.html"
24 28
     fi
25 29
 done
26
-

+ 1
- 0
index.html View File

@@ -1,5 +1,6 @@
1 1
 ---
2 2
 layout: default
3
+title: Chameth.com — Chris Smith
3 4
 ---
4 5
 {% for post in paginator.posts %}
5 6
 <article class="post">

+ 42
- 14
photos/2015-08-Maui/index.html View File

@@ -1,18 +1,46 @@
1 1
 ---
2 2
 layout: photos
3
-title: Maui, Hawaii, USA — August 2015 
3
+album_title: Maui, Hawaii, USA
4
+album_date: August and September 2015
5
+title: Photos of Maui, Hawaii — August 2015 · Chameth.com
4 6
 photos:
5
-- IMG_20150731_071026.jpg
6
-- P7310206.jpg
7
-- P7310220.jpg
8
-- IMG_20150730_070036.jpg
9
-- P7310236.jpg
10
-- G0122882.jpg
11
-- P7300176.jpg
12
-- P7310285.jpg
13
-- PANO_20150731_100829.jpg
14
-- P7310207.jpg
15
-- P7310186.jpg
16
-- PANO_20150729_073240.jpg
17
-- P7300158.jpg
7
+- file: IMG_20150731_071026.jpg
8
+  alt: View of a beach, blue ocean, and line of hotels on the shore
9
+  caption: View out to the beach.
10
+- file: P7310206.jpg
11
+  alt: "The Iao Needle: a large vertical outcrop of rock covered in green plantlife"
12
+  caption: The Iao Needle, a 370m tall lava remnant.
13
+- file: P7310220.jpg
14
+  alt: Green rainforest with a path worn through from use
15
+  caption: On a walk through Iao Valley
16
+- file: IMG_20150730_070036.jpg
17
+  alt: Road with a hairpin bend going down a mountainside, with the shadow of a cyclist
18
+  caption: Cycling down Haleakalā. Paused to admire the breathtaking views (and upcoming hairpins)
19
+- file: P7310236.jpg
20
+  alt: Water flowing over rocks, long exposure
21
+  caption: A teeny-tiny waterfall. A lot easier to get a picture of than the bigger ones.
22
+- file: G0122882.jpg
23
+  alt: Turtle in a blue ocean, with a person swimming in the background
24
+  caption: That's me. The turtle was a lot more graceful in the water.
25
+- file: P7300176.jpg
26
+  alt: Sunrise over some clouds
27
+  caption: Watching sunrise from above the clouds was worth getting up at 2AM for.
28
+- file: P7310285.jpg
29
+  alt: A turtle
30
+  caption: I want one.
31
+- file: PANO_20150731_100829.jpg
32
+  alt: Massive outcropping of rock covered with greenery.
33
+  caption: Panorama of Iao Valley.
34
+- file: P7310207.jpg
35
+  alt: Green valley walls sloping down to meet, with farms visible in the far distance
36
+  caption: Iao Valley park.
37
+- file: P7310186.jpg
38
+  alt: Sun setting over the ocean, with a palm tree in the foreground
39
+  caption: Another day draws to a close...
40
+- file: PANO_20150729_073240.jpg
41
+  alt: Green grass in the foreground, giving way to perfectly blue ocean
42
+  caption: Panorama from my Lanai. Someone confusingly, the island on the left is called Lanai. (Moloka'i is the one on the right.)
43
+- file: P7300158.jpg
44
+  alt: Line of rocks forming part of the cone of a volcano
45
+  caption: At the top of Haleakalā. The edge of the volcanic cone almost looks like a mountain range.
18 46
 ---

+ 9
- 3
res/css/style.css View File

@@ -356,18 +356,24 @@ header p {
356 356
   white-space: nowrap;
357 357
 }
358 358
 
359
-.post > .image.featured {
359
+.post > .image {
360 360
   overflow: hidden;
361 361
 }
362 362
 
363
-.post > .image.featured img {
363
+.post > .image.gallery {
364
+  display: inline-block;
365
+  max-width: calc(50% - 12px);
366
+  margin: 5px;
367
+}
368
+
369
+.post > .image img {
364 370
   -moz-transition: -moz-transform 0.2s ease-out;
365 371
   -webkit-transition: -webkit-transform 0.2s ease-out;
366 372
   -ms-transition: -ms-transform 0.2s ease-out;
367 373
   transition: transform 0.2s ease-out;
368 374
 }
369 375
 
370
-.post > .image.featured:hover img {
376
+.post > .image:hover img {
371 377
   -moz-transform: scale(1.05);
372 378
   -webkit-transform: scale(1.05);
373 379
   -ms-transform: scale(1.05);

Loading…
Cancel
Save