Use real images with lazy loading in sas albums and user pictures

sas/schemas.py

@@ -39,6 +39,8 @@ class PictureSchema(ModelSchema):
     compressed_url: str
     thumb_url: str
     album: str
+    report_url: str
+    edit_url: str
 
     @staticmethod
     def resolve_sas_url(obj: Picture) -> str:
@@ -56,6 +58,14 @@ class PictureSchema(ModelSchema):
     def resolve_thumb_url(obj: Picture) -> str:
         return obj.get_download_thumb_url()
 
+    @staticmethod
+    def resolve_report_url(obj: Picture) -> str:
+        return reverse("sas:picture_ask_removal", kwargs={"picture_id": obj.id})
+
+    @staticmethod
+    def resolve_edit_url(obj: Picture) -> str:
+        return reverse("sas:picture_edit", kwargs={"picture_id": obj.id})
+
 
 class PictureRelationCreationSchema(Schema):
     picture: NonNegativeInt

sas/static/sas/css/album.scss

@@ -166,6 +166,13 @@ main {
 
       border: 1px solid rgba(0, 0, 0, .3);
 
+      >img {
+        object-position: top bottom;
+        object-fit: contain;
+        height: 100%;
+        width: 100%
+      }
+
       @media (max-width: 500px) {
         width: 100%;
         height: 100%;

sas/templates/sas/album.jinja

@@ -78,8 +78,8 @@
           <div
             class="photo"
             :class="{not_moderated: !picture.is_moderated}"
-            :style="`background-image: url(${picture.thumb_url})`"
           >
+            <img :src="picture.thumb_url" :alt="picture.name" loading="lazy" />
             <template x-if="!picture.is_moderated">
               <div class="overlay">&nbsp;</div>
               <div class="text">{% trans %}To be moderated{% endtrans %}</div>

sas/templates/sas/macros.jinja

@@ -2,15 +2,19 @@
   <a href="{{ url('sas:album', album_id=a.id) }}">
     {% if a.file %}
       {% set img = a.get_download_url() %}
+      {% set src = a.name %}
     {% elif a.children.filter(is_folder=False, is_moderated=True).exists() %}
-      {% set img = a.children.filter(is_folder=False).first().as_picture.get_download_thumb_url() %}
+      {% set picture = a.children.filter(is_folder=False).first().as_picture %}
+      {% set img = picture.get_download_thumb_url()  %}
+      {% set src = picture.name %}
     {% else %}
       {% set img = static('core/img/sas.jpg') %}
+      {% set src = "sas.jpg" %}
     {% endif %}
     <div
       class="album{% if not a.is_moderated %} not_moderated{% endif %}"
-      style="background-image: url('{{ img }}');"
     >
+      <img src="{{ img }}" alt="{{ src }}" loading="lazy" />
       {% if not a.is_moderated %}
         <div class="overlay">&nbsp;</div>
         <div class="text">{% trans %}To be moderated{% endtrans %}</div>

sas/templates/sas/picture.jinja

@@ -114,12 +114,12 @@
                   {% trans %}HD version{% endtrans %}
                 </a>
                 <br>
-                <a class="text danger" :href="`/sas/picture/${currentPicture.id}/report`">
+                <a class="text danger" :href="currentPicture.report_url">
                   {% trans %}Ask for removal{% endtrans %}
                 </a>
               </div>
               <div class="buttons">
-                <a class="button" :href="`/sas/picture/${currentPicture.id}/edit/`"><i class="fa-regular fa-pen-to-square edit-action"></i></a>
+                <a class="button" :href="currentPicture.edit_url"><i class="fa-regular fa-pen-to-square edit-action"></i></a>
                 <a class="button" href="?rotate_left"><i class="fa-solid fa-rotate-left"></i></a>
                 <a class="button" href="?rotate_right"><i class="fa-solid fa-rotate-right"></i></a>
               </div>

sas/templates/sas/user_pictures.jinja

@@ -35,8 +35,8 @@
               <div
                 class="photo"
                 :class="{not_moderated: !picture.is_moderated}"
-                :style="`background-image: url(${picture.thumb_url})`"
               >
+                <img :src="picture.thumb_url" :alt="picture.name" loading="lazy" />
                 <template x-if="!picture.is_moderated">
                   <div class="overlay">&nbsp;</div>
                   <div class="text">{% trans %}To be moderated{% endtrans %}</div>