fix elections page carousel images

elections/blocks.py

@@ -12,9 +12,14 @@ from wagtail.images.blocks import ImageChooserBlock
 
 
 class ElectionsCarouselBlock(StructBlock):
-    image = ImageChooserBlock(
-        label="Obrázek na pozadí",
-        help_text="Pokud není vybráno video, ukáže se na mobilu i desktopu.",
+    desktop_image = ImageChooserBlock(
+        label="Obrázek na pozadí (desktop)",
+        help_text="Pokud není vybráno video, ukáže se na desktopu.",
+    )
+
+    mobile_image = ImageChooserBlock(
+        label="Obrázek (mobil)",
+        help_text="Pokud je vybrán, ukáže se místo videa na mobilu.",
     )
 
     video_url = URLBlock(

elections/migrations/0021_alter_electionshomepage_content.py

+# Generated by Django 4.1.13 on 2024-03-09 18:06
+
+from django.db import migrations
+import wagtail.blocks
+import wagtail.fields
+import wagtail.images.blocks
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('elections', '0020_alter_electionshomepage_content'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='electionshomepage',
+            name='content',
+            field=wagtail.fields.StreamField([('carousel', wagtail.blocks.StructBlock([('desktop_image', wagtail.images.blocks.ImageChooserBlock(help_text='Pokud není vybráno video, ukáže se na desktopu.', label='Obrázek na pozadí (desktop)')), ('mobile_image', wagtail.images.blocks.ImageChooserBlock(help_text='Pokud je vybrán, ukáže se místo videa na mobilu.', label='Obrázek (mobil)')), ('video_url', wagtail.blocks.URLBlock(help_text='Pokud je vybráno, ukáže se na desktopech s povoleným autoplayem místo obrázku.', label='URL videa', required=False)), ('mobile_line_1', wagtail.blocks.TextBlock(label='První mobilní řádek')), ('mobile_line_2', wagtail.blocks.TextBlock(label='Druhý mobilní řádek'))])), ('candidates', wagtail.blocks.StructBlock([('candidates', wagtail.blocks.ListBlock(wagtail.blocks.StructBlock([('page', wagtail.blocks.PageChooserBlock(label='Stránka', page_type=['elections.ElectionsCandidatePage'])), ('image', wagtail.images.blocks.ImageChooserBlock(help_text='Pokud není vybrán, použije se obrázek ze stránky kandidáta', label='Obrázek', required=False)), ('description', wagtail.blocks.TextBlock(label='Popis'))]), label='Kandidáti'))])), ('secondary_candidates', wagtail.blocks.StructBlock([('heading', wagtail.blocks.CharBlock(label='Nadpis')), ('candidates', wagtail.blocks.ListBlock(wagtail.blocks.StructBlock([('number', wagtail.blocks.CharBlock(label='Číslo')), ('page', wagtail.blocks.PageChooserBlock(label='Stránka', page_type=['elections.ElectionsCandidatePage'])), ('image', wagtail.images.blocks.ImageChooserBlock(help_text='Pokud není vybrán, použije se obrázek ze stránky kandidáta', label='Obrázek', required=False))]), label='Kandidáti'))])), ('program', wagtail.blocks.StructBlock([('label', wagtail.blocks.CharBlock(default='Program', help_text="Např. 'Program'", label='Nadpis')), ('categories', wagtail.blocks.ListBlock(wagtail.blocks.StructBlock([('number', wagtail.blocks.IntegerBlock(label='Číslo')), ('name', wagtail.blocks.CharBlock(label='Název')), ('points', wagtail.blocks.ListBlock(wagtail.blocks.StructBlock([('content', wagtail.blocks.TextBlock(label='Obsah'))]), label='Body'))]), label='Kategorie')), ('long_version_url', wagtail.blocks.URLBlock(help_text='Pro zobrazení odkazu na celou verzi programu musí být obě následující pole vyplněná.', label='Odkaz na celou verzi programu', required=False)), ('long_version_text', wagtail.blocks.CharBlock(label='Nadpis odkazu na celou verzi programu', required=False))])), ('news', wagtail.blocks.StructBlock([('title', wagtail.blocks.CharBlock(help_text='Nejnovější články se načtou automaticky', label='Titulek')), ('description', wagtail.blocks.TextBlock(label='Popis'))], template='styleguide2/includes/organisms/articles/elections/articles_section.html'))], blank=True, use_json_field=True, verbose_name='Hlavní obsah'),
+        ),
+    ]

shared/templates/styleguide2/includes/molecules/menus/elections/carousel.html

@@ -3,7 +3,8 @@
 <div class="__js-root">
   <div class="header-carousel">
     <div class="h-[700px] xl:h-screen relative bg-white">
-      {% image self.image original as image %}
+      {% image self.desktop_image original as desktop_image %}
+      {% image self.mobile_image original as mobile_image %}
 
       <video
         class="
@@ -16,14 +17,16 @@
         playsinline
         preload="metadata"
 
-        poster="{% static 'styleguide2/images/background-images/bg-flag-mobile-preview.jpg' %}"
+        poster="{% if not mobile_image %}{% static 'styleguide2/images/background-images/bg-flag-mobile-preview.jpg' %} {% else %}{{ mobile_image.url }}{% endif %}"
       >
-        <source src="{% static 'styleguide2/images/background-images/bg-flag-mobile.mp4' %}">
+        {% if not mobile_image %}
+          <source src="{% static 'styleguide2/images/background-images/bg-flag-mobile.mp4' %}">
+        {% endif %}
       </video>
 
       <video
         class="header-carousel--image opacity-60 hidden lg:block"
-        poster="{% static 'styleguide2/images/background-images/loading.gif' %}"
+        poster="{% if self.video_url or not desktop_image %}{% static 'styleguide2/images/background-images/loading.gif' %}{% else %}{{ desktop_image.url }}{% endif %}"
         autoplay
         muted
         loop