support for custom title and CSS

README.md

@@ -2,6 +2,7 @@
 
 Static HTML galleries from a list of photos & videos.
 
+- supports custom title and styles
 - creates thumbnails for fast previews
 - only rebuilds changed files: it's fast!
 - uses relative paths so you can deploy the pages anywhere
@@ -44,13 +45,15 @@ The following args are required:
 
 And you can optionally specify:
 
-- `--thumb-size <pixels>` thumbnail image size (default 120)
-- `--large-size <pixels>` fullscreen image size (default 1000)
+- `--title [text]` website title (default "Photo gallery")
+- `--thumb-size [pixels]` thumbnail image size (default 120)
+- `--large-size [pixels]` fullscreen image size (default 1000)
+- `--css [file]` styles to be applied on top of the default theme (default none)
 
 For example:
 
 ```bash
-thumbsup --input "/media/photos" --output "./website" --thumb-size 200 --large-size 1500
+thumbsup --input "/media/photos" --output "./website" --title "My holidays" --thumb-size 200 --large-size 1500 --css "./custom.css"
 ```
 
 ## Website structure

bin/thumbsup.js

@@ -5,15 +5,19 @@ var index = require('../src/index');
 
 program
   .version('0.0.1')
-  .option('-i, --input <path>', 'Path to the folder with all photos/videos')
-  .option('-o, --output <path>', 'Output path for the static website')
-  .option('-t, --thumb-size [pixels]', 'Thumbnail size in pixels (square)')
-  .option('-l, --large-size [pixels]', 'Fullscreen size in pixels (square)')
+  .option('--input <path>', 'Path to the folder with all photos/videos')
+  .option('--output <path>', 'Output path for the static website')
+  .option('--title <text>', 'Website title')
+  .option('--css <file>', 'Extra CSS file for styling')
+  .option('--thumb-size [pixels]', 'Thumbnail size in pixels (square)')
+  .option('--large-size [pixels]', 'Fullscreen size in pixels (height)')
   .parse(process.argv);
 
 index.build({
   input: program.input,
   output: program.output,
+  title: program.title,
+  css: program.css,
   thumbSize: program.thumbSize,
   largeSize: program.largeSize
 });

example/build.js

@@ -11,6 +11,14 @@ thumbsup.build({
   // for the thumbnails and static pages
   output: 'example/website',
 
+  // website title
+  // the first word will be in color
+  title: 'Photo gallery',
+
+  // main site color
+  // for the title and links
+  css: null,
+
   // size of the square thumbnails
   // in pixels
   thumbSize: 120,

public/theme.css

@@ -35,8 +35,7 @@ h2 {
 }
 
 nav {
-  color: #33609c;
-  margin-bottom: 2em;
+  margin-bottom: 2.3em;
 }
 
 nav li {
@@ -45,7 +44,7 @@ nav li {
 }
 
 nav a {
-  color: #33609c;
+  color: #666;
   display: inline-block;
   padding: 0.4em 1em;
   text-decoration: none;

src/index.js

@@ -1,3 +1,4 @@
+var _           = require('lodash');
 var fs          = require('fs-extra');
 var path        = require('path');
 var async       = require('async');
@@ -11,22 +12,30 @@ var make        = require('./make');
 
 exports.build = function(opts) {
 
-  if (opts.thumbSize) thumbs.sizes.thumb = opts.thumbSize;
-  if (opts.largeSize) thumbs.sizes.large = opts.largeSize;
+  opts = _.defaults(opts, {
+    title: 'Photo gallery',
+    thumbSize: 120,
+    largeSize: 1000
+  });
+
+  thumbs.sizes.thumb = opts.thumbSize;
+  thumbs.sizes.large = opts.largeSize;
 
   fs.mkdirp(opts.output);
   var media = path.join(opts.output, 'media');
 
   function website(callback) {
-    galleries.fromDisk(opts.input, thumbs.sizes.thumb, function(err, list) {
+    galleries.fromDisk(opts.input, opts.thumbSize, function(err, list) {
       if (err) return callback(err);
 
-      var rendered = render.gallery(list, list[0]);
+      var style = opts.css ? path.basename(opts.css) : null;
+
+      var rendered = render.gallery(list, list[0], opts.title, style);
       var outputPath = path.join(opts.output, 'index.html');
       fs.writeFileSync(outputPath, rendered);
     
       list.forEach(function(folder) {
-        var rendered = render.gallery(list, folder);
+        var rendered = render.gallery(list, folder, opts.title, style);
         var outputPath = path.join(opts.output, folder.url);
         fs.writeFileSync(outputPath, rendered);
       });
@@ -41,6 +50,15 @@ exports.build = function(opts) {
     copyFolder(src, dest, callback);
   }
 
+  function customStyle(callback) {
+    if (opts.css) {
+      var dest = path.join(opts.output, 'public', path.basename(opts.css));
+      fs.copy(opts.css, dest, callback);
+    } else {
+      callback();
+    }
+  }
+
   function copyMedia(callback) {
     var dest = path.join(opts.output, 'media', 'original');
     copyFolder(opts.input, dest, callback);
@@ -85,6 +103,7 @@ exports.build = function(opts) {
   async.series([
     step('Website',           website),
     step('Support',           support),
+    step('Custom styles',     customStyle),
     step('Original media',    copyMedia),
     step('Photos (large)',    photoLarge),
     step('Photos (thumbs)',   photoThumbs),

src/render.js

@@ -9,7 +9,7 @@ function compileTemplate(hbsFile) {
 
 var galleryTemplate = compileTemplate('gallery.hbs');
 
-exports.gallery = function(list, active) {
+exports.gallery = function(list, active, title, css) {
 
   var links = list.map(function(item) {
     return {
@@ -19,9 +19,14 @@ exports.gallery = function(list, active) {
     };
   });
 
+  var titleParts = title.split(' ');
+
   return galleryTemplate({
+    css: css,
     links: links,
-    gallery: active
+    gallery: active,
+    title: titleParts[0],
+    subtitle: titleParts.slice(1)
   });
 
 };

templates/gallery.hbs

@@ -7,6 +7,9 @@
       <title>{{gallery.name}}</title>
       <link rel="stylesheet" href="public/reset.css" />
       <link rel="stylesheet" href="public/theme.css" />
+      {{#if css}}
+        <link rel="stylesheet" href="public/{{css}}" />
+      {{/if}}
       <link rel="stylesheet" href="public/blueimp/css/blueimp-gallery.min.css">
       <link rel="stylesheet" href="public/blueimp/css/blueimp-gallery-video.css">
       <link rel="stylesheet" href="public/blueimp/css/blueimp-gallery-indicator.css">
@@ -15,8 +18,8 @@
   <body>
   
     <header>
-      <h1>Photo</h1>
-      <h2>gallery</h2>
+      <h1>{{title}}</h1>
+      <h2>{{subtitle}}</h2>
     </header>
 
     <nav>