Improve images, and a few other tweaks
authorNick Downing <nick@ndcode.org>
Fri, 11 Feb 2022 00:30:30 +0000 (11:30 +1100)
committerNick Downing <nick@ndcode.org>
Sat, 12 Feb 2022 01:56:13 +0000 (12:56 +1100)
48 files changed:
_config/n.sh
_config/navigation.json
_lib/blog_post.jst
blog/20220202/IMG_2274_2145x1428.jpg [new file with mode: 0644]
blog/20220202/IMG_2274_256x171.jpg [new file with mode: 0644]
blog/20220202/IMG_2274_768x512.jpg [new file with mode: 0644]
blog/20220202/down.sh [new file with mode: 0755]
blog/20220202/image.jpg [deleted file]
blog/20220202/index.html.jst
blog/20220202/thumbnail.jpg [deleted file]
blog/20220210/IMG_2252_2145x1428.jpg [new file with mode: 0644]
blog/20220210/IMG_2252_256x171.jpg [new file with mode: 0644]
blog/20220210/IMG_2252_768x512.jpg [new file with mode: 0644]
blog/20220210/IMG_2257_2145x1428.jpg [moved from blog/20220210/down_2257.jpg with 100% similarity]
blog/20220210/IMG_2257_256x171.jpg [new file with mode: 0644]
blog/20220210/IMG_2257_768x512.jpg [new file with mode: 0644]
blog/20220210/IMG_2263_1428x2145.jpg [new file with mode: 0644]
blog/20220210/IMG_2263_171x256.jpg [new file with mode: 0644]
blog/20220210/IMG_2263_512x768.jpg [new file with mode: 0644]
blog/20220210/IMG_2265_2145x1428.jpg [moved from blog/20220210/down_2265.jpg with 100% similarity]
blog/20220210/IMG_2265_256x171.jpg [new file with mode: 0644]
blog/20220210/IMG_2265_768x512.jpg [new file with mode: 0644]
blog/20220210/IMG_2267_2145x1428.jpg [moved from blog/20220210/down_2267.jpg with 100% similarity]
blog/20220210/IMG_2267_256x171.jpg [new file with mode: 0644]
blog/20220210/IMG_2267_768x512.jpg [new file with mode: 0644]
blog/20220210/IMG_2275_2145x1428.jpg [moved from blog/20220210/down_2275.jpg with 100% similarity]
blog/20220210/IMG_2275_256x171.jpg [new file with mode: 0644]
blog/20220210/IMG_2275_768x512.jpg [new file with mode: 0644]
blog/20220210/IMG_2288_2145x1428.jpg [moved from blog/20220210/down_2288.jpg with 100% similarity]
blog/20220210/IMG_2288_256x171.jpg [new file with mode: 0644]
blog/20220210/IMG_2288_768x512.jpg [new file with mode: 0644]
blog/20220210/IMG_2306_2145x1428.jpg [moved from blog/20220210/down_2306.jpg with 100% similarity]
blog/20220210/IMG_2306_256x171.jpg [new file with mode: 0644]
blog/20220210/IMG_2306_768x512.jpg [new file with mode: 0644]
blog/20220210/IMG_2307_2145x1428.jpg [moved from blog/20220210/down_2307.jpg with 100% similarity]
blog/20220210/IMG_2307_256x171.jpg [new file with mode: 0644]
blog/20220210/IMG_2307_768x512.jpg [new file with mode: 0644]
blog/20220210/IMG_2308_2145x1428.jpg [moved from blog/20220210/down_2308.jpg with 100% similarity]
blog/20220210/IMG_2308_256x171.jpg [new file with mode: 0644]
blog/20220210/IMG_2308_768x512.jpg [new file with mode: 0644]
blog/20220210/down.sh
blog/20220210/down_2252.jpg [deleted file]
blog/20220210/down_2263.jpg [deleted file]
blog/20220210/image.jpg [deleted file]
blog/20220210/index.html.jst
blog/20220210/thumbnail.jpg [deleted file]
blog/index.html.jst
css/bootstrap/_custom.scss

index b89228d..5ac4469 100755 (executable)
@@ -1,4 +1,4 @@
 #!/bin/sh
 ./set.mjs /api/globals/set.json <globals.json
-./set.mjs /api/nodemailers/set.json <nodemailers.json
 ./set.mjs /api/navigation/set.json <navigation.json
+#./set.mjs /api/nodemailers/set.json <nodemailers.json
index 79ef2ac..364d759 100644 (file)
@@ -8,6 +8,11 @@
           "title": "02/02/2022",
           "children": {},
           "menu": [],
+          "images": [
+            "IMG_2274_2145x1428.jpg",
+            "IMG_2274_768x512.jpg",
+            "IMG_2274_256x171.jpg"
+          ],
           "description": "Start of homeschooling",
           "author": "Nick Downing"
         },
           "title": "10/02/2022",
           "children": {},
           "menu": [],
-          "description": "Homeschooling report",
+          "images": [
+            "IMG_2267_2145x1428.jpg",
+            "IMG_2267_768x512.jpg",
+            "IMG_2267_256x171.jpg"
+          ],
+          "description": "Inaugural homeschooling report",
           "author": "Nick Downing"
         }
       },
index 09a83f5..acbcd49 100644 (file)
@@ -16,16 +16,19 @@ return async (env, head, body, scripts) => {
       try {
         let root = await transaction.get()
         let p = await get_navigation(root, env.component_names)
+        let images = await p.get_json('images')
 
-        div.row.mt-3 {
-          div.col-sm-12 {
-            img.img-responsive(
-              src=await p.get_json('image') || 'image.jpg'
-            ) {}
+        // we can use higher resolution images when lower not available
+        while (images.length < 2)
+          images.push(images[images.length - 1])
+
+        div.my-3 {
+          a(href=images[0]) {
+            img.img-fluid(src=images[1]) {}
           }
         }
 
-        h3.'mt-3'.mb-0 {
+        h3.mb-0 {
           `${await p.get_json('description')}—by ${await p.get_json('author')}`
         }
       }
diff --git a/blog/20220202/IMG_2274_2145x1428.jpg b/blog/20220202/IMG_2274_2145x1428.jpg
new file mode 100644 (file)
index 0000000..66b1cec
Binary files /dev/null and b/blog/20220202/IMG_2274_2145x1428.jpg differ
diff --git a/blog/20220202/IMG_2274_256x171.jpg b/blog/20220202/IMG_2274_256x171.jpg
new file mode 100644 (file)
index 0000000..a9737ca
Binary files /dev/null and b/blog/20220202/IMG_2274_256x171.jpg differ
diff --git a/blog/20220202/IMG_2274_768x512.jpg b/blog/20220202/IMG_2274_768x512.jpg
new file mode 100644 (file)
index 0000000..89cd119
Binary files /dev/null and b/blog/20220202/IMG_2274_768x512.jpg differ
diff --git a/blog/20220202/down.sh b/blog/20220202/down.sh
new file mode 100755 (executable)
index 0000000..bcd781e
--- /dev/null
@@ -0,0 +1,21 @@
+#!/bin/sh
+
+# options after filename if needed e.g.
+# "IMG_2274.jpg -modulate brightness[,saturation[,hue]] +contrast +contrast"
+
+for i in \
+IMG_2274.jpg
+do
+  set $i
+  j=`basename $1 .jpg`
+  shift
+  for k in 2145x1428 768x512 256x171
+  do
+    convert \
+~/Pictures/100CANON/$j.jpg \
+-strip \
+"$@" \
+-resize $k \
+${j}_$k.jpg
+  done
+done
diff --git a/blog/20220202/image.jpg b/blog/20220202/image.jpg
deleted file mode 100644 (file)
index 341bf25..0000000
Binary files a/blog/20220202/image.jpg and /dev/null differ
index ab6ac3f..e722cfc 100644 (file)
@@ -8,11 +8,11 @@ return async env => {
     // body
     async _out => {
       p.mt-3 {
-        'This week with some trepidation we have started to homeschool A(5) and C(4). Until recently, they had been attending daycare with integrated kindergarten 3 days a week together. This had been satisfactory, and had allowed me to attend full-time employment whilst I was full time, and my wife to graduate from her degree.'
+        'This week with some trepidation we have started to homeschool A5 and C4. Until recently, they had been attending daycare with integrated kindergarten 3 days a week together. This had been satisfactory, and had allowed me to attend full-time employment whilst I was full time, and my wife to graduate from her degree.'
       }
 
       p {
-        'After completing his 4-year-old kindergarten year, A(5) has graduated from care, and so C(4) would have go alone this year. But the care is some distance from home, near my former workplace. And also, since I am no longer working full time, the cost of daycare has become a concern. Hence, we have terminated the daycare.'
+        'After completing his 4-year-old kindergarten year, A5 has graduated from care, and so C4 would have go alone this year. But the care is some distance from home, near my former workplace. And also, since I am no longer working full time, the cost of daycare has become a concern. Hence, we have terminated the daycare.'
       }
 
       h4 {
@@ -108,7 +108,7 @@ return async env => {
       }
 
       p {
-        'Therefore what I want to do for my younger children A(5) and C(4) is to set up a more traditional style classroom where they will learn together by tackling similar tasks, and although we will expect C(4) to have more trouble with some tasks being a year younger, we will support him to do the best he can, and he will have the example of A(5) to follow when needed. I’ll also alternate between them to provide individual tasks or support as far as practicable.'
+        'Therefore what I want to do for my younger children A5 and C4 is to set up a more traditional style classroom where they will learn together by tackling similar tasks, and although we will expect C4 to have more trouble with some tasks being a year younger, we will support him to do the best he can, and he will have the example of A5 to follow when needed. I’ll also alternate between them to provide individual tasks or support as far as practicable.'
       }
 
       p {
@@ -128,7 +128,7 @@ return async env => {
       }
 
       p {
-        'My wife will teach some lessons in her native tongue, as I am keen for the children to learn both cultures. I expect that I will learn something too from these lessons, although this week’s experience does highlight that somebody has to look after baby T(1.5) during the lessons, since otherwise he can be very disruptive—he loves permanent markers and many other destructive things.'
+        'My wife will teach some lessons in her native tongue, as I am keen for the children to learn both cultures. I expect that I will learn something too from these lessons, although this week’s experience does highlight that somebody has to look after baby T1.5 during the lessons, since otherwise he can be very disruptive—he loves permanent markers and many other destructive things.'
       }
 
       p {
diff --git a/blog/20220202/thumbnail.jpg b/blog/20220202/thumbnail.jpg
deleted file mode 100644 (file)
index 6de74a0..0000000
Binary files a/blog/20220202/thumbnail.jpg and /dev/null differ
diff --git a/blog/20220210/IMG_2252_2145x1428.jpg b/blog/20220210/IMG_2252_2145x1428.jpg
new file mode 100644 (file)
index 0000000..45653e2
Binary files /dev/null and b/blog/20220210/IMG_2252_2145x1428.jpg differ
diff --git a/blog/20220210/IMG_2252_256x171.jpg b/blog/20220210/IMG_2252_256x171.jpg
new file mode 100644 (file)
index 0000000..cd038c4
Binary files /dev/null and b/blog/20220210/IMG_2252_256x171.jpg differ
diff --git a/blog/20220210/IMG_2252_768x512.jpg b/blog/20220210/IMG_2252_768x512.jpg
new file mode 100644 (file)
index 0000000..a4a3429
Binary files /dev/null and b/blog/20220210/IMG_2252_768x512.jpg differ
diff --git a/blog/20220210/IMG_2257_256x171.jpg b/blog/20220210/IMG_2257_256x171.jpg
new file mode 100644 (file)
index 0000000..0a669d0
Binary files /dev/null and b/blog/20220210/IMG_2257_256x171.jpg differ
diff --git a/blog/20220210/IMG_2257_768x512.jpg b/blog/20220210/IMG_2257_768x512.jpg
new file mode 100644 (file)
index 0000000..992e071
Binary files /dev/null and b/blog/20220210/IMG_2257_768x512.jpg differ
diff --git a/blog/20220210/IMG_2263_1428x2145.jpg b/blog/20220210/IMG_2263_1428x2145.jpg
new file mode 100644 (file)
index 0000000..6a24722
Binary files /dev/null and b/blog/20220210/IMG_2263_1428x2145.jpg differ
diff --git a/blog/20220210/IMG_2263_171x256.jpg b/blog/20220210/IMG_2263_171x256.jpg
new file mode 100644 (file)
index 0000000..03ee801
Binary files /dev/null and b/blog/20220210/IMG_2263_171x256.jpg differ
diff --git a/blog/20220210/IMG_2263_512x768.jpg b/blog/20220210/IMG_2263_512x768.jpg
new file mode 100644 (file)
index 0000000..55220ea
Binary files /dev/null and b/blog/20220210/IMG_2263_512x768.jpg differ
diff --git a/blog/20220210/IMG_2265_256x171.jpg b/blog/20220210/IMG_2265_256x171.jpg
new file mode 100644 (file)
index 0000000..2855944
Binary files /dev/null and b/blog/20220210/IMG_2265_256x171.jpg differ
diff --git a/blog/20220210/IMG_2265_768x512.jpg b/blog/20220210/IMG_2265_768x512.jpg
new file mode 100644 (file)
index 0000000..668e54e
Binary files /dev/null and b/blog/20220210/IMG_2265_768x512.jpg differ
diff --git a/blog/20220210/IMG_2267_256x171.jpg b/blog/20220210/IMG_2267_256x171.jpg
new file mode 100644 (file)
index 0000000..1a9b7ec
Binary files /dev/null and b/blog/20220210/IMG_2267_256x171.jpg differ
diff --git a/blog/20220210/IMG_2267_768x512.jpg b/blog/20220210/IMG_2267_768x512.jpg
new file mode 100644 (file)
index 0000000..1a877af
Binary files /dev/null and b/blog/20220210/IMG_2267_768x512.jpg differ
diff --git a/blog/20220210/IMG_2275_256x171.jpg b/blog/20220210/IMG_2275_256x171.jpg
new file mode 100644 (file)
index 0000000..a71bf59
Binary files /dev/null and b/blog/20220210/IMG_2275_256x171.jpg differ
diff --git a/blog/20220210/IMG_2275_768x512.jpg b/blog/20220210/IMG_2275_768x512.jpg
new file mode 100644 (file)
index 0000000..ccc32a9
Binary files /dev/null and b/blog/20220210/IMG_2275_768x512.jpg differ
diff --git a/blog/20220210/IMG_2288_256x171.jpg b/blog/20220210/IMG_2288_256x171.jpg
new file mode 100644 (file)
index 0000000..b81406c
Binary files /dev/null and b/blog/20220210/IMG_2288_256x171.jpg differ
diff --git a/blog/20220210/IMG_2288_768x512.jpg b/blog/20220210/IMG_2288_768x512.jpg
new file mode 100644 (file)
index 0000000..8e9c4cc
Binary files /dev/null and b/blog/20220210/IMG_2288_768x512.jpg differ
diff --git a/blog/20220210/IMG_2306_256x171.jpg b/blog/20220210/IMG_2306_256x171.jpg
new file mode 100644 (file)
index 0000000..23a47ec
Binary files /dev/null and b/blog/20220210/IMG_2306_256x171.jpg differ
diff --git a/blog/20220210/IMG_2306_768x512.jpg b/blog/20220210/IMG_2306_768x512.jpg
new file mode 100644 (file)
index 0000000..f52804e
Binary files /dev/null and b/blog/20220210/IMG_2306_768x512.jpg differ
diff --git a/blog/20220210/IMG_2307_256x171.jpg b/blog/20220210/IMG_2307_256x171.jpg
new file mode 100644 (file)
index 0000000..08d74b4
Binary files /dev/null and b/blog/20220210/IMG_2307_256x171.jpg differ
diff --git a/blog/20220210/IMG_2307_768x512.jpg b/blog/20220210/IMG_2307_768x512.jpg
new file mode 100644 (file)
index 0000000..a4ce6ee
Binary files /dev/null and b/blog/20220210/IMG_2307_768x512.jpg differ
diff --git a/blog/20220210/IMG_2308_256x171.jpg b/blog/20220210/IMG_2308_256x171.jpg
new file mode 100644 (file)
index 0000000..9e0a98a
Binary files /dev/null and b/blog/20220210/IMG_2308_256x171.jpg differ
diff --git a/blog/20220210/IMG_2308_768x512.jpg b/blog/20220210/IMG_2308_768x512.jpg
new file mode 100644 (file)
index 0000000..1b0aaf4
Binary files /dev/null and b/blog/20220210/IMG_2308_768x512.jpg differ
index 6727189..08e5910 100755 (executable)
@@ -1,8 +1,12 @@
+#!/bin/sh
+
+# options after filename if needed e.g.
+# "IMG_2274.jpg -modulate brightness[,saturation[,hue]] +contrast +contrast"
+
 for i in \
-IMG_2252.jpg \
+"IMG_2252.jpg -modulate 200 +contrast +contrast" \
 IMG_2257.jpg \
 IMG_2263.jpg \
-IMG_2265.jpg \
 IMG_2267.jpg \
 IMG_2275.jpg \
 IMG_2288.jpg \
@@ -10,6 +14,33 @@ IMG_2306.jpg \
 IMG_2307.jpg \
 IMG_2308.jpg
 do
-  j=`echo $i |sed -e 's/^IMG_/down_/'`
-  convert ~/Pictures/100CANON/$i -resize 2145x1428 $j
+  set $i
+  j=`basename $1 .jpg`
+  shift
+  for k in 2145x1428 768x512 256x171
+  do
+    convert \
+~/Pictures/100CANON/$j.jpg \
+-strip \
+"$@" \
+-resize $k \
+${j}_$k.jpg
+  done
+done
+
+for i in \
+IMG_2263.jpg
+do
+  set $i
+  j=`basename $1 .jpg`
+  shift
+  for k in 1428x2145 512x768 171x256
+  do
+    convert \
+~/Pictures/100CANON/$j.jpg \
+-strip \
+"$@" \
+-resize $k \
+${j}_$k.jpg
+  done
 done
diff --git a/blog/20220210/down_2252.jpg b/blog/20220210/down_2252.jpg
deleted file mode 100644 (file)
index bdfe3d4..0000000
Binary files a/blog/20220210/down_2252.jpg and /dev/null differ
diff --git a/blog/20220210/down_2263.jpg b/blog/20220210/down_2263.jpg
deleted file mode 100644 (file)
index ed6a74b..0000000
Binary files a/blog/20220210/down_2263.jpg and /dev/null differ
diff --git a/blog/20220210/image.jpg b/blog/20220210/image.jpg
deleted file mode 100644 (file)
index 180199c..0000000
Binary files a/blog/20220210/image.jpg and /dev/null differ
index b7ef31d..908dba5 100644 (file)
@@ -112,7 +112,7 @@ return async env => {
             }
 
             p {
-              'Start by writing out the alphabet, they did well. A(5) was faster.'
+              'Start by writing out the alphabet, they did well. A5 was faster.'
             }
 
             p {
@@ -120,7 +120,7 @@ return async env => {
             }
 
             p.mb-0 {
-              'And some names: A..., C..., etc. C(4) sometimes writes in mirror image.'
+              'And some names: A..., C..., etc. C4 sometimes writes in mirror image.'
             }
           }
           div.colN.col7.colN-data {
@@ -156,11 +156,11 @@ return async env => {
             }
 
             p {
-              'A(5) wrote: LEGO­POLICE­I­CAR­POOEY­NAPPY­HOSE­POOPY­POO­POTTY­GHOST.'
+              'A5 wrote: LEGO­POLICE­I­CAR­POOEY­NAPPY­HOSE­POOPY­POO­POTTY­GHOST.'
             }
 
             p.mb-0 {
-              'C(4) wrote: LEGO HOUSE POOEY H '
+              'C4 wrote: LEGO HOUSE POOEY H '
               del {'M'}
               'N'
               del {'OO'}
@@ -207,7 +207,7 @@ return async env => {
             }
 
             p {
-              'A(5) wanted some reading practice.'
+              'A5 wanted some reading practice.'
             }
 
             p {
@@ -215,11 +215,11 @@ return async env => {
             }
 
             p {
-              'A(5) then annotated them with pictures to help him remember.'
+              'A5 then annotated them with pictures to help him remember.'
             }
 
             p.mb-0 {
-              'C(4) wasn’t as good at this and did some drawing by himself.'
+              'C4 wasn’t as good at this and did some drawing by himself.'
             }
           }
           div.colN.col7.colN-data {
@@ -278,7 +278,7 @@ return async env => {
             }
   
             p {
-              'A(5) has 42, C(4) has 18, how many total? Move 2 + 8 to become 10.'
+              'A5 has 42, C4 has 18, how many total? Move 2 + 8 to become 10.'
             }
 
             p {
@@ -318,11 +318,11 @@ return async env => {
             }
 
             p {
-              'C(4) wrote his in mirror image, interesting.'
+              'C4 wrote his in mirror image, interesting.'
             }
 
             p.mb-0 {
-              'Introduction to cursive. With some effort A(5) has written his name in cursive, C(4) to do next.'
+              'Introduction to cursive. With some effort A5 has written his name in cursive, C4 to do next.'
             }
           }
           div.colN.col7.colN-data {
@@ -415,11 +415,11 @@ return async env => {
             }
 
             p {
-              'C(4) often writes letters in mirror image and will sometimes write words right-to-left.'
+              'C4 often writes letters in mirror image and will sometimes write words right-to-left.'
             }
 
             p {
-              'When copying A(5)’s sentence, C(4) often copies from last letter to first letter. Need to work on the sequential aspect more; A(5) mostly gets it right.'
+              'When copying A5’s sentence, C4 often copies from last letter to first letter. Need to work on the sequential aspect more; A5 mostly gets it right.'
             }
 
             p.mb-0 {
@@ -494,7 +494,7 @@ return async env => {
             }
 
             p.mb-0 {
-              'We moved the sharks one or two bumps at a time, and we made the sharks turn around in the middle. C(4) took the photos (fair bit of camera shake).'
+              'We moved the sharks one or two bumps at a time, and we made the sharks turn around in the middle. C4 took the photos (fair bit of camera shake).'
             }
           }
           div.colN.col7.colN-data {
@@ -512,15 +512,15 @@ return async env => {
             }
 
             p {
-              'A(5) understands that they must move one step at a time. So far they do not get the idea of internal animation (making the legs and arms move).'
+              'A5 understands that they must move one step at a time. So far they do not get the idea of internal animation (making the legs and arms move).'
             }
 
             p {
-              'C(4) does not really understand the concept well or why the camera, table or playfield is not allowed to move between frames. He will get it by example.'
+              'C4 does not really understand the concept well or why the camera, table or playfield is not allowed to move between frames. He will get it by example.'
             }
 
             p.mb-0 {
-              'C(4) gets bored while taking the photos and starts to act silly, we will let C(4) move them later (and explain animation) while A(5) takes photos.'
+              'C4 gets bored while taking the photos and starts to act silly, we will let C4 move them later (and explain animation) while A5 takes photos.'
             }
           }
           div.colN.col7.colN-data {
@@ -534,7 +534,7 @@ return async env => {
             }
 
             p {
-              'A(5) set up 2 teams of 2 opposing tanks. They jockeyed a bit and then two tanks on right got blown up frame by frame. The two tanks on left then turned around and drove off to the left.'
+              'A5 set up 2 teams of 2 opposing tanks. They jockeyed a bit and then two tanks on right got blown up frame by frame. The two tanks on left then turned around and drove off to the left.'
             }
 
             p {
@@ -542,11 +542,11 @@ return async env => {
             }
 
             p {
-              'C(4) bumped the table slightly in the middle, but it did not affect things.'
+              'C4 bumped the table slightly in the middle, but it did not affect things.'
             }
 
             p.mb-0 {
-              'A few times I had to remind A(5) to make smaller movements between frames.'
+              'A few times I had to remind A5 to make smaller movements between frames.'
             }
           }
           div.colN.col7.colN-data {
@@ -556,7 +556,7 @@ return async env => {
             }
 
             p {
-              'The two men on the right are spinning to begin with. Then C(4) constructs some gates towards the back left.'
+              'The two men on the right are spinning to begin with. Then C4 constructs some gates towards the back left.'
             }
 
             p {
@@ -572,7 +572,7 @@ return async env => {
             }
 
             p {
-              'As C(4) does not really get the concept of stop motion it was easier to simply let him play and take photos at regular intervals, hence it has hands in the frame.'
+              'As C4 does not really get the concept of stop motion it was easier to simply let him play and take photos at regular intervals, hence it has hands in the frame.'
             }
 
             p.mb-0 {
@@ -597,71 +597,75 @@ return async env => {
       }
 
       p {
-        a(href="down_2252.jpg") {
-          img(width=768 height=512 src="down_2252.jpg") {}
+        a(href="IMG_2252_2145x1428.jpg") {
+          img.img-fluid(src="IMG_2252_768x512.jpg") {}
         }
       }
   
       p {
-        a(href="down_2257.jpg") {
-          img(width=768 height=512 src="down_2257.jpg") {}
+        a(href="IMG_2257_2145x1428.jpg") {
+          img.img-fluid(src="IMG_2257_768x512.jpg") {}
         }
       }
   
       p {
-        a(href="down_2263.jpg") {
-          img(width=512 height=768 src="down_2263.jpg") {}
+        a(href="IMG_2263_1428x2145.jpg") {
+          img.img-fluid.img-fluid-2-3(src="IMG_2263_512x768.jpg") {}
         }
       }
   
       p {
-        a(href="down_2265.jpg") {
-          img(width=768 height=512 src="down_2265.jpg") {}
+        a(href="IMG_2265_2145x1428.jpg") {
+          img.img-fluid(src="IMG_2265_768x512.jpg") {}
         }
       }
   
       p {
-        a(href="down_2267.jpg") {
-          img(width=768 height=512 src="down_2267.jpg") {}
+        a(href="IMG_2267_2145x1428.jpg") {
+          img.img-fluid(src="IMG_2267_768x512.jpg") {}
         }
       }
   
       p {
-        a(href="down_2275.jpg") {
-          img(width=768 height=512 src="down_2275.jpg") {}
+        a(href="IMG_2275_2145x1428.jpg") {
+          img.img-fluid(src="IMG_2275_768x512.jpg") {}
         }
       }
   
       p {
-        a(href="down_2288.jpg") {
-          img(width=768 height=512 src="down_2288.jpg") {}
+        a(href="IMG_2288_2145x1428.jpg") {
+          img.img-fluid(src="IMG_2288_768x512.jpg") {}
         }
       }
   
       p {
-        a(href="down_2306.jpg") {
-          img(width=256 height=171 src="down_2306.jpg") {}
+        a(href="IMG_2306_2145x1428.jpg") {
+          img.img-fluid.img-fluid-1-3(src="IMG_2306_768x512.jpg") {}
         }
 
-        a(href="down_2307.jpg") {
-          img(width=256 height=171 src="down_2307.jpg") {}
+        a(href="IMG_2307_2145x1428.jpg") {
+          img.img-fluid.img-fluid-1-3(src="IMG_2307_768x512.jpg") {}
         }
 
-        a(href="down_2308.jpg") {
-          img(width=256 height=171 src="down_2308.jpg") {}
+        a(href="IMG_2308_2145x1428.jpg") {
+          img.img-fluid.img-fluid-1-3(src="IMG_2308_768x512.jpg") {}
         }
       }
 
       h4 {'Saving the best for last'}
 
       p {
-        'And finally, after some pretty extensive post-production which will be detailed elsewhere when I have time, I would like to present the children’s stop-motion media creations, that we made on the Friday as a reward for their hard work.'
+        'And finally, after some pretty extensive post-production which will be detailed '
+        a(href="https://www.ndcode.org") {
+          'elsewhere'
+        }
+        ' when I have time, I would like to present the children’s stop-motion media creations, that we made on the Friday as a reward for their hard work.'
       }
 
       h5 {'Sharks—by all'}
 
       p {
-        video(width=768 controls src="https://cdn.proxsystec.com/videos/sharks.mp4") {
+        video.img_fluid(width="100%" controls src="https://cdn.proxsystec.com/videos/sharks.mp4") {
           'Your browser does not support the HTML5 Video element.'
         }
       }
@@ -669,23 +673,23 @@ return async env => {
       h5 {'High five—by all'}
 
       p {
-        video(width=768 controls src="https://cdn.proxsystec.com/videos/high_five.mp4") {
+        video.img_fluid(width="100%" controls src="https://cdn.proxsystec.com/videos/high_five.mp4") {
           'Your browser does not support the HTML5 Video element.'
         }
       }
 
-      h5 {'Tank battle—by A(5)'}
+      h5 {'Tank battle—by A5'}
 
       p {
-        video(width=768 controls src="https://cdn.proxsystec.com/videos/tank_battle.mp4") {
+        video.img_fluid(width="100%" controls src="https://cdn.proxsystec.com/videos/tank_battle.mp4") {
           'Your browser does not support the HTML5 Video element.'
         }
       }
 
-      h5 {'Water scene—by C(4)'}
+      h5 {'Water scene—by C4'}
 
       p {
-        video(width=768 controls src="https://cdn.proxsystec.com/videos/water_scene.mp4") {
+        video.img-fluid(width="100%" controls src="https://cdn.proxsystec.com/videos/water_scene.mp4") {
           'Your browser does not support the HTML5 Video element.'
         }
       }
diff --git a/blog/20220210/thumbnail.jpg b/blog/20220210/thumbnail.jpg
deleted file mode 100644 (file)
index dfe3cc8..0000000
Binary files a/blog/20220210/thumbnail.jpg and /dev/null differ
index 8637094..62e1d5b 100644 (file)
@@ -20,6 +20,11 @@ return async env => {
           for (let i = 0; i < menu.length; ++i) {
             let name = menu[i]
             let q = await children.get(name)
+            let images = await q.get_json('images')
+
+            // we can use higher resolution images when lower not available
+            while (images.length < 3)
+              images.push(images[images.length - 1])
 
             li.nav-item {
               a.nav-link.grid-gutter-background(href=`${name}/index.html`) {
@@ -27,7 +32,7 @@ return async env => {
                   tr {
                     td {
                       img(
-                        src=`${name}/${await q.get_json('thumbnail') || 'thumbnail.jpg'}`
+                        src=`${name}/${images[2]}`
                       ) {}
                     }
                     td {
index ed44bf9..8b345d7 100644 (file)
@@ -120,6 +120,14 @@ $footer-link-hover-color: darken($footer-link-color, 10%);
   background-color: theme-color-level("success", $alert-bg-level);
 }
 
+// use after .img-fluid
+.img-fluid-1-3 {
+  max-width: 33.333333%
+}
+.img-fluid-2-3 {
+  max-width: 66.666667%
+}
+
 // needed for svg icons inside buttons, card headers, etc
 // creates an inline element with correct width but no height
 // the svg is positioned within this to vertically centre on a capital letter