Overview page: fallback to title + text instead of filler image

content/u/products/bgp-peering/contents.lr

@@ -13,6 +13,10 @@ headline2: Your own IP Space
 ---
 headline3: At Data Center Light
 ---
+header_background_color: #6298CB
+---
+header_text_color: text-light
+---
 content1_text:
 
 ## For whom is BGP peering?

templates/summary-page.html

@@ -6,6 +6,22 @@
 
 <div class="container">
   {% for childpage in this.children %}
+
+  {# Setup default settings for the overview #}
+
+  {% if childpage.header_background_color %}
+      {% set div_style = 'background-color:' + childpage.header_background_color + ';' %}
+  {% else %}
+      {% set div_style = 'background-color: #6FB0E5;' %}
+  {% endif %}
+
+  {% if childpage.header_text_color %}
+      {% set div_classes = childpage.header_text_color %}
+  {% else %}
+      {% set div_classes = 'text-light' %}
+  {% endif %}
+
+
   {% if loop.first %}
   <div class="row mb-3">
     {% endif %}
@@ -16,8 +32,13 @@
         <img class="card-img-top" src="{{ childpage.image }}"
              alt="{{ childpage.title }}">
         {% else %}
-        <img class="card-img-top" src="/u/image/cards/placeholder.jpg"
+        <div style="{{ div_style }} font-weight: bold; padding-left:
-             alt="{{ childpage.title }}">
+        12px; padding-right: 6px; text-transform: uppercase;"
+             class="{{ div_classes }} display-4">
+          &nbsp;<br/>
+          {{ childpage.title }}<sup style="font-weight: normal;">≠</sup><br/>
+          &nbsp;<br/>
+        </div>
         {% endif %}
         </a>
         <div class="card-body">