Fix thumbnail size in HTML to avoid jumping content while loading

src/galleries.js

@@ -3,7 +3,7 @@ var fs          = require('fs');
 var path        = require('path');
 var files       = require('./files');
 
-exports.fromDisk = function(mediaPath, mediaPrefix, callback) {
+exports.fromDisk = function(mediaPath, mediaPrefix, size, callback) {
 
   function fileInfo(file) {
     return {
@@ -13,7 +13,8 @@ exports.fromDisk = function(mediaPath, mediaPrefix, callback) {
       url: mediaPrefix + '/' + file,
       thumbnail: thumbsPath(file),
       video: isVideo(file),
-      poster: videoPoster(file)
+      poster: videoPoster(file),
+      size: size
     }
   }
 

src/index.js

@@ -50,7 +50,7 @@ function videos(opts) {
 }
 
 function website(opts) {
-  galleries.fromDisk(opts.input, opts.mediaPrefix, function(err, list) {
+  galleries.fromDisk(opts.input, opts.mediaPrefix, opts.size, function(err, list) {
     var rendered = render.gallery(list, list[0]);
     var outputPath = path.join(opts.output, 'index.html');
     fs.writeFileSync(outputPath, rendered);

templates/gallery.hbs

@@ -36,11 +36,15 @@
              type="video/mp4"
              data-poster="{{poster}}">
              <img src="{{thumbnail}}"
-                 alt="{{name}}" />
+                  width="{{size}}"
+                  height="{{size}}"
+                  alt="{{name}}" />
           </a>
         {{else}}
           <a href="{{url}}">
             <img src="{{thumbnail}}"
+                 width="{{size}}"
+                 height="{{size}}"
                  alt="{{name}}" />
           </a>
         {{/if}}