block templates, override ArticleMixin content, main article template

main/blocks.py

@@ -102,6 +102,7 @@ class ArticleQuoteBlock(StructBlock):
     class Meta:
         icon = "user"
         label = "Blok citace"
+        template = 'main/blocks/article_quote_block.html'
 
 
 class ArticleImageBlock(StructBlock):
@@ -112,6 +113,7 @@ class ArticleImageBlock(StructBlock):
     class Meta:
         icon = "user"
         label = "Obrázek s textem a odkazem"
+        template = 'main/blocks/article_image_block.html'
 
 
 class ArticleDownloadBlock(StructBlock):
@@ -120,5 +122,6 @@ class ArticleDownloadBlock(StructBlock):
     class Meta:
         icon = "user"
         label = "Blok stáhnutelného dokumentu"
+        template = 'main/blocks/article_download_block.html'
 
 # TwitterCarouselBlock

main/models.py

@@ -285,7 +285,6 @@ class MainArticlePage(
         FieldPanel("author_page"),
         FieldPanel("region"),
         FieldPanel("tags"),
-        FieldPanel("content"),
     ]
 
     promote_panels = make_promote_panels(

main/templates/main/blocks/article_download_block.html

+<div class="grid-container px-4 mb-4 bg-grey-150 xl:mb-20">
+    <div class="flex justify-start xl:justify-end grid-left-side">
+        <i class="ico--download text-6xl mr-12 pt-5 pb-5"></i>
+    </div>
+    <div class="grid-content flex items-center flex-wrap gap-3">
+        <div class="flex items-center bg-white p-3 h-11 mr-3">
+            <span class="font-bold mr-1">Stáhnout soubor: </span>
+            <span>{{ self.file }}</span>
+        </div>
+        <a href="{{ self.file.url }}" class="btn btn__slide__wrap h-11 p-0" download>
+            <span class="btn text-sm bg-black text-white w-32 lg:text-base">Stáhnout</span>
+            <span class="btn text-sm bg-white text-black w-32 lg:text-base">Stáhnout</span>
+        </a>
+    </div>
+</div>
\ No newline at end of file

main/templates/main/blocks/article_image_block.html

+{% load wagtailimages_tags %}
+
+<div class="grid-container px-3 pt-3 mb-4 bg-grey-150 xl:pt-0 xl:mb-20">
+    <div class="grid-content-with-right-side flex flex-wrap gap-3 xl:gap-5">
+        {% image self.image max-500x500 as image %}
+        <img src="{{ image.url }}"
+             alt="" class="w-full max-w-sm">
+        <div class="flex flex-col justify-between">
+            <a href="{{ self.href }}" class="mt-0 xl:mt-8 mb-2 font-bold hover:no-underline leading-5">
+                {{ self.text }}
+            </a>
+            <span class="text-sm text-grey-200 uppercase mb-0 xl:mb-6">zdroj: {{ self.href }}</span>
+        </div>
+    </div>
+</div>
\ No newline at end of file

main/templates/main/blocks/article_quote_block.html

+<div class="grid-container px-4 mb-4 bg-grey-150 pt-10 lg:mb-20">
+    <div class="grid-left-side flex justify-start xl:justify-end">
+        <i class="ico--code text-7xl mr-12"></i>
+    </div>
+    <div class="flex flex-col grid-content">
+        <span class="head-4xl">{{ self.quote }}</span>
+        <span class="font-alt text-turquoise-500 mb-6">– {{ self.autor_name }}</span>
+    </div>
+</div>
\ No newline at end of file

main/templates/main/main_article_page.html

@@ -7,7 +7,7 @@
         <div class="grid-container mb-2 lg:mb-12">
             <div class="grid-left-side h-full bg-grey-150 left-tab">
                 <div class="p-6">
-                    <span class="font-bold 3xl:text-xl">AUTOR ČLÁNKU: <br> {{ page.autor }}</span><br>
+                    <span class="font-bold 3xl:text-xl">AUTOR ČLÁNKU: <br> {{ page.author }}</span><br>
                 </div>
             </div>
             <div class="grid-content leading-6">
@@ -18,57 +18,16 @@
             <div class="hidden grid-right-side h-full bg-grey-150 right-tab xl:block"></div>
         </div>
         {% for block in page.content %}
-            {% if block.block_type == 'quote' %}
-                <div class="grid-container px-4 mb-4 bg-grey-150 pt-10 lg:mb-20">
-                    <div class="grid-left-side flex justify-start xl:justify-end">
-                        <i class="ico--code text-7xl mr-12"></i>
-                    </div>
-                    <div class="flex flex-col grid-content">
-                        <span class="head-4xl">{{ block.value.quote }}</span>
-                        <span class="font-alt text-turquoise-500 mb-6">– {{ block.value.autor_name }}</span>
-                    </div>
-                </div>
-            {% endif %}
             {% if block.block_type == 'text' %}
                 <div class="grid-container mb-2 lg:mb-12">
                     <div class="grid-content">
                         <p class="3xl:text-lg">
-                            {{ block.text|richtext }}
+                            {{ block.value.source|richtext}}
                         </p>
                     </div>
                 </div>
-
-            {% endif %}
-            {% if block.block_type == 'download' %}
-                <div class="grid-container px-4 mb-4 bg-grey-150 xl:mb-20">
-                    <div class="flex justify-start xl:justify-end grid-left-side">
-                        <i class="ico--download text-6xl mr-12 pt-5 pb-5"></i>
-                    </div>
-                    <div class="grid-content flex items-center flex-wrap gap-3">
-                        <div class="flex items-center bg-white p-3 h-11 mr-3">
-                            <span class="font-bold mr-1">Stáhnout soubor: </span>
-                            <span>{{ block.value.file }}</span>
-                        </div>
-                        <a href="" class="btn btn__slide__wrap h-11 p-0">
-                            <span class="btn text-sm bg-black text-white w-32 lg:text-base">Stáhnout</span>
-                            <span class="btn text-sm bg-white text-black w-32 lg:text-base">Stáhnout</span>
-                        </a>
-                    </div>
-                </div>
-            {% endif %}
-            {% if block.block_type == 'image' %}
-                <div class="grid-container px-3 pt-3 mb-4 bg-grey-150 xl:pt-0 xl:mb-20">
-                    <div class="grid-content-with-right-side flex flex-wrap gap-3 xl:gap-5">
-                        <img src="{{ block.value.image }}"
-                             alt="" class="w-full max-w-sm">
-                        <div class="flex flex-col justify-between">
-                            <a href="" class="mt-0 xl:mt-8 mb-2 font-bold hover:no-underline leading-5">
-                                {{ block.value.text }}
-                            </a>
-                            <span class="text-sm text-grey-200 uppercase mb-0 xl:mb-6">zdroj: {{ block.value.href }}</span>
-                        </div>
-                    </div>
-                </div>
+            {% else %}
+                {% include_block block %}
             {% endif %}
         {% endfor %}
     </main>