.

base.css

@@ -127,16 +127,23 @@ main{
 .item-table-360{
     display: none;
 }
-.item-table-span{
-    position: absolute;
-    left: 0;
-}
-.item-table-dummy{
-    display: table-cell;
-    vertical-align: top;
-    border-color: transparent;
-    background-color: transparent;
-    box-sizing: inherit;
+.image-box{
+    display: -webkit-box;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-box-orient: horizontal;
+    -moz-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -moz-box-direction: normal;
+    -webkit-flex-direction: row;
+    -ms-flex-direction: row;
+    flex-direction: row;
+    -ms-flex-wrap: wrap;
+    -webkit-flex-wrap: wrap;
+    flex-wrap: wrap;
+    align-items: center;
 }
 @media (min-width: 480px){
     .main-table > div > div > div{

index.go.html

@@ -78,17 +78,22 @@
                             </video></div>
                         </div>
                     </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    {{ if not (eq .GetImageCount 0) }}
     <div>
-                        <div class="item-table-dummy"></div>
-                        <div class="item-table-full item-table-span">
-                            <div class="padded-2px">{{ .GetContent }}</div>
-                        </div>
-                    </div>
-                </div>
+        <div>
+            <div class="image-box">
+                {{ range .GetImages }}
+                <a href="{{ .ImageLocation }}"><img src="{{ .ThumbnailLocation }}" width="144"></a>
+                {{ end }}
             </div>
         </div>
     </div>
     {{ end }}
+    {{ end }}
 </main>
 </body>
 </html>

index.go.yml

@@ -38,6 +38,14 @@ entries:
     endDate: "31/10/2021"
     videoLocation: "https://cityuni.captainalm.com/resources/stream/vid1.mp4"
     videoContentType: "video/mp4"
+    thumbnailLocations:
+      - "https://cityuni.captainalm.com/resources/assets/pic1.png"
+      - "https://cityuni.captainalm.com/resources/assets/pic2.png"
+      - "https://cityuni.captainalm.com/resources/assets/pic3.png"
+    imageLocations:
+      - "https://cityuni.captainalm.com/resources/assets/pic1.png"
+      - "https://cityuni.captainalm.com/resources/assets/pic2.png"
+      - "https://cityuni.captainalm.com/resources/assets/pic3.png"
   - name: "City Game Project 2022: Ninjaformer (Alpha, Beta)"
     content: >
       <p>
@@ -60,3 +68,11 @@ entries:
     endDate: "08/05/2022"
     videoLocation: "https://cityuni.captainalm.com/resources/stream/vid2.mp4"
     videoContentType: "video/mp4"
+    thumbnailLocations:
+      - "https://cityuni.captainalm.com/resources/assets/pic4.png"
+      - "https://cityuni.captainalm.com/resources/assets/pic5.png"
+      - "https://cityuni.captainalm.com/resources/assets/pic6.png"
+      imageLocations:
+        - "https://cityuni.captainalm.com/resources/assets/pic4.png"
+        - "https://cityuni.captainalm.com/resources/assets/pic5.png"
+        - "https://cityuni.captainalm.com/resources/assets/pic6.png"

pageHandler/pages/index/entry.go

@@ -3,6 +3,7 @@ package index
 import (
 	"golang.captainalm.com/cityuni-webserver/utils/yaml"
 	"html/template"
+	"math"
 	"time"
 )
 
@@ -19,6 +20,11 @@ type EntryYaml struct {
 	ImageLocations     []string      `yaml:"imageLocations"`
 }
 
+type ImageReference struct {
+	ThumbnailLocation string
+	ImageLocation     string
+}
+
 func (ey EntryYaml) GetStartDate() string {
 	return ey.StartDate.Format(dateFormat)
 }
@@ -46,3 +52,18 @@ func (ey EntryYaml) GetContent() template.HTML {
 func (ey EntryYaml) GetDuration() time.Duration {
 	return ey.GetEndTime().Sub(ey.StartDate.Time).Truncate(time.Second)
 }
+
+func (ey EntryYaml) GetImageCount() int {
+	return int(math.Min(float64(len(ey.ThumbnailLocations)), float64(len(ey.ImageLocations))))
+}
+
+func (ey EntryYaml) GetImages() []ImageReference {
+	toReturn := make([]ImageReference, ey.GetImageCount())
+	for i := 0; i < len(ey.ThumbnailLocations) && i < len(ey.ImageLocations); i++ {
+		toReturn[i] = ImageReference{
+			ThumbnailLocation: ey.ThumbnailLocations[i],
+			ImageLocation:     ey.ImageLocations[i],
+		}
+	}
+	return toReturn
+}