| 1 |
<div class="content-section"> |
| 2 |
<div class="section-header user-media-header"> |
| 3 |
<h2 class="subsection-title">Media Library</h2> |
| 4 |
<span class="form-hint">{{ storage_display }} used</span> |
| 5 |
</div> |
| 6 |
|
| 7 |
<p class="form-hint user-media-intro"> |
| 8 |
Upload images and videos to embed in your item content, sections, and blog posts. |
| 9 |
Use <code></code> in your markdown to reference uploaded files. |
| 10 |
</p> |
| 11 |
|
| 12 |
|
| 13 |
<div id="media-upload-area" class="user-media-upload" data-media-dropzone> |
| 14 |
<div class="user-media-upload-row"> |
| 15 |
<label class="user-media-upload-label"> |
| 16 |
Folder: |
| 17 |
<input type="text" id="media-folder-input" placeholder="(root)" class="user-media-upload-folder-input"> |
| 18 |
</label> |
| 19 |
<input type="file" id="media-file-input" multiple accept="image/*,video/*" class="sr-only" |
| 20 |
data-change="onMediaFilesChange"> |
| 21 |
<button class="btn" data-action="click" data-target="media-file-input">Choose Files</button> |
| 22 |
</div> |
| 23 |
<p class="form-hint">or drag and drop files here</p> |
| 24 |
<div id="media-upload-progress" class="user-media-upload-progress"></div> |
| 25 |
</div> |
| 26 |
|
| 27 |
|
| 28 |
{% if !folders.is_empty() %} |
| 29 |
<div class="user-media-folders"> |
| 30 |
<span class="user-media-folders-label">Folders:</span> |
| 31 |
<button class="btn-small user-media-folders-btn{% if folders.is_empty() %} is-selected{% endif %}" data-action="mediaFilterAll">All</button> |
| 32 |
<button class="btn-small user-media-folders-btn" data-action="mediaFilterFolderBtn" data-arg="">(root)</button> |
| 33 |
{% for folder in folders %} |
| 34 |
{% if !folder.is_empty() %} |
| 35 |
<button class="btn-small user-media-folders-btn" data-action="mediaFilterFolderBtn" data-arg="{{ folder }}">{{ folder }}</button> |
| 36 |
{% endif %} |
| 37 |
{% endfor %} |
| 38 |
</div> |
| 39 |
{% endif %} |
| 40 |
|
| 41 |
|
| 42 |
{% if files.is_empty() %} |
| 43 |
<p class="muted">No media files yet. Upload images or videos to get started.</p> |
| 44 |
{% else %} |
| 45 |
<div id="media-grid" class="user-media-grid"> |
| 46 |
{% for file in files %} |
| 47 |
<div class="media-card user-media-card" data-folder="{{ file.folder }}"> |
| 48 |
{% if file.media_type == "image" %} |
| 49 |
<div class="user-media-card-thumb"> |
| 50 |
<img src="{{ file.cdn_url }}" alt="{{ file.filename }}" class="user-media-card-img" loading="lazy"> |
| 51 |
</div> |
| 52 |
{% else %} |
| 53 |
<div class="user-media-card-thumb user-media-card-thumb--video"> |
| 54 |
▶ |
| 55 |
</div> |
| 56 |
{% endif %} |
| 57 |
<div class="user-media-card-name" title="{{ file.filename }}">{{ file.filename }}</div> |
| 58 |
<div class="user-media-card-meta"> |
| 59 |
{% if !file.folder.is_empty() %}{{ file.folder }} · {% endif %}{{ file.file_size }} · {{ file.created_at }} |
| 60 |
</div> |
| 61 |
<div class="user-media-card-actions"> |
| 62 |
<button class="btn-small user-media-card-btn" data-action="mediaCopyRef" data-arg="{{ file.markdown_ref }}">Copy ref</button> |
| 63 |
<button class="btn-small btn-danger user-media-card-btn" data-filename="{{ file.filename }}" data-action="mediaDeleteFileBtn" data-arg="{{ file.id }}">Delete</button> |
| 64 |
</div> |
| 65 |
</div> |
| 66 |
{% endfor %} |
| 67 |
</div> |
| 68 |
{% endif %} |
| 69 |
</div> |
| 70 |
|
| 71 |
|
| 72 |
<script src="/static/tab-user-media.js?v=0623"></script> |
| 73 |
|