Optimization: Split image containers into indepentdent templates

template/artwork.html

@@ -46,7 +46,7 @@
   </div>
   <h2>Related works</h2>
   <div>
-    {{ template "thumbnail-container.html" .Related }}
+    {{ template "small-tn.html" .Related }}
   </div>
 </div>
 {{ template "footer.html" }}

template/index.html

@@ -3,35 +3,12 @@
   <h1>Recommended works</h1>
 
   <div class="thumbnail-container">
-    {{ template "thumbnail-container.html" .Recommended }}
+    {{ template "small-tn.html" .Recommended }}
   </div>
 
   <h1>Today's rankings</h1>
   <div class="thumbnail-container">
-    {{ range $i, $_ := .Rankings }}
-    <div class="artwork-thumbnail-large artwork-thumbnail">
-      <div class="artwork-rank-circle">{{ $i | inc}}</div>
-      <a href="/artworks/{{ .ID }}">
-        <img
-          src="{{ (index .Images 0).Small }}"
-          alt="{{ .Title }}"
-          class="artwork-master-image"
-        />
-      </a>
-
-      <a class="artwork-thumbnail-title" href="/artworks/{{ .ID }}">
-        <h3 class="no-margin">{{ .Title }}</h3>
-      </a>
-      <a href="#" class="artwork-thumbnail-artist flex"
-        ><img
-          src="{{ .Artist.Avatar.medium }}"
-          alt="{{ .Artist.Name }}"
-          class="artwork-thumbnail-artist-avatar border-rounded"
-        />
-        {{ .Artist.Name }}</a
-      >
-    </div>
-    {{ end }}
+    {{ template "large-tn.html" .Rankings }}
   </div>
 
   <h1>Pixivision</h1>
@@ -51,6 +28,6 @@
   </div>
 
   <h1>Newest by all</h1>
-  <div>{{ template "thumbnail-container.html" .Newest }}</div>
+  <div>{{ template "small-tn.html" .Newest }}</div>
 </div>
 {{ template "footer.html" }}

template/large-tn.html

@@ -0,0 +1,24 @@
+{{ range $i, $_ := . }}
+<div class="artwork-thumbnail-large artwork-thumbnail">
+  <div class="artwork-rank-circle">{{ $i | inc}}</div>
+  <a href="/artworks/{{ .ID }}">
+    <img
+      src="{{ (index .Images 0).Small }}"
+      alt="{{ .Title }}"
+      class="artwork-master-image"
+    />
+  </a>
+
+  <a class="artwork-thumbnail-title" href="/artworks/{{ .ID }}">
+    <h3 class="no-margin">{{ .Title }}</h3>
+  </a>
+  <a href="#" class="artwork-thumbnail-artist flex"
+    ><img
+      src="{{ .Artist.Avatar.medium }}"
+      alt="{{ .Artist.Name }}"
+      class="artwork-thumbnail-artist-avatar border-rounded"
+    />
+    {{ .Artist.Name }}</a
+  >
+</div>
+{{ end }}

template/user.html

@@ -13,7 +13,7 @@
   </div>
   <div>
     <h1>Illustrations and Mangas</h1>
-    {{ template "thumbnail-container.html" $Recent}}
+    {{ template "small-tn.html" $Recent}}
   </div>
 </div>
 {{ end }} {{ template "footer.html" }}