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

@@ -20,8 +20,8 @@ main {
   flex-wrap: wrap;
   gap: 5px;
 
-  > a,
-  > input {
+  >a,
+  >input {
     padding: 0.4em;
     margin: 0.1em;
     font-size: 1.2em;
@@ -46,14 +46,14 @@ main {
   display: flex;
   flex-direction: column;
 
-  > .inputs {
+  >.inputs {
     align-items: flex-end;
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     gap: 10px;
 
-    > p {
+    >p {
       box-sizing: border-box;
       max-width: 300px;
       width: 100%;
@@ -62,7 +62,7 @@ main {
         max-width: 100%;
       }
 
-      > input {
+      >input {
         box-sizing: border-box;
         max-width: 100%;
         width: 100%;
@@ -72,8 +72,8 @@ main {
       }
     }
 
-    > div > input,
-    > input {
+    >div>input,
+    >input {
       box-sizing: border-box;
       height: 40px;
       width: 100%;
@@ -84,12 +84,12 @@ main {
       }
     }
 
-    > div {
+    >div {
       width: 100%;
       max-width: 300px;
     }
 
-    > input[type=submit]:hover {
+    >input[type=submit]:hover {
       background-color: #287fb8;
       color: white;
     }
@@ -100,27 +100,27 @@ main {
 .clipboard {
   margin-top: 10px;
   padding: 10px;
-  background-color: rgba(0,0,0,.1);
+  background-color: rgba(0, 0, 0, .1);
   border-radius: 10px;
 }
 
 .photos,
 .albums {
   margin: 20px;
-  min-height: 50px;  // To contain the aria-busy loading wheel, even if empty
+  min-height: 50px; // To contain the aria-busy loading wheel, even if empty
   box-sizing: border-box;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   gap: 5px;
 
-  > div {
+  >div {
     background: rgba(0, 0, 0, .5);
     cursor: not-allowed;
   }
 
-  > div,
-  > a {
+  >div,
+  >a {
     box-sizing: border-box;
     position: relative;
     height: 128px;
@@ -138,7 +138,7 @@ main {
       background: rgba(0, 0, 0, .5);
     }
 
-    > input[type=checkbox] {
+    >input[type=checkbox] {
       position: absolute;
       top: 0;
       right: 0;
@@ -149,8 +149,8 @@ main {
       cursor: pointer;
     }
 
-    > .photo,
-    > .album {
+    >.photo,
+    >.album {
       box-sizing: border-box;
       background-color: #333333;
       background-size: contain;
@@ -166,25 +166,32 @@ 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%;
       }
 
-      &:hover > .text {
+      &:hover>.text {
         background-color: rgba(0, 0, 0, .5);
       }
 
-      &:hover > .overlay {
+      &:hover>.overlay {
         -webkit-backdrop-filter: blur(2px);
         backdrop-filter: blur(2px);
 
-        ~ .text {
+        ~.text {
           background-color: transparent;
         }
       }
 
-      > .text {
+      >.text {
         position: absolute;
         box-sizing: border-box;
         top: 0;
@@ -201,7 +208,7 @@ main {
         color: white;
       }
 
-      > .overlay {
+      >.overlay {
         position: absolute;
         width: 100%;
         height: 100%;
@@ -227,14 +234,14 @@ main {
       }
     }
 
-    > .album > div {
+    >.album>div {
       background: rgba(0, 0, 0, .5);
       background: linear-gradient(0deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 0) 100%);
       text-align: left;
       word-break: break-word;
     }
 
-    > .photo > .text {
+    >.photo>.text {
       align-items: center;
       padding-bottom: 30px;
     }

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>