3d26c38c96515a7aaac9c8d8a47560e53100c198
kate
  Tue Dec 20 11:01:41 2016 -0800
Add an example and first cut at customization settings for embedded images. refs #18504

diff --git src/hg/htdocs/template.html src/hg/htdocs/template.html
index 78f414a..7540c2e 100755
--- src/hg/htdocs/template.html
+++ src/hg/htdocs/template.html
@@ -100,20 +100,35 @@
                 <th>Total</th>
             </tr>
             <tr>
                 <td>Chromosomes</td>
                 <td>261</td>
             </tr>
             <tr>
                 <td>Haplotypes</td>
                 <td>261</td>
             </tr>
             <tr>
                 <td>Unlocalized contigs</td>
                 <td>1270</td>
             </tr>
         </table>
+    </div>
+</div>
 
+<h2>Section with a picture and caption</h2>
+<p>
+Use the 'img' tag to include the picture file, which is typically in .jpg or .png format.
+Images should normally have their 'width' and 'height' attributes set in the 'img' tag.
+To right-align the image add the 'gbsAlignRight' class.
+The caption is a 'p' element, which is assigned the 'gbsCaption' class.
+</p>
+<div class="row">
+    <div class="col-md-12">
+        <img src= "images/gbstaff16.jpg" width=499 height=299 alt="Genome Browser staff">
+    <p class="gbsCaption">
+    Browser staff in native habitat.
+    </p>
     </div>
 </div>
 
 <!--#include virtual="/gbPageEnd.html"-->