codegirl007
394c7413c4
Adds accessible drag-and-drop and browse controls, staged attachment editing, responsive lazy-loaded thread image grids, and UI regression coverage. Reviewed-on: #12 Co-authored-by: codegirl-007 <s.raide@gmail.com>
86 lines
3.3 KiB
HTML
86 lines
3.3 KiB
HTML
{{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}}
|