diff --git a/app/views/markup/_image_card.html.slim b/app/views/markup/_image_card.html.slim
new file mode 100644
index 00000000..76686145
--- /dev/null
+++ b/app/views/markup/_image_card.html.slim
@@ -0,0 +1,5 @@
+.about-module-box
+ .about-module-box-panel
+ p.govuk-body-l
+ = text
+ .about-module-box-panel style="min-height: 150px; background-image: url(#{image})"
diff --git a/config/initializers/markdown.rb b/config/initializers/markdown.rb
index d236e0ac..8a4104f1 100644
--- a/config/initializers/markdown.rb
+++ b/config/initializers/markdown.rb
@@ -3,7 +3,7 @@
class CustomPreprocessor < GovukMarkdown::Preprocessor
# @return [CustomPreprocessor]
def apply_all
- inject_inset_text.inject_details.two_thirds.button.external.quote.blockquote.video
+ inject_inset_text.inject_details.two_thirds.image_card.button.external.quote.blockquote.video
end
# @example
@@ -26,6 +26,24 @@ def two_thirds
self
end
+ # @example
+ # {image_card}
+ # This is the body copy
+ #
+ # //path/to/image
+ # {/image_card}
+ #
+ # @return [CustomPreprocessor]
+ def image_card
+ pattern = build_regexp('image_card')
+ @output = output.gsub(pattern) do
+ text, image = split_content Regexp.last_match(1)
+
+ image_card_template.render(nil, text: text, image: image)
+ end
+ self
+ end
+
# @example
# {button}[Continue](/path/to/page){/button}
#
@@ -127,6 +145,16 @@ def hyperlink(content)
[Regexp.last_match(1), Regexp.last_match(2)]
end
+ # @return [Slim::Template]
+ def image_card_template
+ @image_card_template ||= Slim::Template.new('app/views/markup/_image_card.html.slim')
+ end
+
+ # @return [Slim::Template]
+ def two_thirds_template
+ @two_thirds_template ||= Slim::Template.new('app/views/markup/_two_thirds.html.slim')
+ end
+
# @return [Slim::Template]
def quote_template
@quote_template ||= Slim::Template.new('app/views/markup/_quote.html.slim')