<commit_before># 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)

### Standalone

If run within a »normal« image folder, _makethumbsf6_ will also generate a **HTML sample file** with a **[PhotoSwipe](http://photoswipe.com/) 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](http://foundation.zurb.com/)** 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.

```html
<!-- 040-winter-in-bad-grönenbach.jpg (1920x2560px) - cropped, square thumbnail with link to original image -->
<!-- Image copyright: Copyright &copy; 2016 <NAME>, 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: <NAME> / 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.<commit_msg>Added CSS examples to README.md<commit_after># 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)

### Standalone

If run within a »normal« image folder, _makethumbsf6_ will also generate a **HTML sample file** with a **[PhotoSwipe](http://photoswipe.com/) 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](http://foundation.zurb.com/)** 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.

```html
<!-- 040-winter-in-bad-grönenbach.jpg (1920x2560px) - cropped, square thumbnail with link to original image -->
<!-- Image copyright: Copyright &copy; 2016 <NAME>, 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: <NAME> / <NAME> 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:

```css
.gallery figcaption {
  display: none;
}
```

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

```css
/* Make image credits a little smaller, on a new line */
.imagecredits {
  font-size: 80%;
}
.imagecredits:before {
  content: '\A';
  white-space: pre;
}
```
{'fraction_non_alphanumeric': 0.09798861480075902, 'fraction_numerical': 0.025047438330170778, 'mean_word_length': 5.077490774907749, 'pattern_counts': {'":': 0, '<': 50, '<?xml version=': 0, '>': 52, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 4, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '156201', 'n_tokens_mistral': 4189, 'n_tokens_neox': 3846, 'n_words': 1715}