Add post image upload interface

2026-08-28 05:31:12 -07:00
parent 677e63329d
commit ab58398e68
9 changed files with 641 additions and 4 deletions
@@ -0,0 +1,85 @@
+{{define "imagePicker"}}
+<fieldset class="image-picker" data-image-picker data-max-images="4">
+  <legend>Photos <span class="optional">(optional)</span></legend>
+  <p id="{{.ID}}-hint" class="image-picker-hint">
+    Add up to 4 JPEG, PNG, or WebP images. Each image can be up to 5 MB.
+  </p>
+  <div class="image-dropzone" data-image-dropzone>
+    <input id="{{.ID}}" class="image-input" type="file" name="images"
+      accept="image/jpeg,image/png,image/webp" multiple
+      aria-describedby="{{.ID}}-hint {{.ID}}-status {{.ID}}-error"
+      data-image-input>
+    <label class="image-dropzone-label" for="{{.ID}}">
+      <strong>Drop photos here</strong>
+      <span>or click to browse</span>
+    </label>
+    <span id="{{.ID}}-status" class="image-picker-count" role="status"
+      aria-live="polite" data-image-count>{{len .Images}} of 4</span>
+  </div>
+  <p id="{{.ID}}-error" class="image-picker-error" role="alert"
+    data-image-error hidden></p>
+
+  <div class="image-preview-list" data-image-list>
+    {{range .Images}}
+      <article class="image-preview" data-image-card data-existing-image>
+        <div class="image-preview-media">
+          <img src="{{.PublicURL}}" alt="" width="{{.Width}}" height="{{.Height}}">
+          <span class="image-preview-tag">Saved</span>
+        </div>
+        <div class="image-preview-fields">
+          <input type="hidden" name="existing_image_id" value="{{.ID}}">
+          <label for="{{$.ID}}-description-{{.ID}}">
+            Image description <span class="optional">(optional)</span>
+          </label>
+          <input id="{{$.ID}}-description-{{.ID}}" type="text"
+            name="existing_image_description" maxlength="500"
+            value="{{.Description}}" placeholder="What should people notice?">
+          <button class="image-remove" type="button" data-remove-image
+            aria-label="Remove image{{if .Description}}: {{.Description}}{{end}}">
+            Remove
+          </button>
+        </div>
+      </article>
+    {{end}}
+  </div>
+
+  <template data-image-template>
+    <article class="image-preview" data-image-card data-new-image>
+      <div class="image-preview-media">
+        <img alt="" data-image-preview>
+        <span class="image-preview-tag">New</span>
+      </div>
+      <div class="image-preview-fields">
+        <p class="image-preview-name" data-image-name></p>
+        <label>
+          Image description <span class="optional">(optional)</span>
+          <input type="text" name="image_description" maxlength="500"
+            placeholder="What should people notice?">
+        </label>
+        <button class="image-remove" type="button" data-remove-image
+          aria-label="Remove selected image">
+          Remove
+        </button>
+      </div>
+    </article>
+  </template>
+  <noscript>
+    <p class="image-picker-hint">Image previews and removal while editing require JavaScript.</p>
+  </noscript>
+</fieldset>
+{{end}}
+
+{{define "postImages"}}
+{{if .Images}}
+  <div class="post-image-grid post-image-grid-{{len .Images}}">
+    {{range .Images}}
+      <figure class="post-image">
+        <img src="{{.PublicURL}}" width="{{.Width}}" height="{{.Height}}"
+          alt="{{if .Description}}{{.Description}}{{else}}Photo attached to this post{{end}}"
+          loading="lazy" decoding="async">
+        {{if .Description}}<figcaption>{{.Description}}</figcaption>{{end}}
+      </figure>
+    {{end}}
+  </div>
+{{end}}
+{{end}}