Cleaned up gulp file. Using gulp-image-resize for image cropping with gravity.

.travis.yml

@@ -29,6 +29,7 @@ before_script:
   - cd $TRAVIS_BUILD_DIR
 
   - echo '========== Installing gulp / hugo dependencies =========='
+  - convert -help
   - yarn global add @alrra/travis-scripts
   - yarn global add gulp
   - yarn global add hugo-bin

gulpfile.js

@@ -1,22 +1,18 @@
-var gulp = require('gulp');
-var gutil = require('gulp-util');
-var exec = require('child_process').exec;
-var rimraf = require('rimraf');
+const gulp = require('gulp');
+const exec = require('child_process').exec;
+const rimraf = require('rimraf');
 
-var postcss = require('gulp-postcss');
-var cssImport = require('postcss-import');
-var cssnext = require('postcss-cssnext');
+const ghPages = require('gulp-gh-pages');
 
-var md5 = require("gulp-md5-plus");
+const md5 = require("gulp-md5-plus");
+const postcss = require('gulp-postcss');
+const cssImport = require('postcss-import');
+const cssnext = require('postcss-cssnext');
+const cleanCSS = require('gulp-clean-css');
 
-var ghPages = require('gulp-gh-pages');
+const imageResize = require('gulp-image-resize');
 
-var uncss = require('gulp-uncss');
-var cleanCSS = require('gulp-clean-css');
-var image = require('gulp-image');
-var jimp = require("gulp-jimp-resize");
-
-var htmlmin = require('gulp-htmlmin');
+const htmlmin = require('gulp-htmlmin');
 
 const distPath = './site/public';
 const cname = 'citra-emu.org';
@@ -53,16 +49,16 @@ gulp.task('images', ['hugo'], () => (
   gulp.src(`${distPath}/images/*`, {base: './'})
       .pipe(gulp.dest('./')),
   gulp.src(`${distPath}/images/jumbotron/*`, {base: './'})
-      .pipe(jimp({ sizes: [{"width": 786, "height": 471 }] }))
+      .pipe(imageResize({ width: 786, height: 471, crop: true }))
       .pipe(gulp.dest('./')),
   gulp.src(`${distPath}/images/banners/*`, {base: './'})
-      .pipe(jimp({ sizes: [{"width": 824, "height": 306 }] }))
+      .pipe(imageResize({ width: 824, height: 306, crop: false }))
       .pipe(gulp.dest('./')),
   gulp.src(`${distPath}/images/game/boxart/*`, {base: './'})
-      .pipe(jimp({ sizes: [{"width": 328, "height": 300 }] }))
+      .pipe(imageResize({ width: 328, height: 300, crop: true }))
       .pipe(gulp.dest('./')),
   gulp.src(`${distPath}/images/game/icons/*`, {base: './'})
-      .pipe(jimp({ sizes: [{"width": 48, "height": 48 }] }))
+      .pipe(imageResize({ width: 48, height: 48, crop: true }))
       .pipe(gulp.dest('./'))
 ));
 

package.json

@@ -9,12 +9,8 @@
     "gulp-clean-css": "^3.0.3",
     "gulp-gh-pages": "^0.5.4",
     "gulp-htmlmin": "^3.0.0",
-    "gulp-image": "^2.7.5",
-    "gulp-jimp-resize": "^2.0.2",
+    "gulp-image-resize": "^0.12.0",
     "gulp-md5-plus": "^0.2.5",
-    "gulp-postcss": "^6.3.0",
-    "gulp-uncss": "^1.0.6",
-    "gulp-util": "^3.0.8",
     "postcss-cssnext": "^2.9.0",
     "postcss-import": "^8.2.0",
     "rimraf": "^2.6.1"

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

@@ -26,9 +26,11 @@
   </div>
 
 	<h1>{{ .Title }}</h1>
-  <div class="row" style="padding-bottom: 16px;">
+  <div class="row">
     <div class="col-md-5">
-      <img class="center-block img-responsive compatibility-boxart" style="padding-top: 6px;" src="{{ .Site.BaseURL }}images/game/boxart/{{ .Params.Banner | default (print .File.BaseFileName ".png") }}" />
+      <div class="boxart">
+        <img src="{{ .Site.BaseURL }}images/game/boxart/{{ .Params.Banner | default (print .File.BaseFileName ".png") }}" />
+      </div>
     </div>
     <div class="col-md-7">
       <!-- Metadata information -->
@@ -36,7 +38,7 @@
         <tbody>
           <tr>
             {{- $rating := index .Site.Data.compatibility .Params.compatibility }}
-            <td style="width: 120px;">Status</td>
+            <td style="width: 120px;">Rating</td>
             <td><b><div class="square-icon" style="background-color: {{ $rating.color }}"></div> {{ $rating.name }}</b><br />{{ $rating.description }}</td>
           </tr>
           <tr>
@@ -81,6 +83,7 @@
               <tr>
                 <th>Date</th>
                 <th>Tested By</th>
+                <th>Hardware</th>
                 <th>Citra Version</th>
                 <th>Rating</th>
               </tr>
@@ -89,6 +92,7 @@
               <tr>
                 <td>{{ dateFormat "January 2, 2006" .date }}</td>
                 <td><a href="https://community.citra-emu.org/u/{{ .author }}/summary">{{ .author }}</a></td>
+                <td>{{ .cpu }}<br />{{ .gpu }}<br />{{ .os }}</td>
                 <td>{{ .version }}</td>
                 <td><b><div class="square-icon" style="background-color: {{ $rating.color }}"></div> {{ $rating.name }}</b></td>
               </tr>

site/themes/citra-bs-theme/static/css/style.css

@@ -323,4 +323,3 @@ a:hover, a:focus {
 
 /* Games Module */
 .game-icon-list { }
-.compatibility-boxart { width: 328px; height: 300px; padding-bottom: 16px; }