middleman-simple-thumbnailer 1.0.2 → 1.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
-SHA1:
-  metadata.gz: a8fcbef0d63780a552248c4a83a2450abdacb456
-  data.tar.gz: 0dba15673827e0da8cbe89d9ee4f49dc844d29a6
+SHA256:
+  metadata.gz: 7d26882da6c2c6bc7b27f6b2ea10a6d87190f2eb36d2f1365294860fd747966c
+  data.tar.gz: b1b99d9f8dd8955a040475de9554b2e610f91d6867969d1fb3ab00c3b95a3f28
 SHA512:
-  metadata.gz: dcbfcc6a3f1373bb78c578c522a002fc265971d701dc9fc98efd7c40d9c8cc599be47a4fd05d3cb3463f105769a1134a901448f1c4fd0eec89a0af657bd76bf0
-  data.tar.gz: cd5abd6b19674cbab8273324022711d3cda865f70e3cf3df484cfd8273a1a7b51cdeb20d706ce60429b1155111539a478cdeace265f30edb35825108c2e554f7
+  metadata.gz: 78184f4ad682582dec4b790c08829527013f5cc451ec5cc41de0644341c07da1a609f2ffd20c5dc54bc85945bdc44abe30b7167c9764ecbc1ce7c31d5a445d74
+  data.tar.gz: cf26509202cff72228f4c4babd5f48f67c5c40f93c17f8608e7f91af7ff970affc04b86019c7a5d8093cf31e182e0390bc7acde77f9b7f76270e813c809bf49e

data/.devcontainer/Dockerfile

@@ -0,0 +1,20 @@
+# See here for image contents: https://github.com/microsoft/vscode-dev-containers/tree/v0.158.0/containers/ruby/.devcontainer/base.Dockerfile
+
+# [Choice] Ruby version: 3, 3.0, 2, 2.7, 2.6, 2.5
+ARG VARIANT="3"
+FROM mcr.microsoft.com/vscode/devcontainers/ruby:0-${VARIANT}
+
+# [Option] Install Node.js
+ARG INSTALL_NODE="true"
+ARG NODE_VERSION="lts/*"
+RUN if [ "${INSTALL_NODE}" = "true" ]; then su vscode -c "umask 0002 && . /usr/local/share/nvm/nvm.sh && nvm install ${NODE_VERSION} 2>&1"; fi
+
+# [Optional] Uncomment this section to install additional OS packages.
+RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
+    && apt-get -y install --no-install-recommends imagemagick
+
+# [Optional] Uncomment this line to install additional gems.
+# RUN gem install <your-gem-names-here>
+
+# [Optional] Uncomment this line to install global node packages.
+# RUN su vscode -c "source /usr/local/share/nvm/nvm.sh && npm install -g <your-package-here>" 2>&1

data/.devcontainer/devcontainer.json

@@ -0,0 +1,35 @@
+// For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:
+// https://github.com/microsoft/vscode-dev-containers/tree/v0.158.0/containers/ruby
+{
+	"name": "Ruby",
+	"build": {
+		"dockerfile": "Dockerfile",
+		"args": { 
+			// Update 'VARIANT' to pick a Ruby version: 3, 3.0, 2, 2.7, 2.6, 2.5
+			"VARIANT": "2.7",
+			// Options
+			"INSTALL_NODE": "false",
+			"NODE_VERSION": "lts/*"
+		}
+	},
+
+	// Set *default* container specific settings.json values on container create.
+	"settings": { 
+		"terminal.integrated.shell.linux": "/bin/bash"
+	},
+
+	// Add the IDs of extensions you want installed when the container is created.
+	"extensions": [
+		"rebornix.Ruby"
+	],
+	
+	// Use 'forwardPorts' to make a list of ports inside the container available locally.
+	// "forwardPorts": [],
+
+	// Use 'postCreateCommand' to run commands after the container is created.
+	"postCreateCommand": "sudo apt-get update && sudo apt-get install -y ripgrep && gem install bundler && bundle install",
+
+	// Comment out connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
+	"remoteUser": "vscode"
+
+}

data/.github/workflows/ci.yml

@@ -0,0 +1,22 @@
+name: CI
+
+on: [push, pull_request]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    continue-on-error: ${{ matrix.experimental == true }}
+    name: ubuntu-ruby-${{ matrix.ruby-version }}
+    strategy:
+      matrix:
+        ruby-version: ['2.7']
+    steps:
+    - uses: actions/checkout@v2
+    - name: Set up Ruby
+      uses: ruby/setup-ruby@v1
+      with:
+        ruby-version: ${{ matrix.ruby-version }}
+        bundler-cache: true
+    - name: Runs tests
+      run: bundle exec cucumber
+ 

data/.gitignore

@@ -4,3 +4,7 @@ Gemfile.lock
 pkg/*
 .rvmrc
 tmp
+.ruby-version
+.direnv
+.envrc
+.vscode

data/README.md

@@ -4,17 +4,19 @@ Middleman Simple Thumbnailer [![Build Status](https://travis-ci.org/kubenstein/m
 Middleman Simple Thumbnailer is a [Middleman](http://middlemanapp.com/) extension that allows you to create image thumbnails by providing `resize_to` option to image_tag helper.
 
 
-Installation
--------
+## Installation
+
 Put this line into your `Gemfile`:
 ```
 gem 'middleman-simple-thumbnailer'
 ```
 
-Usage
------
+## Usage
+
+### All mode
+
 Enable the extension in `config.rb`:
-```
+```ruby
 activate :middleman_simple_thumbnailer
 ```
 
@@ -23,11 +25,81 @@ And modify your `image_tag`'s by adding `resize_to` parameter:
 = image_tag image, resize_to: '50x50', class: 'thumbnail'
 ```
 
-Build/Development modes
------
-  During development thumbnails will be created on fly and presented as a base64 strings.
-  During build thumbnails will be created as normal files and stored in same dir as their originals.
+You can also use the `image_path` helper the same way in place where you need only the path of the resized image:
+```html
+<picture>
+  <source srcset="<%= image_path 'original.jpg', resize_to: 1200 %>" media="(min-width: 900px)">
+  <%= image_tag "original.jpg", resize_to: "400%", class: 'the-image-class' %>
+</picture>
+``` 
+
+This extension use ImageMagick (via mini_magick) to resize the images.
+The `resize_to` format is therefore the one defined ny ImageMagick. The documentation can be found [there](http://www.imagemagick.org/script/command-line-processing.php#geometry).
+
+### Dynamic mode
+
+This mode is the default operating mode for this extension.
+The images are generated according to their declaration in the helpers.
+See the [known limitations](#known-limitation) paragraph below for known limitation in this mode.
+
+### Declarative mode
+
+In this mode, the resized file are declared. They are then added to the sitemap and generated at the same time than the other files.
+
+To activate this new mode, the option `:use_specs` must be used when activating the extension.
+
+```ruby
+activate :middleman_simple_thumbnailer, use_specs: true
+```
+
+Then the resizing specifications must be declared in a special [Middleman data file](https://middlemanapp.com/advanced/data-files/). By default the extension will look for `data/simple_thumbnailer.yaml`.
+
+This file must contains a list of mappings with the following keys:
+  - `path`: the relative path of the image file in the `source\images` folder. This can be a glob pattern (https://ruby-doc.org/core/Dir.html#method-c-glob) (still relative to the `source\images` folder).
+  - `resize_to`: the [ImageMagix resize](http://www.imagemagick.org/script/command-line-processing.php#geometry) parameter
+
+example (in yaml, file `data/simple_thumbnailer.yaml`):
+
+```yaml
+---
+- path: original.jpg
+  resize_to: 10x10
+- path: "*.jpg"
+  resize_to: 5x5
+```
+
+The use of the `image_tag` and `image_path` helpers stay the same.
+
+In this mode if a resizing specification found in an `image_tag` or `image_path` helper is not declared in the specification data file, a warning is emitted and the data file is rewritten to include the resizing specification. If the specification file doesn't exist, it is created (this behavior can be configured).
+
+
+### options
+
+Option                        | default value                    | Description 
+------------------------------|----------------------------------|-------------
+:use\_cache\_dev              | `true`                           | In development, add a Rack middleware to serve the resized image from cache
+:cache\_dir                   | `'tmp/simple-thumbnailer-cache'` | Directory (relative to project root) for cached thumbnails.
+:use\_specs                   | `false`                          | Wether or not use resize specfication data file
+:specs\_data                  | `'simple_thumbnailer'`           | name of the specification data file. It must follow the Middleman data file name convention.
+:specs\_data\_default\_format | `'yaml'`                         | defaut specification format (and extension). Can be 'yml', 'yaml', 'json'
+:specs\_data\_save\_old       | `true`                           | save previous specification data file
+:update\_specs                | `true`                           | Warn about missing image files in the specification file and add them to it. The spécification file will be overwritten.
+
+
+## Known limitation
+
+In the dynamic mode, this extension is unable to update the [sitemap](https://middlemanapp.com/advanced/sitemap/). Some extensions (like [middleman-s3_sync](https://github.com/fredjean/middleman-s3_sync)) uses the content of the sitemap to do their work. Therefore, the generated resized images will not be seen by such extensions, even if they are corectly generated.
+
+
+## Build/Development modes
+
+During development:
+  - if option `use_cache_dev` is set to `true` thumbnails will be created when accessed, and are served with a rack middleware from the cache folder.
+  - Otherwise thumbnails will be created on fly and presented as a base64 strings.
+
+During build thumbnails will be created as normal files and stored in same dir as their originals.
+
+
+## LICENSE
 
-LICENSE
------
-MIT
+MIT

data/config/cucumber.yml

@@ -0,0 +1 @@
+default: --publish-quiet

data/features/caching_thumbnails_in_development.feature

@@ -4,18 +4,46 @@ Feature: Caching thumbnails in development
     Given the Server is running at "basic-app"
     And there is no cache directory yet
     When I go to "/page-with-images-to-resize.html"
+    And I visit all images
     Then the cache directory should exist with the following files
       | images/original.10x10gt.eb4e78fd2554225b2.jpg |
-      | images/original.5x5.eb4e78fd2554225b2.jpg   |
+      | images/original.5x5.eb4e78fd2554225b2.jpg     |
+
+  Scenario: Cached thumbnails are created use cache dev
+    Given the Server is running at "basic-app-use-cache"
+    And there is no cache directory yet
+    When I go to "/page-with-images-to-resize.html"
+    And I visit all images
+    Then the cache directory should exist with the following files
+      | images/original.10x10gt.eb4e78fd2554225b2.jpg |
+      | images/original.5x5.eb4e78fd2554225b2.jpg     |
+
 
   Scenario: Cached thumbnails are used, if present
     Given the Server is running at "cached-thumbnails"
     When I go to "/page-with-images-to-resize.html"
     Then I should see base64ed data of the cached thumbnails
 
+  Scenario: Cached thumbnails are used, if present use cache dev
+    Given the Server is running at "cached-thumbnails-use-cache"
+    When I go to "/page-with-images-to-resize.html"
+    Then I should see urls for the following cached thumbnails:
+      | type  | size  | class | relative |
+      | img   | 10x10 | 10x10 | false    |
+      | img   | 5x5   | 5x5   | false    |
+
   Scenario: Manually setting the cache directory
     Given the Server is running at "custom-cache-dir"
     When I go to "/page-with-images-to-resize.html"
+    And I visit all images
+    Then the cache directory should exist at "tmp/xxx" with the following files
+      | images/original.10x10.eb4e78fd2554225b2.jpg |
+      | images/original.5x5.eb4e78fd2554225b2.jpg   |
+
+  Scenario: Manually setting the cache directory use cache
+    Given the Server is running at "custom-cache-dir-use-cache"
+    When I go to "/page-with-images-to-resize.html"
+    And I visit all images
     Then the cache directory should exist at "tmp/xxx" with the following files
       | images/original.10x10.eb4e78fd2554225b2.jpg |
       | images/original.5x5.eb4e78fd2554225b2.jpg   |

data/features/generate_image_thumbnails.feature

@@ -1,15 +1,23 @@
 Feature: Generate image thumbnails
-  
+
   Scenario: Preserve default image_tag behaviour if no resize_to param is given
     Given the Server is running at "basic-app"
     When I go to "/page-with-untouched-image.html"
-    Then I should see '<img src="/images/original.jpg" />'
+    Then I should see '<img src="/images/original.jpg" alt="Original" />'
 
   Scenario: Preserve default image_tag behaviour after build if no resize_to param was given
     Given a fixture app "basic-app"
     And a successfully built app at "basic-app"
     When I cd to "build"
-    Then the file "page-with-untouched-image.html" should contain '<img src="/images/original.jpg" />'
+    Then the file "page-with-untouched-image.html" should contain '<img src="/images/original.jpg" alt="Original" />'
+
+  Scenario: Generate base64 thumbnail of image with resize_to param given use cache dev
+    Given the Server is running at "basic-app-use-cache"
+    When I go to "/page-with-images-to-resize.html"
+    Then I should see urls for the following cached thumbnails:
+      | type | size   | class | relative | alt              |
+      | img  | 10x10> | 10x10 | false    | Original.10x10gt |
+      | img  | 5x5    | 5x5   | false    | Original.5x5     |
 
   Scenario: Generate base64 thumbnail of image with resize_to param given
     Given the Server is running at "basic-app"
@@ -24,5 +32,11 @@ Feature: Generate image thumbnails
       | filename                    | dimensions |
       | images/original.10x10gt.jpg | 10x5       |
       | images/original.5x5.jpg     |  5x2       |
-    And the file "page-with-images-to-resize.html" should contain '<img class="image-resized-to10x10" src="/images/original.10x10gt.jpg" />'
-    And the file "page-with-images-to-resize.html" should contain '<img class="image-resized-to5x5" src="/images/original.5x5.jpg" />'
+    And the file "page-with-images-to-resize.html" should contain '<img src="/images/original.10x10gt.jpg" class="image-resized-to10x10" alt="Original.10x10gt" />'
+    And the file "page-with-images-to-resize.html" should contain '<img src="/images/original.5x5.jpg" class="image-resized-to5x5" alt="Original.5x5" />'
+
+  Scenario: Not using resize_to should nt fail the build
+    Given a fixture app "basic-app-no-resize"
+    And a successfully built app at "basic-app-no-resize"
+    When I cd to "build"
+    Then the file "page-with-untouched-image.html" should contain '<img src="/images/original.jpg" alt="Original" />'

data/features/generate_image_thumbnails_image_path.feature

@@ -0,0 +1,44 @@
+Feature: Generate image thumbnails with image path
+
+  Scenario: Preserve default image_path behaviour if no resize_to param is given
+    Given the Server is running at "basic-app-image-path"
+    When I go to "/page-with-untouched-image.html"
+    Then I should see '<img src="/images/original.jpg" alt="Original" />'
+    And I should see '<source srcset="/images/original.jpg" media="(min-width: 900px)">'
+
+  Scenario: Preserve default image_path behaviour after build if no resize_to param was given
+    Given a fixture app "basic-app-image-path"
+    And a successfully built app at "basic-app-image-path"
+    When I cd to "build"
+    Then the file "page-with-untouched-image.html" should contain '<img src="/images/original.jpg" alt="Original" />'
+    And the file "page-with-untouched-image.html" should contain '<source srcset="/images/original.jpg" media="(min-width: 900px)">'
+
+
+  Scenario: Generate url thumbnail of image with resize_to param given use cache dev
+    Given the Server is running at "basic-app-image-path-use-cache"
+    When I go to "/page-with-images-to-resize.html"
+    Then I should see urls for the following cached thumbnails:
+      | type | size   | class | relative | alt              |
+      | img  | 10x10> | 10x10 | false    | Original.10x10gt |
+      | img  | 5x5    | 5x5   | false    | Original.5x5     |
+
+  Scenario: Generate base64 thumbnail of image with resize_to param given
+    Given the Server is running at "basic-app-image-path"
+    When I go to "/page-with-images-to-resize.html"
+    Then I should see base64ed thumbnails and srcset of the images
+
+
+  Scenario: After build server resized images
+    Given a fixture app "basic-app-image-path"
+    And a successfully built app at "basic-app-image-path"
+    When I cd to "build"
+    Then the following images should exist:
+      | filename                    | dimensions |
+      | images/original.10x10gt.jpg | 10x5       |
+      | images/original.5x5.jpg     |  5x2       |
+      | images/original.20x20.jpg   | 20x9       |
+      | images/original.15x15.jpg   | 15x7       |
+    And the file "page-with-images-to-resize.html" should contain '<img src="/images/original.10x10gt.jpg" class="image-resized-to10x10" alt="Original.10x10gt" />'
+    And the file "page-with-images-to-resize.html" should contain '<source srcset="/images/original.20x20.jpg" media="(min-width: 900px)">'
+    And the file "page-with-images-to-resize.html" should contain '<img src="/images/original.5x5.jpg" class="image-resized-to5x5" alt="Original.5x5" />'
+    And the file "page-with-images-to-resize.html" should contain '<source srcset="/images/original.15x15.jpg" media="(min-width: 900px)">'

data/features/generate_image_thumbnails_relative_assets.feature

@@ -0,0 +1,43 @@
+Feature: Generate image thumbnails
+
+  Scenario: Preserve default image_tag behaviour if no resize_to param is given
+    Given the Server is running at "basic-app-relative-assets"
+    When I go to "/page-with-untouched-image.html"
+    Then I should see '<img src="images/original.jpg" alt="Original" />'
+
+  Scenario: Preserve default image_tag behaviour after build if no resize_to param was given
+    Given a fixture app "basic-app-relative-assets"
+    And a successfully built app at "basic-app-relative-assets"
+    When I cd to "build"
+    Then the file "page-with-untouched-image.html" should contain '<img src="images/original.jpg" alt="Original" />'
+
+
+  Scenario: Generate url thumbnail of image with resize_to param given
+    Given the Server is running at "basic-app-relative-assets-use-cache"
+    When I go to "/page-with-images-to-resize.html"
+    Then I should see urls for the following cached thumbnails:
+      | type   | size   | class | relative | alt              |
+      | img    | 10x10  | 10x10 | true     | Original.10x10gt |
+      | img    | 5x5    | 5x5   | true     | Original.5x5     |
+      | srcset | 20x20> |       | true     |                  |
+      | srcset | 15x15> |       | true     |                  |
+
+  Scenario: Generate base64 thumbnail of image with resize_to param given
+    Given the Server is running at "basic-app-relative-assets"
+    When I go to "/page-with-images-to-resize.html"
+    Then I should see base64ed thumbnails of the images
+
+  Scenario: After build server resized images
+    Given a fixture app "basic-app-relative-assets"
+    And a successfully built app at "basic-app-relative-assets"
+    When I cd to "build"
+    Then the following images should exist:
+      | filename                    | dimensions |
+      | images/original.10x10.jpg   | 10x5       |
+      | images/original.5x5.jpg     |  5x2       |
+      | images/original.20x20gt.jpg | 20x9       |
+      | images/original.15x15gt.jpg | 15x7       |
+    And the file "page-with-images-to-resize.html" should contain '<img src="images/original.10x10.jpg" class="image-resized-to10x10" alt="Original.10x10gt" />'
+    And the file "page-with-images-to-resize.html" should contain '<source srcset="images/original.20x20gt.jpg" media="(min-width: 900px)">'
+    And the file "page-with-images-to-resize.html" should contain '<img src="images/original.5x5.jpg" class="image-resized-to5x5" alt="Original.5x5" />'
+    And the file "page-with-images-to-resize.html" should contain '<source srcset="images/original.15x15gt.jpg" media="(min-width: 900px)">'

data/features/generate_new_data_file.feature

@@ -0,0 +1,21 @@
+Feature: Generate data file
+
+  Scenario: Check images
+    Given a fixture app "basic-app-data-file-generate"
+    And a successfully built app at "basic-app-data-file"
+    When I cd to "build"
+    Then the following images should exist:
+      | filename                    | dimensions |
+      | images/original.10x10gt.jpg | 10x5       |
+      | images/original.5x5.jpg     |  5x2       |
+
+  Scenario: Check generated data file content
+    Given a fixture app "basic-app-data-file-generate"
+    And a successfully built app at "basic-app-data-file-generate"
+    When I cd to "data"
+    Then a file named "simple_thumbnailer.yaml" should exist
+    And file "simple_thumbnailer.yaml" should contain the following data:
+      | path         | resize_to |
+      | original.jpg | 5x5       |
+      | original.jpg | 10x10>    |
+

data/features/given_data_file.feature

@@ -0,0 +1,30 @@
+Feature: Use data file
+
+  Scenario: Check images from data file
+    Given a fixture app "basic-app-data-file"
+    And a successfully built app at "basic-app-data-file"
+    When I cd to "build"
+    Then the following images should exist:
+      | filename                    | dimensions |
+      | images/original.10x10.jpg   | 10x5       |
+      | images/original.10x10gt.jpg | 10x5       |
+      | images/original.5x5.jpg     |  5x2       |
+
+  Scenario: Check data file content
+    Given a fixture app "basic-app-data-file"
+    And a successfully built app at "basic-app-data-file"
+    When I cd to "data"
+    Then a file named "simple_thumbnailer.yml" should exist
+    And file "simple_thumbnailer.yml" should contain the following data:
+      | path         | resize_to |
+      | original.jpg | 10x10     |
+      | *.jpg        | 5x5       |
+      | original.jpg | 10x10>    |
+
+  Scenario: Check sitemap file
+    Given a successfully built app at "basic-app-data-file"
+    When I cd to "build"
+    Then a file named "sitemap.html" should exist
+    And the file "sitemap.html" should contain '<li><a href="/images/original.10x10.jpg">/images/original.10x10.jpg</a></li>'
+    And the file "sitemap.html" should contain '<li><a href="/images/original.5x5.jpg">/images/original.5x5.jpg</a></li>'
+    And the file "sitemap.html" should not contain '<li><a href="/images/original.10x10gt.jpg">/images/original.10x10gt.jpg</a></li>'