#116 htmx gallery layout for bootstrap4 + some tests

cast/blocks.py

@@ -145,15 +145,19 @@ def prepare_context_for_gallery(images: QuerySet[AbstractImage], context: dict)
     return context
 
 
-def get_gallery_block_template(default_template_name: str, context: Optional[dict]) -> str:
+def get_gallery_block_template(default_template_name: str, context: Optional[dict], layout: str = "default") -> str:
+    print("default_template_name: ", default_template_name, "context: ", context, "layout: ", layout)
     if context is None:
         return default_template_name
 
     template_base_dir = context.get("template_base_dir")
     if template_base_dir is None:
         return default_template_name
 
-    template_from_theme = f"cast/{template_base_dir}/gallery.html"
+    if layout == "htmx":
+        template_from_theme = f"cast/{template_base_dir}/gallery_htmx.html"
+    else:
+        template_from_theme = f"cast/{template_base_dir}/gallery.html"
     try:
         get_template(template_from_theme)
         return template_from_theme
@@ -194,13 +198,15 @@ class GalleryBlockWithLayout(StructBlock):
     class Meta:
         icon = "image"
         label = "Gallery with Layout"
+        template = "cast/gallery.html"
 
     def get_template(self, value=None, context=None):
         default_template_name = super().get_template(value, context)
-        print("value: ", value)
-        if value["layout"] == "htmx":
-            return "cast/bootstrap5/gallery_htmx.html"
-        return get_gallery_block_template(default_template_name, context)
+        layout = "default"
+        if value is not None:
+            if (layout_from_value := value.get("layout")) is not None:
+                layout = layout_from_value
+        return get_gallery_block_template(default_template_name, context, layout=layout)
 
     def get_context(self, value, parent_context: Optional[dict] = None):
         context = super().get_context(value, parent_context=parent_context)

cast/templates/cast/bootstrap4/gallery_htmx.html

@@ -0,0 +1,64 @@
+<h5>HTMX Gallery</h5>
+<div class="cast-gallery-container">
+  {% for image in images %}
+    <a
+      hx-get="{% url 'cast:gallery-modal' template_base_dir=template_base_dir %}?image_pks={{ image_pks }}&current_image_pk={{ image.pk }}&block_id={{ block.id }}"
+      hx-trigger="click"
+      hx-target="#imageGalleryModal-{{ block.id }}"
+      class="cast-image-gallery-thumbnail cast-gallery-modal"
+      data-full="{{ image.file.url }}"
+      data-toggle="modal"
+      data-target="#imageGalleryModal-{{ block.id }}"
+    >
+      <picture>
+        <source
+          srcset="{{ image.thumbnail.srcset.avif }}"
+          type="image/avif"
+          sizes="{{ image.thumbnail.sizes }}"
+          data-modal-src="{{ image.modal.src.avif }}"
+          data-modal-srcset="{{ image.modal.srcset.avif }}"
+          data-modal-sizes="{{ image.modal.sizes }}"
+        >
+        <img
+          id="img-{{image.pk}}"
+          class="cast-gallery-thumbnail"
+          alt="{{ image.default_alt_text }}"
+          src="{{ image.thumbnail.src.jpeg }}"
+          srcset="{{ image.thumbnail.srcset.jpeg }}"
+          sizes="{{ image.thumbnail.sizes }}"
+          width="{{ image.thumbnail.width }}"
+          height="{{ image.thumbnail.height }}"
+          data-modal-src="{{ image.modal.src.jpeg }}"
+          data-modal-srcset="{{ image.modal.srcset.jpeg }}"
+          data-modal-sizes="{{ image.modal.sizes }}"
+          data-modal-width="{{ image.modal.width }}"
+          data-modal-height="{{ image.modal.height }}"
+          data-prev="{{ image.prev }}"
+          data-next="{{ image.next }}"
+          loading="lazy"
+        />
+      </picture>
+    </a>
+  {% endfor %}
+  <!-- Modal -->
+  <div class="modal fade" id="imageGalleryModal-{{ block.id }}" tabindex="-1" role="dialog"
+       aria-labelledby="galleryModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-lg cast-gallery-lg" role="document">
+      <div class="modal-content cast-gallery-content">
+        <div class="modal-header cast-gallery-header">
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+            <span aria-hidden="true">&times;</span>
+          </button>
+        </div>
+        <div class="modal-body cast-gallery-body">
+          <picture class="modal-picture">
+            <source class="modal-source" srcset="" sizes="" type="image/avif">
+            <img class="modal-image cast-image" alt="modal image placeholder" src="" srcset="" sizes="100vw">
+          </picture>
+        </div>
+        <div class="modal-footer cast-gallery-footer">
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

cast/templates/cast/bootstrap4/gallery_modal.html

@@ -0,0 +1,54 @@
+<div class="modal-dialog modal-lg cast-gallery-lg" role="document">
+  <div class="modal-content cast-gallery-content">
+    <div class="modal-header cast-gallery-header">
+      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+        <span aria-hidden="true">&times;</span>
+      </button>
+    </div>
+    <div class="modal-body cast-gallery-body">
+      <a href="{{ current_image.file.url }}">
+        <picture class="modal-picture">
+          <source
+            class="modal-source"
+            srcset="{{ current_image.modal.srcset.avif }}"
+            sizes="{{ current_image.modal.sizes }}"
+            type="image/avif"
+          >
+          <img
+            class="modal-image cast-image"
+            alt="{{ current_image.default_alt_text }}"
+            src="{{ current_image.modal.src.jpeg }}"
+            srcset="{{ current_image.modal.srcset.jpeg }}"
+            sizes="{{ current_image.modal.sizes }}"
+          >
+        </picture>
+      </a>
+    </div>
+    <div class="modal-footer cast-gallery-footer">
+      <button
+        id="data-prev"
+        type="button"
+        class="btn btn-primary {% if not prev_image %}disabled{% endif %}"
+        {% if prev_image %}
+          hx-get="{% url 'cast:gallery-modal' template_base_dir=template_base_dir %}?image_pks={{ image_pks }}&current_image_pk={{ prev_image.pk }}&block_id={{ block_id }}"
+          hx-trigger="click, keyup[key=='ArrowLeft'] from:body"
+          hx-target="#imageGalleryModal-{{ block_id }}"
+        {% endif %}
+      >
+        Prev
+      </button>
+      <button
+        id="data-next"
+        type="button"
+        class="btn btn-primary {% if not next_image %}disabled{% endif %}"
+        {% if next_image %}
+          hx-get="{% url 'cast:gallery-modal' template_base_dir=template_base_dir %}?image_pks={{ image_pks }}&current_image_pk={{ next_image.pk }}&block_id={{ block_id }}"
+          hx-trigger="click, keyup[key=='ArrowRight'] from:body"
+          hx-target="#imageGalleryModal-{{ block_id }}"
+        {% endif %}
+      >
+        Next
+      </button>
+    </div>
+  </div>
+</div>

tests/blocks_test.py

@@ -8,6 +8,7 @@
     CastImageChooserBlock,
     CodeBlock,
     GalleryBlock,
+    GalleryBlockWithLayout,
     get_srcset_images_for_slots,
 )
 from cast.models import Gallery
@@ -180,3 +181,18 @@ def test_gallery_block_get_context_parent_context_none():
     cb = GalleryBlock(ImageChooserBlock())
     context = cb.get_context(Gallery.objects.none(), parent_context=None)
     assert "value" in context
+
+
+def test_gallery_block_with_layout_get_template_htmx():
+    block = GalleryBlockWithLayout()
+    template = block.get_template({"layout": "htmx"}, context={"template_base_dir": "bootstrap4"})
+    assert template == "cast/bootstrap4/gallery_htmx.html"
+
+
+def test_gallery_block_with_layout_get_template_value_is_none():
+    block = GalleryBlockWithLayout()
+    template = block.get_template(None, context={"template_base_dir": "bootstrap4"})
+    assert template == "cast/bootstrap4/gallery.html"
+
+    template = block.get_template({}, context={"template_base_dir": "bootstrap4"})
+    assert template == "cast/bootstrap4/gallery.html"