add alt attributes

shared/templates/styleguide2/404.html

@@ -10,7 +10,11 @@
   <h1 class="head-alt-lg mb-8">
     404
   </h1>
-  <img src="{% static 'shared/img/logo_black.svg' %}" alt class="mb-8"/>
+  <img
+    src="{% static 'shared/img/logo_black.svg' %}"
+    alt="Pirátské logo"
+    class="mb-8"
+  >
   <h1 class="head-alt-md mb-8">
     Narazili jsme na mělčinu...
   </h1>

shared/templates/styleguide2/feed_item_description.html

@@ -17,7 +17,10 @@
         </p>
     {% elif block.block_type == "image" %}
         <a href="{{ block.value.href }}">
-            <img src="{{ block.value.image.url }}">
+            <img
+                src="{{ block.value.image.url }}"
+                alt="{{ block.value.image.alt }}
+            >
         </a>
         <p>{{ block.value.text }}</p>
     {% endif %}

shared/templates/styleguide2/includes/atoms/articles/side_image.html

@@ -9,12 +9,7 @@
     lg:mx-8 lg:my-4 lg:w-2/5
   "
 >
-  {% image image max-512x512 as side_image %}
-
-  <img
-    class="my-0"
-    src="{{ side_image.url }}"
-  >
+  {% image image max-512x512 class="my-0" %}
 
   {% if image_source %}
     <span class="text-grey-600 text-sm flex gap-2 items-center">

shared/templates/styleguide2/includes/atoms/figure/figure.html

 {% load wagtailimages_tags %}
 
 <figure class="flex flex-col gap-2 max-w-max py-4">
-  {% image self.img width-1430 as img %}
-
-  <img
-    src="{{ img.url }}"
-    alt="{{ img.alt }}"
-  >
+  {% image self.img width-1430 %}
 
   {% if self.caption %}
     <figcaption

shared/templates/styleguide2/includes/atoms/youtube_video/youtube_video.html

@@ -12,17 +12,7 @@
   "
   id="ytVideo{{ self.video_id }}PosterContainer"
 >
-  {% image self.poster_image width-720 as img %}
-
-  <img
-    src="{{ img.url }}"
-    alt="{{ img.alt }}"
-    class="
-      object-cover mb-2 aspect-video rounded opacity-50 duration-200
-
-      group-hover:blur-sm
-    "
-  >
+  {% image self.poster_image width-720 class="object-cover mb-2 aspect-video rounded opacity-50 duration-200 group-hover:blur-sm" %}
 
   <div
     class="absolute top-0 left-0 flex justify-center items-center w-full h-full"

shared/templates/styleguide2/includes/molecules/articles/article_timeline_preview.html

@@ -9,12 +9,7 @@
   data-id="{{ article.id }}"
 >
   <a href="{{ article.url }}">
-    {% image article.image width-1024 as image %}
-
-    <img
-      src="{{ image.url }}"
-      class="w-full object-cover object-center h-[27rem]"
-    >
+    {% image article.image width-1024 class="w-full object-cover object-center h-[27rem]" %}
   </a>
 
   <div class="flex flex-col px-8 pb-6 pt-5 h-full">

shared/templates/styleguide2/includes/molecules/candidates/candidate_secondary_box.html

@@ -17,14 +17,8 @@
       "
     >
       {% if self.page.profile_image %}
-        {% image self.page.profile_image fill-150x150 as profile_image %}
+        {% image self.page.profile_image fill-150x150 class="w-12 object-cover" %}
       {% endif %}
-
-      <img
-        class="w-12 object-cover"
-        alt="Portrét osoby {{ self.page.title }}"
-        src="{% if profile_image %}{{ profile_image.url }}{% endif %}"
-      >
     </div>
 
     <h4
@@ -42,6 +36,7 @@
         {% if self.page.is_pirate %}
           <img
             class="w-8"
+            alt="Logo pirátské strany"
             src="{% static "styleguide2/images/logo-round-black.svg" %}"
           >
 
@@ -53,6 +48,7 @@
 
           <img
             class="w-8"
+            alt="Logo {{ self.page.other_party }}"
             src="{{ other_party_logo_image.url }}"
           >
 

shared/templates/styleguide2/includes/molecules/gallery/gallery.html

@@ -16,7 +16,7 @@
       data-fancybox="gallery"
       data-caption="{{ thumb.alt }}"
     >
-      <img class="rounded" src="{{ thumb.url }}" alt="thumb.alt" />
+      <img class="rounded" src="{{ thumb.url }}" alt="{{ thumb.alt }}" />
     </a>
   {% endfor %}
 </div>

shared/templates/styleguide2/includes/molecules/popouts/hoax_popout_point.html

@@ -9,6 +9,7 @@
       <div class="flex flex-wrap gap-4 lg:flex-nowrap">
         <div class="grow lg:grow-0 lg:basis-2/3 prose max-w-screen-lg">
           {% include "styleguide2/includes/atoms/text/paragraph.html" with text=hoax %}
+          
           <img
             class="mt-10"
             src="{% static "images/hoax.webp" %}"

shared/templates/styleguide2/includes/molecules/popouts/popout_point.html

@@ -20,13 +20,7 @@
             </div>
 
             {% if guarantor_page.profile_image %}
-              {% image guarnator_page.profile_image fill-150x150 as person_image %}
-
-              <img
-                alt="Obrázek osoby {{ guarantor_page.title }}"
-                class="w-10 h-10 opacity-75 m-0 p-0 rounded-full"
-                src="{{ person_image.url }}"
-              >
+              {% image guarnator_page.profile_image fill-150x150 class="w-10 h-10 opacity-75 m-0 p-0 rounded-full" %}
             {% endif %}
 
             <strong>

shared/templates/styleguide2/includes/organisms/faq/faq_answer.html

@@ -63,15 +63,10 @@
           </div>
 
           {% if self.image %}
-            {% image self.image max-512x512 as person_image %}
+            {% image self.image max-512x512 class="lg:h-96 h-64" %}
           {% else %}
-            {% image self.person_page.image max-512x512 as person_image %}
+            {% image self.person_page.image max-512x512 class="lg:h-96 h-64" %}
           {% endif %}
-
-          <img
-            class="lg:h-96 h-64"
-            src="{{ person_image.url }}"
-          >
         </div>
       </div>
     </div>

shared/templates/styleguide2/includes/organisms/header/elections/candidate_header.html

@@ -77,12 +77,7 @@
         flex justify-center items-start grow w-full
       "
     >
-      {% image image max-756x756 as person_image %}
-
-      <img
-        class="lg:w-3/5"
-        src="{{ person_image.url }}"
-      >
+      {% image image max-756x756 class="lg:w-3/5" %}
     </div>
   </div>
 {% endblock %}

shared/templates/styleguide2/includes/organisms/layout/elections/navbar.html

@@ -3,15 +3,15 @@
 {% load static %}
 
 {% block navbar_logo_images %}
-  <img class="navbar__logo--white w-[220px] lg:w-[280px]" src="{% static 'elections/logo-full-white.svg' %}" alt="">
-  <img class="navbar__logo--black w-[220px] lg:w-[280px]" src="{% static 'elections/logo-full-black.svg' %}" alt="">
+  <img class="navbar__logo--white w-[220px] lg:w-[280px]" src="{% static 'elections/logo-full-white.svg' %}" alt="Pirátské logo">
+  <img class="navbar__logo--black w-[220px] lg:w-[280px]" src="{% static 'elections/logo-full-black.svg' %}" alt="Pirátské logo">
 {% endblock %}
 
 {% block popout_logo_image %}
   <img
     class="w-[220px] mt-3"
     src="{% static 'elections/logo-full-black.svg' %}"
-    alt=""
+    alt="Pirátské logo"
   >
 {% endblock %}
 

shared/templates/styleguide2/includes/organisms/layout/navbar.html

@@ -21,8 +21,16 @@
       <!-- BEGIN Logo-->
       <a href="{{ page.root_page.url }}" class="z-20 xl:mt-2 hover:no-underline">
         {% block navbar_logo_images %}
-          <img class="navbar__logo--white w-[150px] lg:w-[180px]" src="{% static 'styleguide2/images/logo-full-white.svg' %}" alt="">
-          <img class="navbar__logo--black w-[150px] lg:w-[180px]" src="{% static 'styleguide2/images/logo-full-black.svg' %}" alt="">
+          <img
+            class="navbar__logo--white w-[150px] lg:w-[180px]"
+            src="{% static 'styleguide2/images/logo-full-white.svg' %}"
+            alt="Pirátské logo"
+          >
+          <img
+            class="navbar__logo--black w-[150px] lg:w-[180px]"
+            src="{% static 'styleguide2/images/logo-full-black.svg' %}"
+            alt="Pirátské logo"
+          >
         {% endblock %}
       </a>
       <!-- END Logo -->
@@ -165,7 +173,7 @@
             <img
               class="w-[150px] mt-3"
               src="{% static 'styleguide2/images/logo-full-black.svg' %}"
-              alt=""
+              alt="Pirátské logo"
             >
           {% endblock %}
         </div>