Added board images to individual pages

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:

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%;}

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'