From 57c68acfd38a931b54dc14703958eb42578dd552 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Valenta?= <tomas@imaniti.org>
Date: Wed, 5 Jun 2024 16:27:49 +0200
Subject: [PATCH] add alt attributes
---
shared/templates/styleguide2/404.html | 6 +++++-
.../styleguide2/feed_item_description.html | 5 ++++-
.../includes/atoms/articles/side_image.html | 7 +------
.../styleguide2/includes/atoms/figure/figure.html | 7 +------
.../atoms/youtube_video/youtube_video.html | 12 +-----------
.../articles/article_timeline_preview.html | 7 +------
.../candidates/candidate_secondary_box.html | 10 +++-------
.../includes/molecules/gallery/gallery.html | 2 +-
.../molecules/popouts/hoax_popout_point.html | 1 +
.../includes/molecules/popouts/popout_point.html | 8 +-------
.../includes/organisms/faq/faq_answer.html | 9 ++-------
.../header/elections/candidate_header.html | 7 +------
.../organisms/layout/elections/navbar.html | 6 +++---
.../includes/organisms/layout/navbar.html | 14 +++++++++++---
14 files changed, 36 insertions(+), 65 deletions(-)
diff --git a/shared/templates/styleguide2/404.html b/shared/templates/styleguide2/404.html
index 0f449876..a535501e 100644
--- a/shared/templates/styleguide2/404.html
+++ b/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>
diff --git a/shared/templates/styleguide2/feed_item_description.html b/shared/templates/styleguide2/feed_item_description.html
index c84b9682..833fb98a 100644
--- a/shared/templates/styleguide2/feed_item_description.html
+++ b/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 %}
diff --git a/shared/templates/styleguide2/includes/atoms/articles/side_image.html b/shared/templates/styleguide2/includes/atoms/articles/side_image.html
index f001d7ef..b0d5783d 100644
--- a/shared/templates/styleguide2/includes/atoms/articles/side_image.html
+++ b/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">
diff --git a/shared/templates/styleguide2/includes/atoms/figure/figure.html b/shared/templates/styleguide2/includes/atoms/figure/figure.html
index f092df2d..18df394d 100644
--- a/shared/templates/styleguide2/includes/atoms/figure/figure.html
+++ b/shared/templates/styleguide2/includes/atoms/figure/figure.html
@@ -1,12 +1,7 @@
{% 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
diff --git a/shared/templates/styleguide2/includes/atoms/youtube_video/youtube_video.html b/shared/templates/styleguide2/includes/atoms/youtube_video/youtube_video.html
index ae00ee80..401a90e9 100644
--- a/shared/templates/styleguide2/includes/atoms/youtube_video/youtube_video.html
+++ b/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"
diff --git a/shared/templates/styleguide2/includes/molecules/articles/article_timeline_preview.html b/shared/templates/styleguide2/includes/molecules/articles/article_timeline_preview.html
index daf1d032..da7172cd 100644
--- a/shared/templates/styleguide2/includes/molecules/articles/article_timeline_preview.html
+++ b/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">
diff --git a/shared/templates/styleguide2/includes/molecules/candidates/candidate_secondary_box.html b/shared/templates/styleguide2/includes/molecules/candidates/candidate_secondary_box.html
index fc9660fa..4fccd7f0 100644
--- a/shared/templates/styleguide2/includes/molecules/candidates/candidate_secondary_box.html
+++ b/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 }}"
>
diff --git a/shared/templates/styleguide2/includes/molecules/gallery/gallery.html b/shared/templates/styleguide2/includes/molecules/gallery/gallery.html
index 2f023a83..eac91825 100644
--- a/shared/templates/styleguide2/includes/molecules/gallery/gallery.html
+++ b/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>
diff --git a/shared/templates/styleguide2/includes/molecules/popouts/hoax_popout_point.html b/shared/templates/styleguide2/includes/molecules/popouts/hoax_popout_point.html
index 7b125f3e..148f2da6 100644
--- a/shared/templates/styleguide2/includes/molecules/popouts/hoax_popout_point.html
+++ b/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" %}"
diff --git a/shared/templates/styleguide2/includes/molecules/popouts/popout_point.html b/shared/templates/styleguide2/includes/molecules/popouts/popout_point.html
index 3af310c8..5b4fab9a 100644
--- a/shared/templates/styleguide2/includes/molecules/popouts/popout_point.html
+++ b/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>
diff --git a/shared/templates/styleguide2/includes/organisms/faq/faq_answer.html b/shared/templates/styleguide2/includes/organisms/faq/faq_answer.html
index cf6ed262..20fb82a6 100644
--- a/shared/templates/styleguide2/includes/organisms/faq/faq_answer.html
+++ b/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>
diff --git a/shared/templates/styleguide2/includes/organisms/header/elections/candidate_header.html b/shared/templates/styleguide2/includes/organisms/header/elections/candidate_header.html
index b03948fc..5eeb1175 100644
--- a/shared/templates/styleguide2/includes/organisms/header/elections/candidate_header.html
+++ b/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 %}
diff --git a/shared/templates/styleguide2/includes/organisms/layout/elections/navbar.html b/shared/templates/styleguide2/includes/organisms/layout/elections/navbar.html
index 3db87dff..4656adf8 100644
--- a/shared/templates/styleguide2/includes/organisms/layout/elections/navbar.html
+++ b/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 %}
diff --git a/shared/templates/styleguide2/includes/organisms/layout/navbar.html b/shared/templates/styleguide2/includes/organisms/layout/navbar.html
index 5c070e45..93c6dbfe 100644
--- a/shared/templates/styleguide2/includes/organisms/layout/navbar.html
+++ b/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>
--
GitLab