Fix main images on content

content/robotics/_index.md

@@ -2,7 +2,7 @@
 title: Student Robotics
 linktitle: Robotics
 image: https://farm4.staticflickr.com/3849/33683313131_6ba584094a_k_d.jpg
-show_images: true
+hide_pages: false
 ---
 
 Student Robotics is the the place where my development knowledge really started to grow. Thanks to the other people in my team teaching me. I had never done anything robotics related, and so when my computing teacher initially told us about it, I wasn't really interested. After I found out that my friend was also doing it, I signed up, and went along to the kickstart. From then on I was hooked, getting involved with all aspects of the development and design, as well as helping out other teams on the IRC room.

layouts/_default/list.html

@@ -7,11 +7,12 @@
     {{ if .Content }}
   		<div class="box">
         {{ if .Params.image }}
-    			<span class="image featured"><img src="{{ .Params.image }}" alt="{{ .Title }} image" /></span>
+    			<span class="image featured main" data-image="{{ .Params.image }}"></span>
         {{ end }}
         {{ .Content }}
   		</div>
     {{ end }}
+    {{ if ne .Params.hide_pages "true" }}
       <div class="row">
         {{ $parent := . }}
         {{ range where .Pages.ByTitle "Params.show_in_nav" "!=" "false" }}
@@ -22,6 +23,7 @@
           {{ end }}
         {{ end }}
       </div>
+    {{ end }}
 	</section>
 </div>
 {{ partial "page_end.html" . }}

layouts/_default/single.html

@@ -9,7 +9,7 @@
 		</header>
 		<div class="box">
       {{ if .Params.image }}
-  			<span class="image featured"><img src="{{ .Params.image }}" alt="{{ .Title }} image" /></span>
+        <span class="image featured main" data-image="{{ .Params.image }}"></span>
       {{ end }}
       {{ .Content }}
 		</div>

layouts/projects/single.html

@@ -9,7 +9,7 @@
 		</header>
 		<div class="box">
       {{ if .Params.image }}
-  			<span class="image featured"><img src="{{ .Params.image }}" alt="{{ .Title }} image" /></span>
+        <span class="image featured main" data-image="{{ .Params.image }}"></span>
       {{ end }}
       {{ .Content }}
 		</div>

static/src/js/index.js

@@ -7,3 +7,13 @@ require('bootstrap');
 require('./alpha/jquery.dropotron.min');
 require('./alpha/util');
 require('./alpha/main');
+
+
+$('.image').each(function () {  // setup div-image hybrids
+  var ele = $(this);
+  if (ele.data('image')) {
+    ele.css('background-image', 'url(' + ele.data('image') + ')');
+  } else {
+    ele.removeClass('image');
+  }
+});

static/src/scss/style.scss

@@ -32,6 +32,12 @@ pre code {
   padding: 0;
 }
 
-.image.featured {
-  max-height: 45vh;
+.image {
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+
+  &.featured.main {
+    height: 40vh;
+  }
 }