diff --git a/static/src/scss/_blocks.scss b/static/src/scss/_blocks.scss new file mode 100644 index 0000000..3459d01 --- /dev/null +++ b/static/src/scss/_blocks.scss @@ -0,0 +1,7 @@ +div.block-image { + margin: 0.5rem 0; + + figcaption { + font-size: 85%; + } +} diff --git a/static/src/scss/base.scss b/static/src/scss/base.scss index 5379b34..f6276bc 100644 --- a/static/src/scss/base.scss +++ b/static/src/scss/base.scss @@ -9,6 +9,7 @@ @import "hero"; @import "content"; @import "listing"; +@import "blocks"; html, body { diff --git a/website/common/streamfield.py b/website/common/streamfield.py index c86c2b2..e63dce0 100644 --- a/website/common/streamfield.py +++ b/website/common/streamfield.py @@ -5,6 +5,7 @@ from django.utils.html import format_html_join, strip_tags from django.utils.text import smart_split from wagtail import blocks from wagtail.embeds.blocks import EmbedBlock +from wagtail.images.blocks import ImageChooserBlock IGNORE_PLAINTEXT_BLOCKS = (blocks.RawHTMLBlock, EmbedBlock) @@ -25,6 +26,15 @@ RICH_TEXT_FEATURES = [ "strikethrough", ] +RICH_TEXT_FEATURES_SIMPLE = [ + "bold", + "italic", + "link", + "document-link", + "code", + "strikethrough", +] + class LoremBlock(blocks.StructBlock): paragraphs = blocks.IntegerBlock(min_value=1) @@ -41,12 +51,23 @@ class LoremBlock(blocks.StructBlock): label = "Lorem Ipsum" +class ImageCaptionBlock(blocks.StructBlock): + image = ImageChooserBlock() + caption = blocks.RichTextBlock(features=RICH_TEXT_FEATURES_SIMPLE) + + class Meta: + icon = "image" + label = "Image with caption" + template = "common/blocks/image-caption.html" + + def get_blocks() -> list[tuple[str, blocks.BaseBlock]]: return [ ("embed", EmbedBlock()), ("rich_text", blocks.RichTextBlock(features=RICH_TEXT_FEATURES)), ("lorem", LoremBlock()), ("html", blocks.RawHTMLBlock()), + ("image", ImageCaptionBlock()), ] diff --git a/website/common/templates/common/blocks/image-caption.html b/website/common/templates/common/blocks/image-caption.html new file mode 100644 index 0000000..f0713d6 --- /dev/null +++ b/website/common/templates/common/blocks/image-caption.html @@ -0,0 +1,8 @@ +{% load wagtailimages_tags wagtailcore_tags %} + +
+ +
+ {{ value.caption|richtext }} +
+