ux: update for bootstrap figure classes

3 files changed, 62 insertions, 2 deletions

diff --git a/assets/images/harley-davidson.jpg b/assets/images/harley-davidson.jpg
new file mode 100644
index 0000000..287a53a
--- /dev/null
+++ b/assets/images/harley-davidson.jpg
diff --git a/assets/scss/components/_images.scss b/assets/scss/components/_images.scss
index 254eefa..efe3d1c 100644
--- a/assets/scss/components/_images.scss
+++ b/assets/scss/components/_images.scss
@@ -1,5 +1,19 @@
 figure {
-  margin: 2rem 0;
+  margin: 0 0 1rem;
+  display: inline-block;
+}
+
+figure img {
+  margin-bottom: 0.5rem;
+  line-height: 1;
+  max-width: 100%;
+  height: auto;
+}
+
+figure figcaption {
+  margin: 0.25rem 0 0.75rem;
+  font-size: 0.875em;
+  color: #6c757d;
 }
 
 .figure-caption {
diff --git a/content/en/blog/say-hello-to-doks/index.md b/content/en/blog/say-hello-to-doks/index.md
index 2c626ec..cccc351 100644
--- a/content/en/blog/say-hello-to-doks/index.md
+++ b/content/en/blog/say-hello-to-doks/index.md
@@ -10,6 +10,52 @@ images: ["say-hello-to-doks.png"]
 contributors: ["Henk Verlinde"]
 ---
 
-![Image](security-as-code-startup-jit-comes-out-of-stealth-with-38-5m-in-seed-funding.jpg)
+## Remote gif
+
+```md
+![Happy Dance by Neil Sanders](https://i.giphy.com/media/hIip12KtxrNU5GG0Ii/giphy.gif?cid=790b7611e72a6d08626c8c4ff1410056fbc51e0ed1f2daab&rid=giphy.gif&ct=s)
+```
+
+![Happy Dance by Neil Sanders](https://i.giphy.com/media/hIip12KtxrNU5GG0Ii/giphy.gif?cid=790b7611e72a6d08626c8c4ff1410056fbc51e0ed1f2daab&rid=giphy.gif&ct=s)
+
+## Image in page bundle
+
+```bash
+![Image](security-as-code-startup-jit-comes-out-of-stealth-with-38-5m-in-seed-funding.jpg "Optional title")
+```
+
+![Image](security-as-code-startup-jit-comes-out-of-stealth-with-38-5m-in-seed-funding.jpg "Optional title")
+
+## Screenshot in page bundle
+
+```bash
+![Screenshot](image003.png)
+```
 
 ![Screenshot](image003.png)
+
+## Image in assets directory
+
+```bash
+![Image](images/harley-davidson.jpg)
+```
+
+![Image](images/harley-davidson.jpg)
+
+## Shortcode
+
+### Image in page bundle
+
+```md
+{{</* figure src="security-as-code-startup-jit-comes-out-of-stealth-with-38-5m-in-seed-funding.jpg" alt="Describe your image" caption="For a figure caption can be different than alt text" */>}}
+```
+
+{{< figure src="security-as-code-startup-jit-comes-out-of-stealth-with-38-5m-in-seed-funding.jpg" alt="Describe your image" caption="For a figure caption can be different than alt text" >}}
+
+### Image in assets directory
+
+```md
+{{</* figure src="images/harley-davidson.jpg" alt="Harley Davidson" caption="For a figure caption can be different than alt text" */>}}
+```
+
+{{< figure src="images/harley-davidson.jpg" alt="Harley Davidson" caption="For a figure caption can be different than alt text" >}}