added ability to make images with button

pkg/webpages/cdn/custom.css

@@ -59,4 +59,53 @@
   @media screen and (max-height: 450px) {
     .sidenav {padding-top: 15px;}
     .sidenav a {font-size: 18px;}
-  }
+  }
+.image-select {
+    width: 260px;
+    position: relative;
+    color: white;
+    font-family: monospace;
+}
+
+.image-select .selected {
+    background: rgb(73, 73, 73);
+    padding: 10px;
+    cursor: pointer;
+    border-radius: 4px;
+    user-select: none;
+}
+
+.image-select .options {
+    display: none;
+    position: absolute;
+    background: rgb(50, 50, 50);
+    width: 100%;
+    border: 1px solid #444;
+    z-index: 100;
+    max-height: 300px;
+    overflow-y: auto;
+    border-radius: 4px;
+}
+
+.image-select .option {
+    display: flex;
+    align-items: center;
+    padding: 8px;
+    gap: 10px;
+    cursor: pointer;
+}
+
+.image-select .option:hover {
+    background: rgb(90, 90, 90);
+}
+
+.image-select .option img {
+    width: 40px;
+    height: 40px;
+    object-fit: cover;
+    border-radius: 3px;
+}
+
+.real-select {
+    display: none;
+}

pkg/webpages/cdn/image-insert.js

@@ -27,3 +27,42 @@ function insertSelectedImage() {
 
     insertHtmlAtCursor(textarea, html);
 }
+
+
+function toggleDropdown(el) {
+    const options = el.parentElement.querySelector('.options');
+    const open = options.style.display === "block";
+    document.querySelectorAll('.image-select .options').forEach(o => o.style.display = "none");
+    options.style.display = open ? "none" : "block";
+}
+
+function chooseImage(optionEl, id) {
+    const container = optionEl.closest('.image-select');
+
+    // set visible label
+    container.querySelector('.selected span').textContent = id;
+
+    // set real select value
+    container.querySelector('.real-select').value = id;
+
+    // close dropdown
+    container.querySelector('.options').style.display = "none";
+}
+
+// close dropdown when clicking outside
+document.addEventListener("click", function (e) {
+    if (!e.target.closest(".image-select")) {
+        document.querySelectorAll('.image-select .options').forEach(o => o.style.display = "none");
+    }
+});
+
+
+function showPreview(src) {
+    const box = document.getElementById('previewBox');
+    box.innerHTML = `<img src="${src}">`;
+    box.style.display = 'block';
+}
+
+function hidePreview() {
+    document.getElementById('previewBox').style.display = 'none';
+}

pkg/webpages/html/blogpost_editor.html

@@ -59,19 +59,32 @@
                                     style="background-color: rgb(73, 73, 73); color: white;">{{ .Body }}</textarea>
                             </div>
                             <div class="row"
-                                style="background-color: rgb(22, 22, 22); color: white; height: fit-content; font-size: larger; font-family: monospace;">
-                                
-                                <a>Insert an image:</a>
+                                style="background-color: rgb(22, 22, 22); color: white; height: fit-content; font-size: large; font-family: monospace;">
+                                <div class="image-select">
+                                    <!-- visible dropdown button -->
+                                    <div class="selected" onclick="toggleDropdown(this)">
+                                        <span>Select an image</span>
+                                    </div>
 
-                                <select id="imageSelect" class="form-select"
-                                    style="background-color: rgb(73, 73, 73); color: white; height: fit-content; font-size: larger; font-family: monospace;">
-                                    <option selected value="">select an image to insert</option>
-                                    {{ range .ImageIds }}
-                                    <option value="{{ . }}">{{ . }}</option>
-                                    {{ end }}
-                                </select>
+                                    <!-- dropdown list -->
+                                    <div class="options">
+                                        {{ range .ImageIds }}
+                                        <div class="option" onclick="chooseImage(this, '{{ . }}')">
+                                            <img src="/api/v1/images/{{ . }}">
+                                            <span>{{ . }}</span>
+                                        </div>
+                                        {{ end }}
+                                    </div>
 
-                                <button 
+                                    <!-- REAL select for form submission -->
+                                    <select name="imageId" class="real-select" id="imageSelect">
+                                        <option value="">Select an image</option>
+                                        {{ range .ImageIds }}
+                                        <option value="{{ . }}">{{ . }}</option>
+                                        {{ end }}
+                                    </select>
+                                </div>
+                                <button
                                     type="button"
                                     hx-on:click="insertSelectedImage()">
                                     Insert Image