Allow generating rectangular thumbnails (#146)

Add rectangular thumbnail

src/model/output.js

@@ -15,6 +15,7 @@ exports.paths = function (filepath, mediaType, opts) {
 function image (filepath, opts) {
   return {
     thumbnail: relationship(filepath, 'photo:thumbnail', opts),
+    small: relationship(filepath, 'photo:small', opts),
     large: relationship(filepath, shortRel('image', opts.photoPreview), opts),
     download: relationship(filepath, shortRel('image', opts.photoDownload), opts)
   }
@@ -23,6 +24,7 @@ function image (filepath, opts) {
 function video (filepath, opts) {
   return {
     thumbnail: relationship(filepath, 'video:thumbnail', opts),
+    small: relationship(filepath, 'video:small', opts),
     large: relationship(filepath, 'video:poster', opts),
     video: relationship(filepath, shortRel('video', opts.videoPreview), opts),
     download: relationship(filepath, shortRel('video', opts.videoDownload), opts)

src/model/structure.js

@@ -11,8 +11,10 @@ exports.folders = function (filepath, rel, options = {}) {
   const videoExt = options.videoFormat || 'mp4'
   switch (rel) {
     case 'photo:thumbnail': return `media/thumbs/${dir}/${name}.${photoExt}`
+    case 'photo:small': return `media/small/${dir}/${name}.${photoExt}`
     case 'photo:large': return `media/large/${dir}/${name}.${photoExt}`
     case 'video:thumbnail': return `media/thumbs/${dir}/${name}.jpg`
+    case 'video:small': return `media/small/${dir}/${name}.jpg`
     case 'video:poster': return `media/large/${dir}/${name}.jpg`
     case 'video:resized': return `media/large/${dir}/${name}.${videoExt}`
     case 'fs:copy': return `media/original/${dir}/${name}.${ext}`
@@ -30,8 +32,10 @@ exports.suffix = function (filepath, rel, options = {}) {
   const videoExt = options.videoFormat || 'mp4'
   switch (rel) {
     case 'photo:thumbnail': return `media/${dir}/${name}_${ext}_thumb.${photoExt}`
+    case 'photo:small': return `media/${dir}/${name}_${ext}_small.${photoExt}`
     case 'photo:large': return `media/${dir}/${name}_${ext}_large.${photoExt}`
     case 'video:thumbnail': return `media/${dir}/${name}_${ext}_thumb.jpg`
+    case 'video:small': return `media/${dir}/${name}_${ext}_small.jpg`
     case 'video:poster': return `media/${dir}/${name}_${ext}_poster.jpg`
     case 'video:resized': return `media/${dir}/${name}_${ext}_large.${videoExt}`
     case 'fs:copy': return `media/${dir}/${name}.${ext}`

src/steps/actions.js

@@ -3,6 +3,7 @@ const fs = require('fs-extra')
 
 exports.createMap = function (opts) {
   const thumbSize = opts.thumbSize || 120
+  const smallSize = 300
   const largeSize = opts.largeSize || 1000
   const defaultOptions = {
     quality: opts.photoQuality,
@@ -16,6 +17,9 @@ exports.createMap = function (opts) {
     height: thumbSize,
     width: thumbSize
   })
+  const small = Object.assign({}, defaultOptions, {
+    height: smallSize
+  })
   const large = Object.assign({}, defaultOptions, {
     height: largeSize,
     watermark: watermark,
@@ -30,8 +34,10 @@ exports.createMap = function (opts) {
     'fs:copy': (task, done) => fs.copy(task.src, task.dest, done),
     'fs:symlink': (task, done) => fs.symlink(task.src, task.dest, done),
     'photo:thumbnail': (task, done) => downsize.image(task.src, task.dest, thumbnail, done),
+    'photo:small': (task, done) => downsize.image(task.src, task.dest, small, done),
     'photo:large': (task, done) => downsize.image(task.src, task.dest, large, done),
     'video:thumbnail': (task, done) => downsize.still(task.src, task.dest, thumbnail, done),
+    'video:small': (task, done) => downsize.still(task.src, task.dest, small, done),
     'video:poster': (task, done) => downsize.still(task.src, task.dest, large, done),
     'video:resized': (task, done) => downsize.video(task.src, task.dest, videoOpts, done)
   }

src/website/theme-base/helpers/compare.js

@@ -18,7 +18,9 @@ const operators = {
   '<':   function (l, r) { return l < r   },
   '>':   function (l, r) { return l > r   },
   '<=':  function (l, r) { return l <= r  },
-  '>=':  function (l, r) { return l >= r  }
+  '>=':  function (l, r) { return l >= r  },
+  '||':  function (l, r) { return l || r  },
+  '&&':  function (l, r) { return l && r  }
 }
 /* eslint-enable */