Swapped to image-based list; video first frames

config.toml

@@ -15,6 +15,8 @@ enableGitInfo   = false
 enableEmoji     = true
 disableRSS      = false
 
+paginate = 36
+
 [markup]
   [markup.goldmark]
     [markup.goldmark.extensions]

layouts/instagram-posts/list.html

@@ -0,0 +1,29 @@
+{{ define "main" }}
+    {{ $paginator := .Paginate .Data.Pages }}
+    
+    <main class="posts instagram">
+        <h1>{{ title (replace .Title "-" " ") }}</h1>
+
+        {{ if .Content }}
+            <div class="content">{{ .Content }}</div>
+        {{ end }}
+
+        {{ range $paginator.Pages.GroupByDate "2006" }}
+            <div class="posts-group">
+                <div class="post-year">{{ .Key }}</div>
+
+                <ul class="posts-list">
+                    {{ range .Pages }}
+                        <li class="post-item">
+                            <a href="{{.Permalink}}">
+                              {{ $firstMedia := index .Params.Media 0 }}
+                              <img src="{{.Permalink}}{{ $firstMedia }}{{if hasSuffix $firstMedia ".mp4"}}.jpg{{ end }}" />
+                            </a>
+                        </li>
+                    {{ end }}
+                </ul>
+            </div>
+        {{ end }}
+    {{ partial "pagination-list.html" . }}
+    </main>
+{{ end }}

layouts/instagram-posts/single.html

@@ -1,10 +1,12 @@
 {{ define "main" }}
-    <main class="post">
+    <main class="post instagram">
         <article>
             <div class="post-content">
-                {{ range .Params.Media }}
-                    <figure><img src="{{ . }}" /></figure>
-                {{ end }}
+                <div class="instagram-media">
+                    {{ range .Params.Media }}
+                        {{ partial "imgorvid.html" . }}
+                    {{ end }}
+                </div>
 
                 {{ .Content }}
             </div>

layouts/partials/imgorvid.html

@@ -0,0 +1,11 @@
+<figure>
+  {{ if hasSuffix . ".mp4" }}
+      <video controls loop>
+          <source src="{{.}}" type="video/mp4">
+          <img src="{{ . }}.jpg" />
+          (Your browser can't play videos. <a href="{{.}}">Download instead</a>.)
+      </video>
+  {{ else }}
+      <img src="{{ . }}" />
+  {{ end }}
+</figure>

themes/hello-friend-ng/assets/scss/_main.scss

@@ -153,6 +153,40 @@ img.profile {
   }
 }
 
+.instagram {
+  .posts-list {
+    li {
+      border: 0;
+      display: inline;
+
+      a {
+        display: inline;
+
+        figure, img, video {
+          display: inline;
+          object-fit: cover;
+          object-position: center;
+          height: 200px;
+          width: 200px;
+        }
+      }
+    }
+    
+  }
+}
+
+.instagram-media {
+  figure {
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 100%;
+  }
+  video, img {
+    max-width: 100%;
+    max-height: 75vh;
+  }
+}
+
 img, postcard-display {
   display: block;
   max-width: 100%;

tools/archive/instagram/main.go

@@ -9,6 +9,7 @@ import (
 	"fmt"
 	"io"
 	"os"
+	"os/exec"
 	"path"
 	"regexp"
 	"strings"
@@ -69,12 +70,11 @@ type location struct {
 }
 
 type frontMatter struct {
-	Title     string
-	Media     []string
-	Date      string
-	Draft     bool
-	Tags      []string
-	Locations []location
+	Title string
+	Media []string
+	Date  string
+	Draft bool
+	Tags  []string
 }
 
 type post struct {
@@ -87,7 +87,6 @@ type media struct {
 	URI               string
 	CreationTimestamp int64 `json:"creation_timestamp"`
 	Title             string
-	MediaMetadata     map[string]interface{}
 }
 
 func main() {
@@ -295,6 +294,16 @@ func copyMedia(zf *zip.ReadCloser, mediaMap map[string]string) error {
 		defer doClose(mediaFile, "Unable to close media file in blog archive")
 
 		io.Copy(mediaFile, mf)
+
+		if strings.HasSuffix(dst, ".mp4") {
+			makeThumbnail(dst, dst+".jpg")
+		}
 	}
 	return nil
 }
+
+func makeThumbnail(video, output string) error {
+	cmd := exec.Command("ffmpeg", "-y", "-i", video, "-vf", "select=eq(n\\,0)", "-q:v", "3", output)
+	fmt.Println(cmd.String())
+	return cmd.Run()
+}