makethumbsf6

Make thumbnails, responsive images and HTML/Zurb Foundation 6 markup all in one go!

A bash script, put it into ~/bin, chmod +x makethumbsf6 and for a first (standalone) trial run start it from inside the sample-gallery folder.

It should create a set of subfolders:

t — thumbnails, original aspect ratio
ts — squared & cropped thumbnails, 120x120px
s — responsive images for small screens (320w)
m — responsive images for medium screens (640w)
l — resonsive images for large screens (1024w)
xl — responsive images for extra-large screens (1920w)

What’s new in version 0.9.4?

Sample page: No caption texts anymore for thumbnails.
Sample page: Added a little styling to the thumbnails, just to show how.
Documentation on how to use the lightbox on small devices.

What else is new? Changelog · Sample Page · GitPitch · YouTube

Standalone

If run within a »normal« image folder, makethumbsf6 will also generate a HTML sample file with a PhotoSwipe lightbox and almost all documentation included.

You can use this to copy-and-paste actual responsive images and markup code for your website, or just for creating a nice slide show on the fly.

ZURB Foundation 6 Frontend Framework

If run inside a ZURB Foundation 6 folder structure (i.e, something like src/assets/img/gallery/album-01/…), it will instead generate a ready-to-run partial inside your src/partials folder. You can simply include this partial on a gallery page using Panini, for example as {{> gallery-gallery-album-01 gid=1}}.

You typically use this when working on projects using the Foundation framework, but the generated markup can easily be adapted for other frameworks.

Automatic headlines, image captions and markup comments

I strongly believe that image information should be stored together with the image (much like we do it with FLAC or MP3 files already). The image files can then be copied, moved, put on the web without the need of updating databases, changing HTML markup manually, and even the image credits will still be in place if someone downloads it.

Like image and news agencies already do for a long time, I encourage you to store data like a headline, a caption text, the photographer’s name and a copyright notice inside your images. You can use tools like exiftool (or many others) for that, or Adobe Photoshop, Adobe Lightroom, even Windows’ image properties or Mac OSX’ Finder.

Some modern professional cameras (Nikon come to mind) already allow setting your name and copyright line in the camera settings, so this information will automatically be stored with each shot you take.

Makethumbsf6 will automatically read this data, and present you with a beautiful and customizable view. It’ll even generate map links for you, if the GPS location is stored in the images (like many new cameras and smartphones do).

Additionally, makethumbsf6 will automatically put the photographer’s name and (if specified) additional image credits (like maybe the image agency’s name) next to your caption text. This makes it super-easy for you to follow licensing or local laws, if so required.

Run makethumbsf6 inside the sample-gallery folder, then view the generated HTML file with your browser. All sample images have tags (some even GPS data) so you can get a first idea of what can be done. Feel free to change some tags within the sample images (maybe using exiftool or another application you prefer), then run makethumbsf6 again to see what’s changed.

Image tags currently known and used by makethumbsf6:

For all tags, we follow the strict fallback rule: EXIF → IPTC → XMP. This means, if there is an EXIF tag, we use it. If not, we fall back to IPTC data, and as a last measure to XMP.

Here is a prioritized list of tags from which we read the image data:

CREATOR: exif:artist, by-line, creator
CREDIT: credit, publisher
DESCRIPTION: exif:imagedescription, caption-abstract, description, XPcomment
HEADLINE: headline, objectname, title
KEYWORDS: keywords, subject
COPYRIGHT: exif:copyright, copyrightnotice, rights
DATE: dateTimeOriginal
LOCATION: gpslatitude, gpslongitude, gpsaltitude, gpsimgdirection

Generated markup

Example: Thumbnail with link to a lightbox script.

This example has a filename using foreign characters (URL-encoded where necessary), quite a long description, both photographer’s name and credits in it’s data, IMAGE_LINKTO="xl", USE_MAPS=true, MAPLINK_TEXT="Show on map (Google Maps)". It also features a copyright notice and GPS data (latitude, longitude, altitude and viewing direction).

All data read from the actual image is safely encoded using HTML entities (instead of using simple UTF-8), so there’s no possibility that characters like ", ', <, > and others could break your code or open any security holes.

<!-- 040-winter-in-bad-grönenbach.jpg (1920x2560px) - cropped, square thumbnail with link to original image -->
<!-- Image copyright: Copyright &copy; 2016 Matthias C. Hormann, all rights reserved. Alle Rechte vorbehalten. -->
<!-- Image location: 47.8521118055556,10.1619062222222 Height: 732m Viewing direction: 40° -->
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject" title="Eisesk&auml;lte in Bad Gr&ouml;nenbach">
  <a href="xl/040-winter-in-bad-gr%C3%B6nenbach.xl.jpg" itemprop="contentUrl" data-size="1920x2560">
    <img src="ts/040-winter-in-bad-gr%C3%B6nenbach.ts.jpg" itemprop="thumbnail" alt="Eisesk&auml;lte in Bad Gr&ouml;nenbach">
  </a>
  <figcaption itemprop="caption description" title="Eisesk&auml;lte in Bad Gr&ouml;nenbach"><h4>Eisesk&auml;lte in Bad Gr&ouml;nenbach</h4><p><span itemprop="dateCreated" content="2016-12-22T11:17:09">2016-12-22</span> — Trotz Sonnenschein herrschte im Dezember in Bad Gr&ouml;nenbach und Umgebung eine klirrende K&auml;lte &ndash; bis zu -21 &deg;C wurden gemessen. Auf der Kreisstra&szlig;e zwischen Bad Gr&ouml;nenbach und Legau entdeckte unser Fotograf diesen vom Eis verzauberten Baum am Stra&szlig;enrand. [This is an example for UTF-8-encoded foreign text and auto-generated map links.] <span class="imagecredits">(Photo: Matthias C. Hormann / M. Hormann Webdesign)</span></p><a href="https://maps.google.com/maps?t=m&amp;q=47.8521118055556,10.1619062222222" rel="nofollow" target="_blank">Show on map (Google Maps)</a></figcaption>
</figure>

When auto-generating a Foundation 6 partial, the script will have these active. On thumbnails, the caption is often suppressed via CSS:

.gallery figcaption {
  display: none;
}

The credits in the lightbox can also be displayed on a new line, using a slightly smaller font:

/* Make image credits a little smaller, on a new line */
.imagecredits {
  font-size: 80%;
}
.imagecredits:before {
  content: '\A';
  white-space: pre;
}

Example: Same image, responsive, fullsize.

This shows the generated HTML for the same image, fullsize, with responsive markup (using a srcset, so the user’s browser decides which image to actually load; this also neatly solves all problems with Retina displays and the like):

<!-- 040-winter-in-bad-grönenbach.jpg (1920x2560px) - "normal" image on a page, with a srcset (responsive loading) -->
<!-- Image copyright: Copyright &copy; 2016 Matthias C. Hormann, all rights reserved. Alle Rechte vorbehalten. -->
<!-- Image location: 47.8521118055556,10.1619062222222 Height: 732m Viewing direction: 40° -->
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject" title="Eisesk&auml;lte in Bad Gr&ouml;nenbach">
  <img srcset="
      s/040-winter-in-bad-gr%C3%B6nenbach.s.jpg 320w,
      m/040-winter-in-bad-gr%C3%B6nenbach.m.jpg 640w,
      l/040-winter-in-bad-gr%C3%B6nenbach.l.jpg 1024w,
      xl/040-winter-in-bad-gr%C3%B6nenbach.xl.jpg 1920w
      "
    src="s/040-winter-in-bad-gr%C3%B6nenbach.s.jpg"
    sizes="
      100vw"
    alt="Eisesk&auml;lte in Bad Gr&ouml;nenbach">
  <figcaption itemprop="caption description" title="Eisesk&auml;lte in Bad Gr&ouml;nenbach"><h4>Eisesk&auml;lte in Bad Gr&ouml;nenbach</h4><p><span itemprop="dateCreated" content="2016-12-22T11:17:09">2016-12-22</span> — Trotz Sonnenschein herrschte im Dezember in Bad Gr&ouml;nenbach und Umgebung eine klirrende K&auml;lte &ndash; bis zu -21 &deg;C wurden gemessen. Auf der Kreisstra&szlig;e zwischen Bad Gr&ouml;nenbach und Legau entdeckte unser Fotograf diesen vom Eis verzauberten Baum am Stra&szlig;enrand. [This is an example for UTF-8-encoded foreign text and auto-generated map links.] <span class="imagecredits">(Photo: Matthias C. Hormann / M. Hormann Webdesign)</span></p><a href="https://maps.google.com/maps?t=m&amp;q=47.8521118055556,10.1619062222222" rel="nofollow" target="_blank">Show on map (Google Maps)</a></figcaption>
</figure>

In the standalone version, the generated HTML page will also show this image so you can verify that everything loads as expected.

When generating a Foundation 6 partial, the fullsize image markup will also be included, but commented out. This allows to copy-paste perfect responsive image markup for other places on your website. Usually, when generating the production version, the HTML will run through some minification process anyway and the comment be cleaned out automatically, so no overhead is generated for the production site. (Check your gulpfile.babel.js and htmlmin.)

Customization: Have makethumbsf6 do what you need!

My script is highly customizable and each option very well documented. Just make a backup, then open the makethumbsf6 script with a normal (UTF-8-capable) text editor and have a peek inside.

You’ll find a lot of customization options that you can change to fit your needs. Here are just a very few:

USE_SQUARE_THUMBS: Use square thumbnails (auto-cropped), or »normal« ones (having the same aspect ratio as the original image)?
USE_LIGHTBOX: For the standalone version, include the PhotoSwipe lightbox?
FIGURE_TITLE: Force the same title for all thumbnails (i.e., »Click to magnify« instead of the image’s headline)?
IMAGE_LINKTO: Link to the original image or to some defined (max.) size like "xl"?
USE_DATE, DATEFORMAT, DATE_LEADOUT: Define if the »image taken on« date should be shown, and in which format.
CREDITS_LEADIN, CREDITS_LEADOUT: Put some nice text around the image credits (i.e. »(Photo: Photographer / Agency)« instead of »Photographer / Agency«)?
USE_MAPS, MAPLINK_TEXT: Use map links if image has GPS data? What text to display?
F_NAME, F_BREAKPOINT, F_CONV: Number and names of different image versions to generate, their (or your framework’s) responsive breakpoints, and even the commands for each resolution to be given to ImageMagick’s convert.
F_CHANGETYPE: Convert one filetype to another, i.e. TIFF → JPEG on the fly.
… and many, many more!

The generated HTML markup has schema.org microdata, is SEO-optimized, and valid. You can easily change lots of display options using pure CSS.

Please read the documentation in the HTML file generated when you run makethumbsf6 inside the sample-gallery folder. Just below the images, there’s lots and lots of valuable information to find!

No need to do the tedious stuff manually again. Ever.

Hint: For performance reasons, makethumbsf6 will skip already-made thumbnails and lower-res images when it is run again. If you want to force it, just delete the above-mentioned subfolders.

More documentation will follow. Meanwhile, have fun reading the sample HTML file. ;-)

The script (makethumbsf6) is MIT licensed, the images in the sample gallery are NOT (though many of them are CC0). Please check the image data and/or the generated HTML code which will show the copyright notices. Thank you.

Drop me a line @Moonbase59 and let me know what you think. Or let others know, too!

Requirements

A Linux-type OS that has a bash shell with array support and can do 'sort -z'. This means you should be able to use this script on nearly any Linux machine as well as on Apple products running Mac OS X (starting with 10.3 »Panther«), OS X and macOS Sierra.

Hint: You might need a version 4.x bash, see Issue #1.
ImageMagick
Exiftool
For changes and setting options: A text editor that handles UTF-8 (no BOM please).

Installation/Update of ImageMagick/Exiftool

Ubuntu, Linux Mint

RedHat/CentOS

There will most probably be RPMs in your system’s repositories. Alternatively, follow the installation instructions on ImageMagick’s and Exiftool’s homepages.

Other Linuxes

First, try to verify if both tools are installed by doing a identify -version for ImageMagick and exiftool -ver for exiftool in a terminal window.
If they are not, try to locate them in your repositories, using the appropriate package or software manager. Preferably install from there.
If all else fails, follow the installation instructions on ImageMagick’s and Exiftool’s homepages.

FreeBSD

The good news: Yes, I’ve seen it working on FreeBSD.
The bad news: Since bash is neither the default shell nor even included in the default FreeBSD installation, you’ll have to install bash + ImageMagick + exiftool + makethumbsf6. Then chsh to bash and use it.
It might still be worth the effort. Thanks for considering.

Mac OS X

Follow the installation instructions on ImageMagick’s and Exiftool’s homepages.

Windows

A bash script like makethumbsf6 will not work on the Windows command line, sorry for that. I invite you to study the code nevertheless—maybe it’s you who comes up with a Windows equivalent?
You might still want to get ImageMagick and exiftool. Follow the installation instructions on ImageMagick’s and Exiftool’s homepages.

Changelog (of sorts)

Version 0.9.3

Cleaned up lightbox »share« links so no »mixed content« warnings anymore.
Added some documentation on how to install/update ImageMagick and exiftool.
Added a shameless PITCHME.md with some slides. :-)

Version 0.9.2

Assistive technologies for people with disabilities: Added some button descriptions and more ARIA labels. Generated markup now passes WAVE test.
Makethumbsf6 now uses Foundation’s »thumbnail« class for the generated thumbnail links. This makes the visual presentation more attractive, is more compatible with Foundation 6 and allows for easy overall changes within the framework. (See also http://foundation.zurb.com/sites/docs/thumbnail.html.)
Generated thumbnail markup now has proper ARIA labels.

Version 0.9.1

Safety first: You never know what users come up with … Fancy filenames using »illegal« characters like ', ", :, [, ], $ and so forth now work again and don’t break makethumbsf6. Try something like »Fancy: Filename $["ÄÖÜß'] $25.00.jpg«.
For smaller images (width smaller than the largest breakpoint specified), there are no duplicate srcset widths generated anymore. Duplicate widths in a srcset prevent validation, and we want our HTML to validate at all times.

Version 0.9.0

Animated GIFs are now handled (and resized) correctly. Hint: If the generated lower resolution images look like 4 images on top of each other, you might want to upgrade your ImageMagick to a newer version.
Makethumbsf6 now also handles TIFF (.tif, .tiff) files. Per default, these will be automatically converted to JPEG images (smaller, browsers can display them).
You can now specify image type conversion, i.e. convert TIFF to JPEG, MPO to JPEG and so forth. For purely aesthetic reasons, .jpeg will also be renamed to .jpg. (This affects only the generated images, not your originals!)
Preview: This is how the sample page will look like. (LOTS of documentation to be found there—just below the images!)

Name		Name	Last commit message	Last commit date
Latest commit History 50 Commits
docs		docs
sample-gallery		sample-gallery
LICENSE		LICENSE
PITCHME.md		PITCHME.md
PITCHME.yaml		PITCHME.yaml
README.md		README.md
makethumbsf6		makethumbsf6

License

Moonbase59/makethumbsf6

Folders and files

Latest commit

History

Repository files navigation