4fc10f8d260d0f77816cbadd6f64541b49bb272b
mspeir
  Mon Jan 27 09:49:27 2025 -0800
adding images for new tutorial and tweaking makefile and lua file to including different bootstrap css file, refs #30335

diff --git docs/gb101.md docs/gb101.md
index 7373822f0f7..040ca63e658 100644
--- docs/gb101.md
+++ docs/gb101.md
@@ -112,31 +112,34 @@
 ACTCCCATTACGGGGGTGTCCC
 GGGCAGCGGGGCCGGAGGCTTA
 ATGCAAAGGC
 
 
 
 Please note, [BLAT](https://genome.ucsc.edu/goldenPath/help/hgTracksHelp.html#BLATAlign)
 is used if your search term is a DNA sequence. For the best
 results, make sure your sequence is long enough to meet BLAT specifications.
 The [examples](https://genome.ucsc.edu/goldenPath/help/query.html)
 link next to the search bar contains even more search queries.
 
 </div>
 <div class="col-md-6">
 
-<img src="../images/GeneSearch.jpg" alt="Genome selection" style="max-width:100%;">
+```image
+src=../images/hgTracksSearchBarExample.png
+width=100%
+```
 
 </div>
 </div>
 
 ---
 ### Highlights and Zooming
 
 <div class="row">
 <div class="col-md-6">
 
 ```image
 src=../images/highlightZoomGif.gif
 width=100%
 ```
 
@@ -175,33 +178,34 @@
 
 ```image
 src=../images/rightClickAndGreyBarGif.gif
 width=95%
 ```
 
 </div>
 </div>
 
 ---
 ### Track Display Modes
 
 <div class="row">
 <div class="col-md-6">
 
-<!--
-<img> here
--->
+```image
+src=../images/trackVisExamples.png
+width=95%
+```
 
 </div>
 <div class="col-md-6">
 
 Annotation tracks can be entirely hidden or shown in four different ways that
 take an increasing amount of vertical space: 
 [dense, squish, pack, and full](../goldenPath/help/hgTracksHelp.html#TRACK_CONT).
 
 *Pack display is the recommended visibility for most data types as it provides
 the best balance of information and space.*
 
 After changing a track's display mode, the change will not be applied until you
 refresh the page. You can either refresh the page manually using your web
 browser or click <button>refresh</button> on any of the track groups.
 
@@ -214,33 +218,34 @@
 <div class="row">
 <div class="col-md-6">
 
 Having trouble finding a dataset for your genome assembly? The 
 [Track Search](../cgi-bin/hgTracks?hgt_tSearch=track+search)
 feature allows searching for terms in track names, descriptions, groups, and
 ENCODE metadata.
 
 More information about <button>track search</button> can be found on the following
 [help page](../goldenPath/help/trackSearch.html). The Track Search feature can
 also be accessed by hovering over the "Genome Browser" drop-down menu.
 
 </div>
 <div class="col-md-6">
 
-<!--
-<img> here
--->
+```image
+src=../images/trackSearchSimpleExample.png
+width=90%
+```
 
 </div>
 </div>
 
 ---
 ### Configuring the Genome Browser Display
 
 <div class="row">
 <div class="col-md-6">
 
 ```image
 src=../images/configureGif.gif
 width=90%
 ```