Improve handling of ratios in ifHasAspectRatio

fboes · Oct 16, 2018 · 4fd7db6 · 4fd7db6
1 parent 2edafe9
commit 4fd7db6
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -9,7 +9,7 @@ A live example of this blog generator can be found at [3960! Journal](http://jou
 
 * The Blogophon generates static HTML files from [Markdown articles](docs/markdown.md). These HTML files can be synchronized to remote servers and are fully independent of the Blogophon generator.
 * It uses simple, fast and [hackable templating](docs/development.md) via Mustache. It also supports multiple themes.
-* Generates a bunch of way to find your articles: Regular index pages, tag pages, author pages.
+* Generates a bunch of ways to find your articles: Regular index pages, tag pages, author pages.
 * The Blogophon comes with a built-in image-scaler for responsive images.
 * The default theme puts all relevant meta stuff into `<head>` for SEO and social sharing (via schema.org and OpenGraph) as well as the [IndieWeb](https://indieweb.org/).
 * A ton of [special features](docs/special-features.md) like RSS/ATOM newsfeeds, Accelerated Mobile Pages (AMP), Progressive Web App (PWA), Facebook Instant Articles, sending Webmentions, etc.

diff --git a/docs/development.md b/docs/development.md
@@ -78,6 +78,14 @@ Last but not least have a look at [`lib/helpers/blogophon-handlebars-quoters.js`
 <!--  Test if first string matches against regular expression -->
 {{#ifMatches tag '[Nn]ew'}}It's new!{{/ifMatches}}
 
+{{#ifHasAspectRatio img.src 16 9}}
+  <img src="{{img.src}}" alt="" /><!-- has an aspect ratio of 16:9 -->
+{{/ifHasAspectRatio}}
+
+{{#ifHasMaxDimensions img.src 270 270}}
+  <img src="{{img.src}}" alt="" /><!-- is not bigger than 270×270 px -->
+{{/ifHasMaxDimensions}}
+
 <!-- Export template variables to Javascript (e.g. for Google Tag Manager) -->
 <script>{{{dataLayer post.meta}}}</script>
 ```

diff --git a/lib/helpers/blogophon-handlebars-quoters.js b/lib/helpers/blogophon-handlebars-quoters.js
@@ -152,24 +152,25 @@ const blogophonHandlebarsQuoters = {
 
   /**
    * Check if a given image URL has dimension included (e.g. `image-123x456.jpg`)
-   * and if its aspect ratio matches the given aspect ratio
+   * and if its aspect ratio matches the given aspect ratio.
+   * If no dimensions are found, this will return `true` as well. See `ifHasDimensions`.
    * @param  {String}  imageUrl [description]
    * @param  {Number}  width    [description]
    * @param  {Number}  height   [description]
    * @param  {Object}  options  [description]
    * @return {Boolean} If aspect ratio matches
    */
   ifHasAspectRatio: function(imageUrl, width, height, options) {
-    width  = Number(width);
-    height = Number(height);
-    const dimensions = blogophonHandlebarsQuoters._getDimensions(imageUrl);
-    const imageUrlRatio = dimensions.height ? (dimensions.width / dimensions.height) : 0;
-    return (imageUrlRatio === 0 || imageUrlRatio === (width / height)) ? options.fn(this) : options.inverse(this);
+    const dimensions    = blogophonHandlebarsQuoters._getDimensions(imageUrl);
+    const imageUrlRatio = blogophonHandlebarsQuoters._getRatio(dimensions.width, dimensions.height);
+    const givenRatio    = blogophonHandlebarsQuoters._getRatio(width, height);
+    return (imageUrlRatio === 0 || imageUrlRatio === givenRatio) ? options.fn(this) : options.inverse(this);
   },
 
   /**
    * Check if a given image URL has dimension included (e.g. `image-123x456.jpg`)
-   * and if its dimensions are bigger than the given ratios
+   * and if its dimensions are bigger than the given ratios.
+   * If no dimensions are found, this will return `true` as well. See `ifHasDimensions`.
    * @param  {String}  imageUrl [description]
    * @param  {Number}  width    [description]
    * @param  {Number}  height   [description]
@@ -188,7 +189,8 @@ const blogophonHandlebarsQuoters = {
 
   /**
    * Check if a given image URL has dimension included (e.g. `image-123x456.jpg`)
-   * and if its dimensions are smaller than the given ratios
+   * and if its dimensions are smaller than the given ratios.
+   * If no dimensions are found, this will return `true` as well. See `ifHasDimensions`.
    * @param  {String}  imageUrl [description]
    * @param  {Number}  width    [description]
    * @param  {Number}  height   [description]
@@ -205,6 +207,20 @@ const blogophonHandlebarsQuoters = {
     ;
   },
 
+  /**
+   * Check if a given image URL has dimension included (e.g. `image-123x456.jpg`)
+   * @param  {String}  imageUrl [description]
+   * @param  {Object}  options  [description]
+   * @return {Boolean} if it has dimensions
+   */
+  ifHasDimensions: function(imageUrl, options) {
+    const dimensions = blogophonHandlebarsQuoters._getDimensions(imageUrl);
+    return (dimensions.width && dimensions.height)
+      ? options.fn(this)
+      : options.inverse(this)
+    ;
+  },
+
   /**
    *
    * @param  {String} imageUrl [descriptuion]
@@ -216,6 +232,18 @@ const blogophonHandlebarsQuoters = {
       width:  dimensions ? Number(dimensions[1]) : 0,
       height: dimensions ? Number(dimensions[2]) : 0
     };
+  },
+
+  /**
+   * Return ratio of width/height
+   * @param  {Number}  width   [description]
+   * @param  {Number}  height  [description]
+   * @return {Number}  Ratio
+   */
+  _getRatio: function(width, height) {
+    width  = Number(width);
+    height = Number(height);
+    return height ? Math.round(100 * width / height) / 100 : 0;
   }
 };
 

diff --git a/test/blogophon-handlebars-quoters.js b/test/blogophon-handlebars-quoters.js
@@ -21,5 +21,17 @@ describe('Blogophon Handlebars Quoters', function() {
     assert.ok(tested);
     assert.strictEqual(tested.width,  0);
     assert.strictEqual(tested.height, 0);
+
+    tested = blogophonHandlebarsQuoter._getRatio(16, 9);
+    assert.strictEqual(tested,  1.78);
+
+    tested = blogophonHandlebarsQuoter._getRatio(1920, 1080);
+    assert.strictEqual(tested,  1.78);
+
+    tested = blogophonHandlebarsQuoter._getRatio(4, 3);
+    assert.strictEqual(tested,  1.33);
+
+    tested = blogophonHandlebarsQuoter._getRatio(640, 480);
+    assert.strictEqual(tested,  1.33);
   });
 });