Merge pull request #49 from commonknowledge/feature/hot-223-title-tex…

…t-image-block

Title text image links block

app/models/wagtail/blocks.py

@@ -178,6 +178,30 @@ def link(self, *args, **kwargs):
         return None
 
 
+class TitleTextImageBlock(blocks.StructBlock):
+    class Meta:
+        template = "app/blocks/title_text_image_block.html"
+        help_text = "A title, a block of text, two links and a image on the left or right hand side"
+
+    title = blocks.CharBlock(required=True, help_text="The title of the block")
+    description = blocks.CharBlock(
+        required=True, help_text="A description displayed under the title"
+    )
+    image = ImageChooserBlock(
+        required=True,
+        help_text="An image, displayed on the left or right of the title and description",
+    )
+    links = blocks.ListBlock(LinkBlock())
+
+    layout = blocks.ChoiceBlock(
+        choices=[
+            ("image_right", "Image right"),
+            ("image_left", "Image left"),
+        ],
+        default="image_left",
+    )
+
+
 class TaskManagerProjectBlock(blocks.StructBlock):
     class Meta:
         template = "app/blocks/dummy_block.html"

app/models/wagtail/pages.py

@@ -184,6 +184,7 @@ class Meta:
             ("html", app_blocks.HTMLBlock()),
             ("heading_and_subheading", app_blocks.HeadingAndSubHeadingBlock()),
             ("partner_logos", app_blocks.PartnerLogos()),
+            ("title_text_image", app_blocks.TitleTextImageBlock()),
             ("impact_area_carousel", app_blocks.ImpactAreaCarousel()),
             ("latest_articles", app_blocks.LatestArticles()),
             ("featured_projects", app_blocks.FeaturedProjects()),

app/templates/app/blocks/title_text_image_block.html

@@ -0,0 +1,22 @@
+{% load wagtailcore_tags %}
+{% load wagtailimages_tags %}
+<section class="flex flex-col md:flex-row md:justify-between my-16 {% if value.layout == "image_left" %}flex-col-reverse md:flex-row-reverse{% endif %}">
+    <div class="md:mr-16">
+        <header class="pb-8 mb-8 border-b border-solid sm:w-full">
+            <h4 class="leading-tight text-4xl font-extrabold text-gray-900 pb-4">{{ value.title }}</h4>
+            <p class="text-xl font-normal text-gray-700">{{ value.description }}</p>
+        </header>
+        <ul>
+            {% for link in value.links %}
+                <li class="pb-4">
+                    <a class="text-primary-500 underline text-xl font-semibold"
+                       href="{% firstof link.url link.page.url %}">{% firstof link.label link.page.title %}</a>
+                </li>
+            {% endfor %}
+        </ul>
+    </div>
+    {% image value.image height-500 as img %}
+    <div class="min-h-[200px] md:min-h-[500px] w-full md:max-w-[608px] rounded-xl overflow-hidden bg-cover bg-center mt-9 md:mt-0"
+         style="background-image: url('{{ img.url }}')">
+    </div>
+</section>