|
|
@@ -0,0 +1,134 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <title>Browse Uploaded Images</title>
|
|
|
+ <style>
|
|
|
+ * {
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ body {
|
|
|
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ padding: 20px;
|
|
|
+ }
|
|
|
+ h2 {
|
|
|
+ margin-bottom: 15px;
|
|
|
+ color: #333;
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+ .search-bar {
|
|
|
+ width: 100%;
|
|
|
+ padding: 10px 15px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ border-radius: 5px;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ .gallery {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
|
|
+ gap: 15px;
|
|
|
+ }
|
|
|
+ .gallery-item {
|
|
|
+ background: #fff;
|
|
|
+ border: 2px solid transparent;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 8px;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.2s ease;
|
|
|
+ text-align: center;
|
|
|
+ box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
|
|
+ }
|
|
|
+ .gallery-item:hover {
|
|
|
+ border-color: #009999;
|
|
|
+ box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
|
|
+ transform: translateY(-2px);
|
|
|
+ }
|
|
|
+ .gallery-item img {
|
|
|
+ width: 100%;
|
|
|
+ height: 120px;
|
|
|
+ object-fit: contain;
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
+ .gallery-item .filename {
|
|
|
+ margin-top: 8px;
|
|
|
+ font-size: 11px;
|
|
|
+ color: #666;
|
|
|
+ word-break: break-all;
|
|
|
+ line-height: 1.3;
|
|
|
+ }
|
|
|
+ .no-images {
|
|
|
+ text-align: center;
|
|
|
+ color: #888;
|
|
|
+ padding: 40px;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+
|
|
|
+ <h2>Select an Image</h2>
|
|
|
+
|
|
|
+ {% if images %}
|
|
|
+ <input
|
|
|
+ type="text"
|
|
|
+ class="search-bar"
|
|
|
+ id="searchInput"
|
|
|
+ placeholder="Search by filename..."
|
|
|
+ onkeyup="filterImages()"
|
|
|
+ >
|
|
|
+
|
|
|
+ <div class="gallery" id="imageGallery">
|
|
|
+ {% for image in images %}
|
|
|
+ <div class="gallery-item"
|
|
|
+ onclick="selectImage('{{ image.url }}')"
|
|
|
+ data-filename="{{ image.filename|lower }}">
|
|
|
+ <img src="{{ image.url }}"
|
|
|
+ alt="{{ image.filename }}"
|
|
|
+ loading="lazy">
|
|
|
+ <div class="filename">{{ image.filename }}</div>
|
|
|
+ </div>
|
|
|
+ {% endfor %}
|
|
|
+ </div>
|
|
|
+ {% else %}
|
|
|
+ <div class="no-images">
|
|
|
+ <p>No images have been uploaded yet.</p>
|
|
|
+ <p>Use the "Upload" tab in the image dialog to add your first image.</p>
|
|
|
+ </div>
|
|
|
+ {% endif %}
|
|
|
+
|
|
|
+ <script>
|
|
|
+ /**
|
|
|
+ * Sends the selected image URL back to TinyMCE
|
|
|
+ * using postMessage (the correct way for TinyMCE 5+ dialogs).
|
|
|
+ */
|
|
|
+ function selectImage(url) {
|
|
|
+ window.parent.postMessage({
|
|
|
+ mceAction: 'selectImage',
|
|
|
+ url: url
|
|
|
+ }, '*');
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Filters the gallery based on the search input.
|
|
|
+ */
|
|
|
+ function filterImages() {
|
|
|
+ var searchTerm = document.getElementById('searchInput').value.toLowerCase();
|
|
|
+ var items = document.querySelectorAll('.gallery-item');
|
|
|
+
|
|
|
+ items.forEach(function (item) {
|
|
|
+ var filename = item.getAttribute('data-filename');
|
|
|
+ if (filename.includes(searchTerm)) {
|
|
|
+ item.style.display = '';
|
|
|
+ } else {
|
|
|
+ item.style.display = 'none';
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ </script>
|
|
|
+
|
|
|
+</body>
|
|
|
+</html>
|
