Fix two_thirds tag and introduce image_card mimicking CDTs about page (…

…#761)

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})"

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')