Merge pull request #312 from jamesvandyne/homepage-gallery-modal-images

Open clicks on gallery in a modal on homepage

apps/interfaces/public/files/urls.py

@@ -5,4 +5,5 @@
 urlpatterns = [
     path("upload", views.micropub_media, name="micropub_media"),
     path("<uuid:uuid>", views.get_media, name="get_media"),
+    path("<uuid:uuid>/modal", views.get_media_modal, name="get_media_modal"),
 ]

apps/interfaces/public/files/views.py

@@ -5,7 +5,7 @@
     HttpResponseNotAllowed,
     JsonResponse,
 )
-from django.shortcuts import get_object_or_404
+from django.shortcuts import get_object_or_404, render
 from django.views.decorators.csrf import csrf_exempt
 
 from data.files import models as file_models
@@ -53,3 +53,8 @@ def get_media(request, uuid):
         as_attachment=as_attachment,
     )
     return response
+
+
+def get_media_modal(request, uuid):
+    t_file: file_models.TFile = get_object_or_404(file_models.TFile, uuid=uuid)
+    return render(request, "public/files/modal.html", {"t_file": t_file})

apps/templates/base_public.html

@@ -129,5 +129,10 @@ <h1 class="text-secondary text-2xl {% if centered_nav %}md:mx-auto{% endif %}">
             {% endblock %}
         </footer>
     </div>
+    <script src="{% static 'js/htmx.min.js' %}" defer></script>
+    <script src="{% static 'js/_hyperscript.min.js' %}" defer></script>
+    <script src="{% static 'js/ext/loading-states.js' %}" defer></script>
+    {% block body_end %}
+    {% endblock %}
 </body>
 </html>

apps/templates/fragments/modal.html

@@ -1,6 +1,6 @@
 <div id="modal" _="on closeModal add .closing then wait for animationend then remove me">
     <div class="modal-underlay" _="on click trigger closeModal"></div>
-    <div class="bg-bianca-500 modal-content">
+    <div class="bg-primary modal-content">
         {% block modal_content %}{% endblock %}
     </div>
 </div>

apps/templates/public/files/modal.html

@@ -0,0 +1,5 @@
+{% extends "fragments/modal.html" %}
+
+{% block modal_content %}
+    <img src="{% url 'public:get_media' t_file.uuid %}?s=600" alt="" loading="lazy" class="mx-auto"/>
+{% endblock %}

apps/templates/public/home.html

@@ -86,7 +86,13 @@ <h1>🌏 Last seen...</h1>
                 <h1>📸 Photos</h1>
                 <div class="mt-2 grid grid-cols-3 gap-2 md:grid-cols-5">
                     {% for photo in photo_gallery %}
-                        <picture>
+                        <picture
+                            hx-get="{% url 'public:get_media_modal' photo.uuid %}"
+                            hx-trigger="click"
+                            hx-target="body"
+                            hx-swap="beforeend"
+                            class="cursor-pointer"
+                        >
                             <source srcset="{% url 'public:get_media' photo.uuid %}?s=256&f=image/webp 2x" type="image/webp"/>
                             <img src="{% url 'public:get_media' photo.uuid %}?s=128&f=image/webp" loading="lazy"  class="h-24 w-24 object-cover"/>
                         </picture>

static/tailwind/style.css

@@ -846,6 +846,10 @@ video {
   -o-object-fit: fill;
      object-fit: fill;
 }
+.object-scale-down {
+  -o-object-fit: scale-down;
+     object-fit: scale-down;
+}
 .p-1 {
   padding: 0.25rem;
 }