From 46c19f07941270f864f5e66d6a2dc0acf17c8534 Mon Sep 17 00:00:00 2001
From: Phil Howard <Phil@gadgetoid.com>
Date: Tue, 27 Sep 2016 19:17:45 +0100
Subject: [PATCH] Added board images to individual pages

---
 generate-html.py     | 12 ++++++++++--
 resources/pinout.css |  6 +++++-
 src/en/settings.yaml |  1 +
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/generate-html.py b/generate-html.py
index 6affed3..87275e6 100755
--- a/generate-html.py
+++ b/generate-html.py
@@ -161,8 +161,16 @@ def load_overlay(overlay):
         if 'buy' in loaded:
             details.append('[{text}]({url})'.format(text=strings['buy_now'], url=loaded['buy']))
 
-        loaded['long_description'] = '{}\n{}'.format(loaded['long_description'],
-                                                    markdown.markdown('\n'.join(map(lambda d: '* ' + d, details))))
+        details_html = markdown.markdown('\n'.join(map(lambda d: '* ' + d, details)))
+
+        details_image = ''
+
+        if 'image' in loaded:
+            details_image = "<img src=\"/resources/boards/{}\" alt=\"{}\" />".format(loaded['image'],loaded['name'])
+
+        details_html = "<table class=\"details\"><tr><td><h2>{}</h2>{}</td><td>{}</td></tr></table>".format(strings['details'],details_html,details_image)
+
+        loaded['long_description'] = '{}\n{}'.format(loaded['long_description'],details_html)
 
     # Automatically generate a page slug from the name if none is specified
     if 'page_url' not in loaded:
diff --git a/resources/pinout.css b/resources/pinout.css
index 58592c7..4e0c8f7 100644
--- a/resources/pinout.css
+++ b/resources/pinout.css
@@ -6,7 +6,11 @@ ul.top a {color:#063541;}
 table {margin:20px 0;border-collapse:collapse;}
 table td, table th {border:1px solid #073642;padding:5px;}
 table th {background:#073642;color:#EBE6D3;}
-table * {text-align:left;font-size:13px;}
+table {text-align:left;font-size:13px;}
+
+table.details {width:100%;}
+table.details td, table.details th {border:none;font-size:16px;vertical-align:top;}
+table.details img {margin-top:54px;}
 
 table.pin-functions {width:100%;}
 table.pin-functions td {width:16.6666%;}
diff --git a/src/en/settings.yaml b/src/en/settings.yaml
index 7e4ae1b..9475424 100644
--- a/src/en/settings.yaml
+++ b/src/en/settings.yaml
@@ -9,6 +9,7 @@ url_suffix:
 urls:
   GND: ground
 strings:
+- details: 'Details'
 - made_by: 'Made by {manufacturer}'
 - type_hat: 'HAT form-factor'
 - type_phat: 'pHAT form-factor'