Added layout for screenshots and savefiles.

site/themes/citra-bs-theme/layouts/game/single.html

@@ -1,5 +1,7 @@
 {{ define "main" }}
+  {{ $gameName := .File.BaseFileName }}
   {{ $rating := index .Site.Data.compatibility ( string .Params.compatibility | default "0" ) }}
+
   <div class="alert alert-info">
     <div class="row">
       <div class="col-md-2">
@@ -44,6 +46,10 @@
             <td>Tested Version</td>
             <td>{{ .Params.tested_version }}</td>
           </tr>
+          <tr>
+            <td>Game Icon</td>
+            <td><img class="img-responsive" src="{{ .Site.BaseURL }}images/game/icons/{{ default (print .File.BaseFileName ".png") }}" /></td>
+          </tr>
           <tr>
             <td>Title IDs</td>
             <td>
@@ -64,6 +70,79 @@
       </table>
     </div>
   </div>
+
   <p>{{ .Params.Description }}</p>
 	{{ .Content }}
+
+  {{ if (where (readDir "/static/savefiles") "Name" .File.BaseFileName) }}
+    <div class="row">
+      <div class="col-md-12">
+        <h2>Savefiles</h2>
+        <table class="table table-striped">
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Description</th>
+              <th>Uploaded By</th>
+              <th>Date</th>
+            </tr>
+          </thead>
+          <tbody>
+            {{ range .Params.savefiles }}
+              <tr>
+                <th><a href="/static/savefiles/{{ $gameName }}/{{ .filename }}">{{ .title }}</a></th>
+                <th>{{ .description }}</th>
+                <th>{{ .author }}</th>
+                <th>{{ dateFormat "January 2, 2006" .date }}</th>
+              </tr>
+            {{ end }}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  {{ end }}
+
+  {{ if (where (readDir "/static/images/screenshots0") "Name" .File.BaseFileName) }}
+    <div class="row">
+      <div class="col-md-12">
+        <h2>Screenshots</h2>
+        {{ $files := readDir (printf "/static/images/screenshots0/%s/" .File.BaseFileName) }}
+        {{ range $index, $element := $files }}
+          <div class="popup-gallery col-lg-3 col-md-4 col-xs-6 thumb">
+            <a class="thumbnail" href="/images/screenshots0/{{ $gameName }}/{{ .Name }}">
+              <img class="img-responsive nearest-neighbor" src="/images/screenshots0/{{ $gameName }}/{{ .Name }}">
+            </a>
+          </div>
+        {{ end }}
+      </div>
+    </div>
+  {{ end }}
+
+{{ end }}
+
+{{ define "scripts" }}
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js" integrity="sha256-P93G0oq6PBPWTP1IR8Mz/0jHHUpaWL0aBJTKauisG7Q=" crossorigin="anonymous"></script>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" integrity="sha256-PZLhE6wwMbg4AB3d35ZdBF9HD/dI/y4RazA3iRDurss=" crossorigin="anonymous" />
+
+  <script type="text/javascript">
+    $(document).ready(function() {
+      $('.popup-gallery').magnificPopup({
+        delegate: 'a',
+        type: 'image',
+        tLoading: 'Loading image #%curr%...',
+        mainClass: 'mfp-img-mobile',
+        gallery: {
+          enabled: true,
+          navigateByImgClick: true,
+          preload: [0, 1] // Will preload 0 - before current, and 1 after the current image
+        },
+        image: {
+          tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
+          titleSrc: function(item) {
+            return item.el.attr('title');
+          }
+        }
+      });
+    });
+  </script>
 {{ end }}