feat: add render hook, shortcodes, and partials

README.md

@@ -18,67 +18,38 @@ Add mounts to `./config/_default/module.toml`:
 
 ```toml
 [[mounts]]
-  source = "node_modules/@hyas/images/assets"
+  source = "assets"
   target = "assets"
-  excludeFiles = "/scss/**.scss"
-
-[[mounts]]
-  source = "node_modules/@hyas/images/layouts"
-  target = "layouts"
 
 [[mounts]]
-  source = "assets"
+  source = "node_modules/@hyas/images/assets"
   target = "assets"
 
 [[mounts]]
   source = "layouts"
   target = "layouts"
+
+[[mounts]]
+  source = "node_modules/@hyas/images/layouts"
+  target = "layouts"
 ```
 
-Set the `image` parameters in `./config/_default/params.yml`:
+Set parameters in `./config/_default/params.toml`:
 
 ```bash
-image:
-  ## General
-  type: page # page (default) or global
-  widths: [480, 640, 768, 1024, 1366] # [600, 900, 1300] (default)
-  densities: [1,2] # [1,2] (default)
-  formats: [original, webp] # [original, webp] (default)
-  provider: null # null (default) or netlify
-  loading: lazysizes # auto (default), lazy, or lazysizes
-  class: "img-fluid blur-up" # img-fluid (default)
-  output: picture # picture (default), figure, or img
-  noscript: false # false (default) or true
-
-  ## Placeholder
-  placeholder: lqip # null (default), lqip, dominant, or [black, [gray-100..gray-900], white]
-  lqip_div_factor: 5 # 5 (default)
-  lqip_blur_amount: 5 # 5 (default)
-  gif_div_factor: 10 # 10 (default)
-
-  ## Figure
-  target: "_blank" # _blank (default)
-  rel: "noopener, noreferrer" # noopener, noreferrer (default)
-  figure_class: "figure" # figure (default)
-  figure_image_class: "figure-img img-fluid blur-up" # "figure-img img-fluid" (default)
-  figcaption_class: figure-caption # figure-caption (default)
-  figcaption_title_h: 4 # 4 (default)
-  attr_link_target: "_blank" # _blank (default)
-  attr_link_rel: "noopener, noreferrer" # noopener, noreferrer (default)
-
-  ## Render hook
-  render_hook: true # false (default) or true
-  render_hook_wrapper_class: img-wrapper # img-wrapper (default)
-
-  ## Shortcode
-  shortcode_wrapper_class: img-wrapper # img-wrapper (default)
-
-  ## Debugging
-  suppress_width_warning: false # false (default) or true
-  debug: false # false (default) or true
+## Hyas images
+[hyas.images]
+  [hyas.images.landscape]
+    normalize = "1360x765" # "1600x900" (default)
+    lqip = "16x9" # "16x9" (default)
+    widths = [480, 640, 800, 1024]
+  [hyas.images.portrait]
+    normalize = "765x1360" # "900x1600" (default)
+    lqip = "9x16" # "9x16" (default)
+    widths = [480, 640, 800, 1024]
 ```
 
-Add to `./assets/scss/components/_images.scss`:
+Add CSS class selectors to `./assets/scss/components/_images.scss`:
 
 ```scss
 img[data-sizes="auto"] {
@@ -100,15 +71,28 @@ img[data-sizes="auto"] {
 }
 ```
 
+Add CSS class selectors to `safelist` in `./config/postcss.config.js`:
+
+```js
+..
+      safelist: [
+        'img-fluid',
+        'lazyload',
+        'blur-up',
+      ],
+..
+```
+
 ## How to use
 
 See the Hyas documentation:
 
-- [Images](https://docs.gethyas.com/guides/integrations-guide/images/)
+- [Images](https://images.gethyas.com/)
+
 
 ## Credits
 
-This npm package is based on the Hugo modules:
+This npm package is based on:
 
-- [future-wd/hugo-responsive-images](https://github.com/future-wd/hugo-responsive-images)
-- [future-wd/hugo-imaging-common](https://github.com/future-wd/hugo-imaging-common)
+- [Image render hook](https://www.veriphor.com/articles/link-and-image-render-hooks/#image-render-hook)
+- [Images with overlays](https://www.veriphor.com/articles/images-with-overlays/)

config/_default/module.toml

@@ -1,16 +1,15 @@
 [[mounts]]
-  source = "node_modules/@hyas/images/assets"
+  source = "assets"
   target = "assets"
-  excludeFiles = "/scss/**.scss"
-
-[[mounts]]
-  source = "node_modules/@hyas/images/layouts"
-  target = "layouts"
 
 [[mounts]]
-  source = "assets"
+  source = "node_modules/@hyas/images/assets"
   target = "assets"
 
 [[mounts]]
   source = "layouts"
   target = "layouts"
+
+[[mounts]]
+  source = "node_modules/@hyas/images/layouts"
+  target = "layouts"

config/_default/params.toml

@@ -0,0 +1,18 @@
+## Debug
+[render_hooks.image]
+errorLevel = 'ignore' # ignore (default), warning, or error (fails the build)
+
+[render_hooks.link]
+errorLevel = 'ignore' # ignore (default), warning, or error (fails the build)
+highlightBroken = false # true or false (default)
+
+## Hyas images
+[hyas.images]
+  [hyas.images.landscape]
+    normalize = "1360x765" # "1600x900" (default)
+    lqip = "16x9" # "16x9" (default)
+    widths = [480, 640, 800, 1024]
+  [hyas.images.portrait]
+    normalize = "765x1360" # "900x1600" (default)
+    lqip = "9x16" # "9x16" (default)
+    widths = [480, 640, 800, 1024]