feat: add optional response images with cloudinary

exampleSite/config.yaml

@@ -64,6 +64,11 @@ params:
   # Note the lack of "" in true, it should be of boolean type.
   useBootstrapCDN: false
 
+  # If you want to load dynamically responsive images from Cloudinary
+  # This requires your images to be uploaded + hosted on Cloudinary
+  # Uncomment and change YOUR_CLOUD_NAME to the Cloud Name in your Cloudinary console
+  # cloudinary_cloud_name: "YOUR_CLOUD_NAME"
+
   # Whether the fade animations on the home page will be enabled
   animate: true
 

layouts/partials/head.html

@@ -1,6 +1,7 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
+<meta http-equiv="Accept-CH" content="DPR, Viewport-Width, Width">
 <link rel="icon" href={{ .Site.Params.favicon | default "/fav.png" }} type="image/gif">
 
 <!-- Fonts -->

layouts/partials/scripts.html

@@ -65,4 +65,15 @@
 
 {{ if not (.Site.Params.navbar.disableSearch | default false) }}
     <script src="/js/search.js"></script>
-{{ end }}
+{{ end }}
+
+{{ if (.Site.Params.cloudinary_cloud_name | default false) }}
+
+{{ "<!-- cloudinary -->" | safeHTML }}
+<script src="https://unpkg.com/[email protected]/cloudinary-core-shrinkwrap.js" integrity="sha384-0bQduxVhZMs6xfvcPH9osdUIw44hjF8EahHuQBdyN6Rryk8tgyFO80Yz5d14F+5d" crossorigin="anonymous"></script>
+<script type="text/javascript">
+    var cl = cloudinary.Cloudinary.new({cloud_name: "{{- .Site.Params.cloudinary_cloud_name }}"}); 
+    cl.responsive();
+</script>
+
+{{ end }}

layouts/shortcodes/dynamic-img.html

@@ -0,0 +1,12 @@
+<!--
+    Use as follows:
+    {{< dynamic-img src="/my/image/on/cloudinary.webp" title="A title for the image" >}}
+
+    Optionally, you can customize the width or other general styles for the image:
+    {{< dynamic-img src="/my/image/on/cloudinary.webp" title="A title for the image" width="w_auto" style="width:90%" >}}
+-->
+{{ $image := .Get "src" }}
+{{ $alt := .Get "title" }}
+{{ $width := .Get "width" | default "w_auto" }}
+{{ $style := .Get "style" | default "width:90%" }}
+<img alt="{{ $alt }}" title="{{ $alt }}" data-src="https://res.cloudinary.com/{{ $.Site.Params.cloudinary_cloud_name }}/{{ $width }},c_scale,f_auto,q_auto,dpr_auto{{ $image}}" class="cld-responsive" style="{{ $style }}">