This is just a very simple test page where all images stretch out to
maximum width. For your convenience, I’ve included the PhotoSwipe lightbox: Just click on a thumbnail and the image will open in the lightbox!
Responsive is great!
All images are »responsive«. That means you can resize your browser
window as you like, or rotate your tablet or smartphone, and you’ll always
get the best image possible. Beautiful image quality on the
smallest handheld device as well as on the largest 75-inch 4K TV
set!
Yes, but who will create all those different image sizes for me?
This script, makethumbsf6, will do all it for you!
It can automatically create thumbnails as well as small and web-optimized
versions of your beautiful originals, without ever modifying the original.
Makethumbsf6 will also create perfect, validating HTML5
responsive markup for you, including optimal code for a lightbox and
SEO-optimized schema.org markup. All you have to do is
copy and paste the generated image code!
Get image data and perfect markup … automagically.
All modern digital images can (and do) hold image information
like where and when a shot was taken, camera settings, a description of
the image content, and maybe even the photographer’s name. Finally, all
image information travels together with—and actually inside—your image:
It’s all here for you—no manual markup needed!
You only add the additional info you want—directly into the image.
These might be: A title, an image description, the
photographer’s name, the company or agency he works for,
and maybe a copyright notice.
Many professional cameras have a setting where you can store your
name and copyright notice so these will be attached automatically
to each image whenever taking a shot. Almost all images from agencies or
news services use this image information already.
Clicking on a thumbnail will open the full-size
image (or the lightbox, if included).
Resize your browser (or try on different devices) to see
the larger responsive images always be loaded in the correct size, and
from the versions we generated using makethumbsf6.
Check out the figure captions automatically generated
from the data stored in your original images. (Use exiftool to
set/modify the headlines, caption texts, by-line, image credits and
copyright notices in your original images, then simply run
makethumbsf6 again.)
Check out the source code of this page and
simply copy-paste whatever you need for your project!
Automatically generated map links on this demo
page will open Google Maps on a separate page.
Brainstorming …
2014-02-28 — »We like the idea of keeping all image-relevant data where it belongs: within the image file!« … »That means even image credits like the photographer’s name and copyright notices will be available at all times—even on the web?« … »Yeah.« … »But we also need several lower-resolution files to make the responsive site real fast and snappy—doing that manually over and over again is a tedious job.« (Photo: Eric Bailey / Startup Stock Photos)
Brainstorming …
2014-02-28 — »We like the idea of keeping all image-relevant data where it belongs: within the image file!« … »That means even image credits like the photographer’s name and copyright notices will be available at all times—even on the web?« … »Yeah.« … »But we also need several lower-resolution files to make the responsive site real fast and snappy—doing that manually over and over again is a tedious job.« (Photo: Eric Bailey / Startup Stock Photos)
Developing a first concept
2014-03-01 — We need a TOOL! And since we work with Zurb’s Foundation 6 framework a lot, it should be able to generate a partial—for a complete gallery page, at best. BUT it must also work stand-alone. Well, and be somehow self-documenting? (Photo: Eric Bailey / Startup Stock Photos)
Developing a first concept
2014-03-01 — We need a TOOL! And since we work with Zurb’s Foundation 6 framework a lot, it should be able to generate a partial—for a complete gallery page, at best. BUT it must also work stand-alone. Well, and be somehow self-documenting? (Photo: Eric Bailey / Startup Stock Photos)
The team at work.
2014-07-31 — Thinking … »We work with Linux a lot, and almost all web servers run on Linux anyway.« … »It should be fast, and easy to use.« … »How about making it a bash script?« … »And have it use tried-and-trusted tools like exiftool and ImageMagick in the background?« … »Great idea, let’s make it so!« (Photo: Eric Bailey / Startup Stock Photos)
The team at work.
2014-07-31 — Thinking … »We work with Linux a lot, and almost all web servers run on Linux anyway.« … »It should be fast, and easy to use.« … »How about making it a bash script?« … »And have it use tried-and-trusted tools like exiftool and ImageMagick in the background?« … »Great idea, let’s make it so!« (Photo: Eric Bailey / Startup Stock Photos)
Eiseskälte in Bad Grönenbach
2016-12-22 — Trotz Sonnenschein herrschte im Dezember in Bad Grönenbach und Umgebung eine klirrende Kälte – bis zu -21 °C wurden gemessen. Auf der Kreisstraße zwischen Bad Grönenbach und Legau entdeckte unser Fotograf diesen vom Eis verzauberten Baum am Straßenrand. [This is an example for UTF-8-encoded foreign text and auto-generated map links.] (Photo: Matthias C. Hormann / M. Hormann Webdesign)
2016-12-22 — Trotz Sonnenschein herrschte im Dezember in Bad Grönenbach und Umgebung eine klirrende Kälte – bis zu -21 °C wurden gemessen. Auf der Kreisstraße zwischen Bad Grönenbach und Legau entdeckte unser Fotograf diesen vom Eis verzauberten Baum am Straßenrand. [This is an example for UTF-8-encoded foreign text and auto-generated map links.] (Photo: Matthias C. Hormann / M. Hormann Webdesign)
2015-02-08 — Making a plan and writing good reusable modules is important. So, plan, code, test, rehearse, try with beta-testers. And don’t forget to give it away as Free and Open-Source Software, so others can benefit, too. And maybe even improve it. (Photo: Startup Stock Photos)
Planning on a whiteboard
2015-02-08 — Making a plan and writing good reusable modules is important. So, plan, code, test, rehearse, try with beta-testers. And don’t forget to give it away as Free and Open-Source Software, so others can benefit, too. And maybe even improve it. (Photo: Startup Stock Photos)
Development of the »makethumbsf6« script (Screenshot)
2017-04-18 — In any case, let’s modularize it, while still keeping it in one script. Let’s have simple-to-use configuration options anybody can use. Even ourselves. :-) (Photo: Matthias C. Hormann / M. Hormann Webdesign)
Development of the »makethumbsf6« script (Screenshot)
2017-04-18 — In any case, let’s modularize it, while still keeping it in one script. Let’s have simple-to-use configuration options anybody can use. Even ourselves. :-) (Photo: Matthias C. Hormann / M. Hormann Webdesign)
Try it. Test it. USE IT.
It’s there: makethumbsf6. Now try it on a real customer project. Test it. Throw awkward stuff at it. Repair it. Test again. USE IT. (Photo: pixabay.com)
Try it. Test it. USE IT.
It’s there: makethumbsf6. Now try it on a real customer project. Test it. Throw awkward stuff at it. Repair it. Test again. USE IT. (Photo: pixabay.com)
St. Michael (Roman-catholic church in Krumbach; 3D-Image)
2014-11-01 — This is actually a nice little local church. Nevertheless, let’s try to break the script by throwing a ».MPO« 3D image file at it. And it works just fine, creating lower-resolution (and smaller-size) responsive 2D images from it. Hooray! Besides, it will now automatically rename image files with uppercase extensions to lowercase extensions. Nothing else changed in your valuable originals. (Photo: Matthias C. Hormann)
St. Michael (Roman-catholic church in Krumbach; 3D-Image)
2014-11-01 — This is actually a nice little local church. Nevertheless, let’s try to break the script by throwing a ».MPO« 3D image file at it. And it works just fine, creating lower-resolution (and smaller-size) responsive 2D images from it. Hooray! Besides, it will now automatically rename image files with uppercase extensions to lowercase extensions. Nothing else changed in your valuable originals. (Photo: Matthias C. Hormann)
Night Lights in Europe 1992–2010 (GIF test)
2012-03-30 — This animation is made up of two images of Europe at night showing lights from sources in cities and along roads in 1992 and 2010. Bright areas highly correlate with high population density – such as the densely populated cities like London, Paris and Rome. Coastal areas are also more populated than inland regions, making the outline of Europe clearly visible in these night images. The images were acquired by the United States’ DMSP satellites. The DMSP satellites are run by the National Oceanic and Atmospheric Administration, monitoring the meteorological, oceanographic and solar–terrestrial physics environments for the US Department of Defense. Data from DMSP’s Operational Linescan System can be used to see city lights. (Photo: ESA)
Night Lights in Europe 1992–2010 (GIF test)
2012-03-30 — This animation is made up of two images of Europe at night showing lights from sources in cities and along roads in 1992 and 2010. Bright areas highly correlate with high population density – such as the densely populated cities like London, Paris and Rome. Coastal areas are also more populated than inland regions, making the outline of Europe clearly visible in these night images. The images were acquired by the United States’ DMSP satellites. The DMSP satellites are run by the National Oceanic and Atmospheric Administration, monitoring the meteorological, oceanographic and solar–terrestrial physics environments for the US Department of Defense. Data from DMSP’s Operational Linescan System can be used to see city lights. (Photo: ESA)
TIFF test
TIFF test
Responsive, all devices, and a lightbox too …
With makethumbsf6 you get all that – and more. Even transparency. (Photo: M. Hormann Webdesign)
Responsive, all devices, and a lightbox too …
With makethumbsf6 you get all that – and more. Even transparency. (Photo: M. Hormann Webdesign)
Houston, we have ignition … and lift-off!
Houston, we have ignition … and lift-off!
Matthias C. Hormann – The Problem Solver
2010-06-24 — From idea to concept to perfect solution: Your partner for web design, technical realization and ongoing support is called Matthias C. Hormann. [This is also an example for filenames with blanks and foreign characters.] (Photo: M. Hormann Webdesign)
2010-06-24 — From idea to concept to perfect solution: Your partner for web design, technical realization and ongoing support is called Matthias C. Hormann. [This is also an example for filenames with blanks and foreign characters.] (Photo: M. Hormann Webdesign)
Pretty easy. You need a system with a bash shell and
exiftool, ImageMagick and Python installed.
Then follow these five simple steps:
Get
hold of my script, save it to a place where the system can find it
(I recommend ~/bin on Linux systems), and give it execute rights
(chmod +x makethumbsf6). This step is only needed once.
Copy all images you want for any one gallery page into a folder. (If
you are working with Zurb’s Foundation 6 framework, this is
most probably something like projectfolder/src/assets/img/gallery/album-01.)
Add all extra image information you want or need directly into the images,
using a tool like exiftool. If you have nothing else (like
maybe Adobe PhotoShop or Lightroom), you can even use Mac OSX’s Finder,
or the Windows Image Properties dialog. (If you are unsure, you can
skip this step and do it later. Then simply run my script again.)
Open a shell (or command prompt), change to the folder containing the
images, and run makethumbsf6. This will take a moment while it
generates thumbnails and optimized smaller images in subfolders called
t, ts, s, m, l and xl. These will contain thumbnails,
squared/cropped thumbnails, and small, medium, large and extra-large
versions of your images, respectively.
The script also generates a HTML test page like this one, called gallery-path-name.html.
(If it detects you are working in a Foundation 6 directory structure,
it will instead generate a
partial called gallery-path-name.html. This can later
be directly included in your page using Panini’s
{{> gallery-path-name gid=1}}.)
Et voilà! My script has done its magic, and you can use
the results however you wish. Copy optimized,
responsive and SEO-friendly
code from this sample page, or watch the live changes in your
Foundation 6 workflow (if foundation watch is being run).
Now how does it really work?
I mainly extract a lot of information from the images and build a HTML5/CSS3/Foundation
6 compatible source from it.
Since doing all that manually can be a lot of work (and quite error-prone),
my script takes the hassle out of it and does most of the work for you.
From your original images (which are never changed), I also build thumbnails
and smaller, web-optimized versions for responsive delivery. That means,
on a mobile device you’ll get smaller images than on a large desktop.
It makes delivering over low-bandwith connections
blazingly fast while you don’t have to do all the work
manually!
The mechanisms I use (imgsrcsets and sizes)
also work great with Retina displays (2x), because eventually
the browser intelligently decides which image to load. Even
rotating a mobile device by 90° is no problem anymore—you’ll always get
the smallest and best quality image delivered.
No Javascript involved—if you don’t want it. Nevertheless,
the image markup generated works just great with many available JS lightbox
scripts, like PhotoSwipe (which I recommend because it has great
mobile features and is framework-independent).
Almost everything is configurable
Not enough yet? You can change almost anything, with a few keystrokes:
Use uncropped, regular thumbnails? Set USE_SQUARE_THUMBS=false.
Don’t show the date the image was taken? Set USE_DATE=false.
Another date/time format? Modify DATEFORMAT='%d.%m.%Y'.
No <h4> for caption headlines? Modify HEADLINE_TAG='h4'.
Another class and text for image rights? Modify CREDITS_LEADIN and
CREDITS_LEADOUT.
Another service provider for map displays? Modify MAPFORMAT.
Need other breakpoints/image sizes? Modify the F_NAME,
F_BREAKPOINT and F_CONV arrays.
More (or less) image formats? Just add to/remove from the
F_NAME, F_BREAKPOINT and F_CONV arrays.
Adapt IMAGE_LINKTO.
Want to fine-tune the image conversion (quality, size, filter, …)?
Modify the F_CONV array—separately for each image type and size!
Documentation, please …?
Still not enough? Study the code of this single
bash script. It is very well documented and can be opened with any
text editor than can read/write UTF-8 encoded text files.
Change to your heart’s content. Fork makethumbsf6 on GitHub and
make a pull request if you feel that you added something of general interest,
or improved it!
Some more hints:
To save some work, especially when generating partials for
Foundation 6, I recommend naming the images in the sequence
they should be presented in the gallery later on. You will save
the work of manually rearranging images in the partial everytime
you re-run the script. It’s still possible to use good image names for
SEO, just name them something like 010-webdesign-krumbach.jpg
or even 010 Webdesign in Krumbach.jpg (Yes, even blanks and
other odd characters are allowed!). Maybe start in steps of
10 so you can add images in between later on.
Makethumbsf6 is quite fast, but converting lots of large
images can take time. So if a small image version already exists,
it won’t convert it again but just re-create the HTML. So if
you changed the original image’s data, or something in the conversion
process like the F_… array, just delete all generated
subfolders and makethumbsf6 will re-create all responsive
image versions again.
This also allows for hassle-free adding of just some images:
Just run the script and it will create the responsive versions of
only the newly added images.
Image data is a nightmare, and nobody follows all standards, or agree
upon them even. Never open Pandora’s box … sigh.
In evaluating (and recommending) image tags that might occur in different
places, I follow a route most professionals also recommend:
EXIF first, IPTC second, XMP:dc last.
Exiftool also follows this route.
For what’s needed to display meaningful data on a web page, I do try
to read as many tags as might be needed, mostly having several fallbacks.
For instance, reading the copyright notice, I first check the EXIF
Copyright, fall back to the IPTC Copyright Notice, and if that also
fails try to read the XMP:dc Rights field.
Adobe (except for Lightroom) seem to prefer XMP:dc over EXIF and IPTC,
Apple products generelly like IPTC, Nikon prefer EXIF and IPTC, and
almost all news agencies (ap, dpa, Reuters) use IPTC extensively.
Personally, I prefer EXIF for some fields (like DateTimeOriginal, Artist
and Copyright), since modern cameras can set these within
the camera so you don’t have to tag every image manually. For
everything else, I strongly prefer IPTC since it’s very well defined
and used by news agencies. Presenting image data on a web site
is news, don’t you think? And who knows, maybe you can even
sell some of your photographs to a newspaper–wouldn’t it be great to
already have all needed information stored in the right places?
The PhotoSwipe Javascript lighbox: Just set
USE_LIGHTBOX=true, run the script again and study the
code. You might also want to check out http://photoswipe.com/.
About foreign characters in the filesystem and on the web: You can,
as demonstrated here, if you work with Linux. Linux supports UTF-8 in
the filesystem just fine, which allows for blanks and all sorts of fancy
characters. Be aware if part of your production chain is on Windows,
though: Modern Windows systems might display the names
correctly but applications could still crap out. I
recommend using ASCII-only filenames in this case (i.e. "ö" →
"oe" and so forth).
Before going to production you might want to check
your original images for unwanted internal data and probably remove such
(use exiftool). Do not erase the data you
want to be shown on the web page! In any case, as a last step,
delete all subfolders makethumbsf6 generated and run the script
again, so all images (and their data!) are updated before publication
on the web.
I tried to make the script as safe and »unbreakable« as possible (you
can even use fancy filenames with umlauts, apostrophes and the like!).
Nevertheless, always make a backup first—I’m not
responsible if something breaks and costs you a million pounds, dollars,
euros …
Working with Zurb’s Foundation 6 framework
Serve the PhotoSwipe files locally.
Download them
and put the contents of the dist folder into a newly-created
src/assets/photoswipe/ folder.
Study this HTML file (search for <!-- PhotoSwipe custom code:)
and copy-paste the code between the next <script> and
</script> tags into a separate file
src/assets/photoswipe/photoswipe-custom.js.
Search for <!-- Start PhotoSwipe code --> and copy-paste from
this line and up to—but not including—the line
<!-- PhotoSwipe Javascript (delivered from CDN for standalone) -->
into a new file src/partials/gallery.html. At the end of that
new file, add the following lines: <!-- PhotoSwipe Javascript --> <script src="{{root}}assets/photoswipe/photoswipe.min.js"></script> <script src="{{root}}assets/photoswipe/photoswipe-ui-default.min.js"></script> <!-- PhotoSwipe custom code: Get gallery from DOM --> <script src="{{root}}assets/photoswipe/photoswipe-custom.js"></script> <!-- End PhotoSwipe code -->
Create a gallery page, let’s call it src/pages/gallerypage.html.
Modify your src/layouts/default.html’s <head>
area to include the Photoswipe CSS files: {{#ifpage 'gallerypage'}} <!-- gallery page(s) --> <link rel="stylesheet" href="{{root}}assets/photoswipe/photoswipe.min.css"> <link rel="stylesheet" href="{{root}}assets/photoswipe/default-skin/default-skin.min.css"> {{/ifpage}}
— Take a break. — Steps 1 thru 5 only need to be done once.
Make a folder for your first album:
src/assets/img/gallery/album-01 and put some original photos there.
In a terminal (command prompt), cd to your album folder, i.e.
cd ~/projects/test/src/assets/img/gallery/album-01. Or use your
file manager, right-click on the subfolder album-01 and select
"Open terminal here" (the wording can differ a little between desktop
environments).
In this folder, on the command line, run makethumbsf6. It will
automatically detect that you run it within a Foundation 6
folder structure and output some information while it proceeds, creating
the miscellaneous subfolders and images for different resolutions.
When makethumbsf6 is finished, it will have created a new
gallery partial for you, called
src/partials/gallery-gallery-album-01.html in this example.
In the new gallery page created above (src/pages/gallerypage.html),
somewhere near the end, now add some Panini code to include your new gallery album: {{!-- include gallery/galleries created by makethumbsf6 --}} {{!-- specify "gid=#" if using more than one gallery on one single page --}} {{> gallery-gallery-album-01 gid=1}}
{{!-- include PhotoSwipe code --}} {{> gallery}}
<!-- end content -->
Done! You now have a perfectly running gallery, with
a low-footprint, fast and feature-rich lightbox!
If you have foundation watch running, you can even watch the
live page updating the gallery whenever you re-run makethumbsf6
in your album folder! Remember that makethumbsf6 will neither erase
or recreate images already built (this helps speeding things up), so if you
change images and/or their data, you might want to manually remove the
subfolders under album-01 in order to force makethumbsf6
building a fresh set.
Now you can play around and optimize your new gallery to your heart’s
content. You may want to modify some settings within makethumbsf6
itself, or even modify src/partials/gallery.html or
src/assets/photoswipe/photoswipe-custom.js. The
possibilities are endless—enjoy!
N.B.: Use exiftool to enter all relevant data into your images
and have makethumbsf6 create beautiful captions, with headlines
and map links even, all automatic and SEO-optimized!
Some exiftool commands I recommend to get going
Set photographer/artist name for all *.jpg in a folder:
exiftool -by-line="Alfred E. Newman" *.jpg Note: Some modern cameras can set the photographer’s name in the EXIF data.
Should you need to overwrite that, use the following instead: exiftool -exif:artist="Alfred E. Newman" *.jpg
Set credits (stock photo or other agency, company) for single image:
exiftool -credit="M. Hormann Webdesign" "999-Matthias C. Hormann - Der Problemlöser.jpg"
(Image filename in apostrophes since it contains blanks.)
Set headline for a single image:
exiftool -headline="Eiseskälte in Bad Grönenbach" "040-winter-in-bad-grönenbach.jpg"
(Character encoding must be UTF-8, so almost all foreign characters can be used.)
Set caption text (description) for an image:
exiftool -caption-abstract="Long description (up to 2000 chars) …" 052-the-coding-phase.jpeg
Set copyright notice for all *.jpg images in a folder:
Erase location data (GPS) so it won’t be published (and no automatic map links generated):
exiftool -gps:all= "040-winter-in-bad-grönenbach.jpg" Caution: You cannot get this information back (except from a backup)!
A better way might be to just set USE_MAPS=false in the script.
Set some keywords for an image (not used in this script but might be handy elsewhere):
exiftool -keywords="webdesign,problem solver,programming,linux" "999-Matthias C. Hormann - Der Problemlöser.jpg"
Wow! What does it cost?
Short answer? Nothing. It’s Free and Open-Source
Software (FOSS) and MIT-licensed, so you can almost do what you
want with it. Even use it for commercial purposes. I only claim that
you shouldn’t steal it. Just leave the examples as they are, don’t change
the copyrights and leave my name in. Oh well, and quote me,
maybe give a backlink.
This took several weeks to make and debug, and is still being actively
debugged (and used everyday).
Buy me a beer instead?
Don’t feel obliged. You don’t have to. But if I could help you, why not help back? You’ll get this warm, fuzzy feeling inside and you’ll know that you’ve moved something … :-)
Linux. The best operating system around, if you want to be
stable and productive.
Phil Harvey’s Exiftool. Kudos to him, and thank you. A really
great tool!
ImageMagick.
A superb toolset for image manipulation, on Linux, Mac &
Windows.
Python. I love this language. Even it is »only« used for
URL encoding here.
PhotoSwipe. Yes,
eventually a little Javascript. Works brilliantly with the code
generated by my script, and makes for a real neat UX, especially on
mobile devices. Kudos to Code Computerlove and Dmitry Semenov.
!