plumber/templates/partials/_image_picker.html

{{define "imagePicker"}}
<fieldset class="image-picker" data-image-picker data-max-images="4" data-max-videos="1">
  <legend>Photos and video <span class="optional">(optional)</span></legend>
  <p id="{{.ID}}-hint" class="image-picker-hint">
    Add up to 4 JPEG, PNG, or WebP images (5 MB each) and one MP4 or WebM video (25 MB).
  </p>
  <div class="video-picker-slot" data-video-slot>
    {{if .Video}}
      <article class="video-preview" data-video-card data-existing-video>
        <div class="video-preview-media">
          <video src="{{.Video.PublicURL}}" controls playsinline preload="metadata"
            {{if .Video.Description}}aria-label="{{.Video.Description}}"{{else}}aria-label="Saved video"{{end}}></video>
          <span class="image-preview-tag">Saved</span>
        </div>
        <div class="image-preview-fields">
          <input type="hidden" name="existing_image_id" value="{{.Video.ID}}">
          <label for="{{.ID}}-video-description-{{.Video.ID}}">
            Video description <span class="optional">(optional)</span>
          </label>
          <input id="{{.ID}}-video-description-{{.Video.ID}}" type="text"
            name="existing_image_description" maxlength="500"
            value="{{.Video.Description}}" placeholder="What should people notice?">
          <button class="image-remove" type="button" data-remove-image
            aria-label="Remove video{{if .Video.Description}}: {{.Video.Description}}{{end}}">
            Remove
          </button>
        </div>
      </article>
    {{end}}
  </div>
  <div class="image-dropzone" data-image-dropzone>
    <input id="{{.ID}}" class="image-input" type="file" name="images"
      accept="image/jpeg,image/png,image/webp,video/mp4,video/webm,.mp4,.webm" multiple
      aria-describedby="{{.ID}}-hint {{.ID}}-status {{.ID}}-error"
      data-image-input>
    <label class="image-dropzone-label" for="{{.ID}}">
      <strong>Drop photos or a video 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 .Photos}} of 4{{if .Video}} · 1 video{{end}}</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 .Photos}}
      <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>
  <template data-video-template>
    <article class="video-preview" data-video-card data-new-video>
      <div class="video-preview-media">
        <video controls playsinline preload="metadata" data-video-preview></video>
        <span class="image-preview-tag">New</span>
      </div>
      <div class="image-preview-fields">
        <p class="image-preview-name" data-image-name></p>
        <label>
          Video 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 video">
          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"}}
{{range .Images}}
  {{if eq .Kind "video"}}
    <figure class="post-video">
      <video src="{{.PublicURL}}" controls playsinline preload="metadata"
        {{if .Description}}aria-label="{{.Description}}"{{else}}aria-label="Video attached to this post"{{end}}></video>
      {{if .Description}}<figcaption>{{.Description}}</figcaption>{{end}}
    </figure>
  {{end}}
{{end}}
{{$photos := postPhotos .Images}}
{{if $photos}}
  <div class="post-image-grid post-image-grid-{{len $photos}}">
    {{range $photos}}
      <figure class="post-image">
        <a class="post-image-zoom" href="{{.PublicURL}}" data-image-zoom>
          <img src="{{.PublicURL}}" width="{{.Width}}" height="{{.Height}}"
            alt="{{if .Description}}{{.Description}}{{else}}Photo attached to this post{{end}}"
            loading="lazy" decoding="async">
        </a>
        {{if .Description}}<figcaption>{{.Description}}</figcaption>{{end}}
      </figure>
    {{end}}
  </div>
{{end}}
{{end}}