diff --git a/assets/images/harley-davidson.jpg b/assets/images/harley-davidson.jpg new file mode 100644 index 0000000..287a53a Binary files /dev/null and b/assets/images/harley-davidson.jpg differ 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" >}} + +### 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" >}}