From 1a9aa24ebff5bdbc503b15c5546e261acd766427 Mon Sep 17 00:00:00 2001
From: Stephan Kerkman <stephan@kerkman.io>
Date: Sat, 30 May 2026 21:36:54 +0200
Subject: [PATCH] fix: use hx-swap=innerHTML so #photo-gallery id survives HTMX
 swaps

---
 .../plants/partials/photo_gallery.html         | 18 +++---------------
 1 file changed, 3 insertions(+), 15 deletions(-)

diff --git a/plants/templates/plants/partials/photo_gallery.html b/plants/templates/plants/partials/photo_gallery.html
index b7f4e62..69a8363 100644
--- a/plants/templates/plants/partials/photo_gallery.html
+++ b/plants/templates/plants/partials/photo_gallery.html
@@ -13,7 +13,7 @@
                 {% if not photo.is_thumbnail %}
                 <form method="post" action="{% url 'set_thumbnail' photo.pk %}"
                       hx-post="{% url 'set_thumbnail' photo.pk %}"
-                      hx-target="#photo-gallery" hx-swap="outerHTML">
+                      hx-target="#photo-gallery" hx-swap="innerHTML">
                     {% csrf_token %}
                     <button type="submit" class="btn btn-outline-success btn-sm py-0 px-1" style="font-size:.7rem;" title="Set as thumbnail">★</button>
                 </form>
@@ -22,7 +22,7 @@
                 {% endif %}
                 <form method="post" action="{% url 'delete_photo' photo.pk %}"
                       hx-post="{% url 'delete_photo' photo.pk %}"
-                      hx-target="#photo-gallery" hx-swap="outerHTML">
+                      hx-target="#photo-gallery" hx-swap="innerHTML">
                     {% csrf_token %}
                     <button type="submit" class="btn btn-outline-danger btn-sm py-0 px-1" style="font-size:.7rem;" title="Delete">✕</button>
                 </form>
@@ -34,7 +34,7 @@
     {% endwith %}
 
     <form method="post" action="{% url 'upload_photo' plant.pk %}" enctype="multipart/form-data"
-          hx-post="{% url 'upload_photo' plant.pk %}" hx-target="#photo-gallery" hx-swap="outerHTML"
+          hx-post="{% url 'upload_photo' plant.pk %}" hx-target="#photo-gallery" hx-swap="innerHTML"
           hx-encoding="multipart/form-data" hx-indicator="#photo-upload-spinner">
         {% csrf_token %}
         <div class="d-flex gap-2 align-items-center flex-wrap">
@@ -45,15 +45,3 @@
         </div>
     </form>
 </div>
-
-{% if request.htmx %}
-<div id="plant-hero-container" hx-swap-oob="true">
-{% if plant.species and plant.species.api_image_url %}
-<img src="{{ plant.species.api_image_url }}" class="plant-hero rounded mb-3" alt="{{ plant.species.common_name }}">
-{% elif plant.thumbnail_url %}
-<img src="{{ plant.thumbnail_url }}" class="plant-hero rounded mb-3" alt="{{ plant.name }}">
-{% else %}
-<div class="plant-hero-placeholder rounded mb-3">🌿</div>
-{% endif %}
-</div>
-{% endif %}