Skip to content
Snippets Groups Projects
Commit d9882aa9 authored by jindra12's avatar jindra12 Committed by jan.bednarik
Browse files

Added full hero banner with dynamic images 

#174
parent c480c23e
No related branches found
No related tags found
2 merge requests!787Release,!757Added full hero banner with dynamic images
Hide whitespace changes
Inline Side-by-side
district/blocks.py
+ 30
− 5
View file @ d9882aa9
from django.db import models
from django.forms.utils import ErrorList
from wagtail import blocks
from wagtail.blocks import (
BooleanBlock,
......@@ -12,14 +10,11 @@ from wagtail.blocks import (
TextBlock,
URLBlock,
)
from wagtail.blocks.struct_block import StructBlockValidationError
from wagtail.images.blocks import ImageChooserBlock
from shared.blocks import (
ButtonBlock,
CardLinkBlockMixin,
CardLinkWithHeadlineBlockMixin,
ChartBlock,
ProgramItemBlock,
)
......@@ -296,3 +291,33 @@ class RedmineProgramBlock(StructBlock):
template = "district/blocks/program_block.html"
icon = "site"
label = "Blok programu stahovaný z Redmine"
class HeroBannerBlock(StructBlock):
sm_banner = ImageChooserBlock(
label="Obrázek pro zobrazení menší než 640px", required=True
)
md_banner = ImageChooserBlock(
label="Obrázek pro zobrazení větší než 768px", required=True
)
lg_banner = ImageChooserBlock(
label="Obrázek pro zobrazení větší než 1024px", required=True
)
xl_banner = ImageChooserBlock(
label="Obrázek pro zobrazení větší než 1280px", required=True
)
xxl_banner = ImageChooserBlock(
label="Obrázek pro zobrazení větší než 1536px", required=True
)
title = CharBlock(label="Titulek bloku", required=False)
button_text = CharBlock(label="Text tlačítka", required=True)
button_link = URLBlock(label="Odkaz tlačítka", required=True)
def clean(self, value):
return super().clean(value)
class Meta:
template = "district/blocks/hero_banner_block.html"
icon = "image"
label = "Hero banner"
district/migrations/0109_alter_districthomepage_subheader.py 0 → 100644
+ 251
− 0
View file @ d9882aa9
# Generated by Django 4.1.8 on 2023-04-18 23:18
import wagtail.blocks
import wagtail.fields
import wagtail.images.blocks
from django.db import migrations
class Migration(migrations.Migration):
dependencies = [
("district", "0108_alter_districtcenterpage_content_and_more"),
]
operations = [
migrations.AlterField(
model_name="districthomepage",
name="subheader",
field=wagtail.fields.StreamField(
[
(
"header_full_size",
wagtail.blocks.StructBlock(
[
(
"title",
wagtail.blocks.CharBlock(
label="Titulek", required=True
),
),
(
"image_background",
wagtail.images.blocks.ImageChooserBlock(
label="Obrázek v pozadí", required=True
),
),
(
"image_foreground",
wagtail.images.blocks.ImageChooserBlock(
label="Obrázek v popředí", required=False
),
),
(
"button_group",
wagtail.blocks.ListBlock(
wagtail.blocks.StructBlock(
[
(
"title",
wagtail.blocks.CharBlock(
label="Titulek",
max_length=128,
required=True,
),
),
(
"icon",
wagtail.blocks.CharBlock(
help_text="Identifikátor ikonky ze styleguide (https://styleguide.pirati.cz/latest/?p=viewall-atoms-icons), např. ico--key.",
label="Ikonka",
max_length=128,
required=False,
),
),
(
"size",
wagtail.blocks.ChoiceBlock(
choices=[
("sm", "Malá"),
("base", "Střední"),
("lg", "Velká"),
],
label="Velikost",
),
),
(
"color",
wagtail.blocks.ChoiceBlock(
choices=[
("black", "Černá"),
("white", "Bílá"),
("grey-125", "Světle šedá"),
("blue-300", "Modrá"),
("cyan-200", "Tyrkysová"),
("green-400", "Zelené"),
("violet-400", "Vínová"),
("red-600", "Červená"),
],
label="Barva",
),
),
(
"hoveractive",
wagtail.blocks.BooleanBlock(
default=True,
help_text="Pokud je zapnuto, tlačítko mění barvu, když na něj uživatel najede myší.",
label="Animovat na hover",
required=False,
),
),
(
"mobile_fullwidth",
wagtail.blocks.BooleanBlock(
default=True,
help_text="Pokud je zapnuto, tlačítko se na mobilních zařízeních roztáhne na plnou šířku.",
label="Plná šířka na mobilních zařízeních",
required=False,
),
),
(
"page",
wagtail.blocks.PageChooserBlock(
label="Stránka", required=False
),
),
(
"link",
wagtail.blocks.URLBlock(
label="Odkaz", required=False
),
),
(
"align",
wagtail.blocks.ChoiceBlock(
choices=[
("auto", "Automaticky"),
("center", "Na střed"),
],
label="Zarovnání",
),
),
]
),
label="Tlačítka",
),
),
]
),
),
(
"header_simple",
wagtail.blocks.StructBlock(
[
(
"title",
wagtail.blocks.CharBlock(
label="Titulek", required=False
),
),
(
"subtitle",
wagtail.blocks.CharBlock(
label="Podtitulek", required=False
),
),
("image", wagtail.images.blocks.ImageChooserBlock()),
]
),
),
(
"header",
wagtail.blocks.StructBlock(
[
(
"title",
wagtail.blocks.CharBlock(
help_text="Nap", label="Titulek", required=False
),
),
("image", wagtail.images.blocks.ImageChooserBlock()),
(
"button_text",
wagtail.blocks.CharBlock(
label="Text tlačítka", required=False
),
),
(
"button_link",
wagtail.blocks.URLBlock(
label="Odkaz tlačítka", required=False
),
),
]
),
),
(
"hero_banner",
wagtail.blocks.StructBlock(
[
(
"sm_banner",
wagtail.images.blocks.ImageChooserBlock(
label="Obrázek pro zobrazení menší než 640px",
required=True,
),
),
(
"md_banner",
wagtail.images.blocks.ImageChooserBlock(
label="Obrázek pro zobrazení větší než 768px",
required=True,
),
),
(
"lg_banner",
wagtail.images.blocks.ImageChooserBlock(
label="Obrázek pro zobrazení větší než 1024px",
required=True,
),
),
(
"xl_banner",
wagtail.images.blocks.ImageChooserBlock(
label="Obrázek pro zobrazení větší než 1280px",
required=True,
),
),
(
"xxl_banner",
wagtail.images.blocks.ImageChooserBlock(
label="Obrázek pro zobrazení větší než 1536px",
required=True,
),
),
(
"title",
wagtail.blocks.CharBlock(
label="Titulek bloku", required=False
),
),
(
"button_text",
wagtail.blocks.CharBlock(
label="Text tlačítka", required=True
),
),
(
"button_link",
wagtail.blocks.URLBlock(
label="Odkaz tlačítka", required=True
),
),
]
),
),
],
blank=True,
use_json_field=True,
verbose_name="Blok pod headerem",
),
),
]
district/models.py
+ 2
− 1
View file @ d9882aa9
......@@ -59,7 +59,7 @@ from . import blocks
from .forms import JekyllImportForm
CONTENT_BLOCKS = DEFAULT_CONTENT_BLOCKS + [
("chart", ChartBlock(template="district/blocks/chart.html")),
("chart", ChartBlock(template="district/blocks/chart.html"))
]
......@@ -73,6 +73,7 @@ class DistrictHomePage(
("header_full_size", FullSizeHeaderBlock()),
("header_simple", blocks.HomepageSimpleHeaderBlock()),
("header", blocks.HomepageHeaderBlock()),
("hero_banner", blocks.HeroBannerBlock()),
],
verbose_name="Blok pod headerem",
blank=True,
......
district/templates/district/blocks/hero_banner_block.html 0 → 100644
+ 34
− 0
View file @ d9882aa9
{% load wagtailimages_tags %}
<div class="relative hero hero--image p-0 text-center md:text-left">
<picture aria-hidden="true">
{% image self.xxl_banner min-1280x1 as xxl_image %}
{% image self.xl_banner max-1280x2000 as xl_image %}
{% image self.lg_banner max-1024x2000 as lg_image %}
{% image self.md_banner max-768x2000 as md_image %}
{% image self.sm_banner max-640x2000 as sm_image %}
<source media="(min-width:1536px)" srcset="{{ request.scheme }}://{{ request.get_host }}{{ xxl_image.url }}">
<source media="(min-width:1280px)" srcset="{{ request.scheme }}://{{ request.get_host }}{{ xl_image.url }}">
<source media="(min-width:1024px)" srcset="{{ request.scheme }}://{{ request.get_host }}{{ lg_image.url }}">
<source media="(min-width:768px)" srcset="{{ request.scheme }}://{{ request.get_host }}{{ md_image.url }}">
<img src="{{ request.scheme }}://{{ request.get_host }}{{ sm_image.url }}" width="auto" class="w-full">
</picture>
<div class="absolute h-full w-full md:w-1/2" style="bottom: 0">{# TODO: Update style guide #}
<div class="flex h-full items-end md:items-center justify-center text-center lg:text-left">
<div class="mx-2 mb-10">
<h1 class="head-alt-lg md:head-alt-xl text-shadow-lg max-w-2xl mx-auto lg:mx-0">
{% firstof self.title page.title %}
</h1>
<div class="mt-4 md:mt-8 space-y-4">
<div class="w-100">
<a href="{{ self.button_link }}" class="btn btn--white btn--hoveractive text-base btn--fullwidth md:btn--autowidth">
<div class="btn__body ">{{ self.button_text }}</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment

Pirátský GitLab - Home of the CopyLeft