move dynamic-img example to rich content page

.gitignore

@@ -16,4 +16,4 @@ hugo.darwin
 hugo.linux
 
 # Temporary lock file while building
-/.hugo_build.lock
+.hugo_build.lock

exampleSite/content/blogs/rich-content.md

@@ -51,3 +51,25 @@ Hugo ships with several [Built-in Shortcodes](https://gohugo.io/content-manageme
 <br>
 {{< youtube w7Ft2ymGmfc >}}
 <br>
+
+## Theme Custom Shortcodes
+
+These shortcodes are not Hugo built-ins, but are provided by the theme.
+
+### Responsive Images with Cloudinary
+
+You can learn more about this [here](https://cloudinary.com/documentation/responsive_images).
+
+Set the `cloudinary_cloud_name` parameter in your site config to use this shortcode.
+
+```
+{{</* dynamic-img src="/my/image/on/cloudinary" title="A title for the image" */>}}
+```
+
+Note that you do not include the file extension (e.g. `.png`) in the `src` parameter, as the shortcode will automatically determine the best quality and format for the user's device.
+
+Optionally, you can customize the general CSS styles for the image:
+
+```
+{{</* dynamic-img src="/my/image/on/cloudinary.webp" title="A title for the image" style="max-width:60%" */>}}
+```

layouts/shortcodes/dynamic-img.html

@@ -1,12 +1,5 @@
-<!--
-    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="max-width:90%" >}}
--->
 {{ $image := .Get "src" }}
 {{ $alt := .Get "title" }}
 {{ $width := .Get "width" | default "w_auto" }}
 {{ $style := .Get "style" | default "max-width:80%" }}
-<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="padding-bottom: 16px; {{ $style }}">
+<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="padding-bottom: 16px; display: block; margin: auto; {{ $style }}">