path: root/content
diff options
authorAustin Adams <git@austinjadams.com>2017-05-27 18:12:21 -0400
committerAustin Adams <git@austinjadams.com>2017-05-27 18:12:21 -0400
commit74973aa85da7e226a7719faf7f88aa03508d87bc (patch)
treef544a1fa9d3bb7fcb53892c78668758fcb6ea836 /content
parent71f8c3ddcfa7faf29cb58505af5195b4d3ac2bd8 (diff)
blog: Write images as figures, not raw ![images]
As far as I can tell, my CSS-fu ain't strong enough to prevent Markdown ![images], rendered as standalone <img>s, from stretching the page when they're wider than the viewport. So instead write images in blog posts as Hugo {{< figure >}}s, which wraps the <img>s in a <figure> element I can style with overflow-x: auto.
Diffstat (limited to 'content')
2 files changed, 2 insertions, 5 deletions
diff --git a/content/blog/defeating-dd-formmailer.md b/content/blog/defeating-dd-formmailer.md
index cdb9ed5..82ae887 100644
--- a/content/blog/defeating-dd-formmailer.md
+++ b/content/blog/defeating-dd-formmailer.md
@@ -10,7 +10,7 @@ Yesterday, I visited a website that uses [dd-formmailer][1], a Wordpress
plugin that provides a form for sending an email, complete with a
CAPTCHA intended to prevent automated abuse. Here's a screenshot:
-![A screenshot of the dd-formmailer form][i1]
+{{< figure src="/img/blog/defeating-dd-formmailer/1.png" title="A screenshot of the dd-formmailer form" >}}
I was bored and curious, so I looked at the CAPTCHA image and noticed it
was always served from the same path:
@@ -111,4 +111,3 @@ Avoid Wordpress plugins last updated in 2009.
[1]: http://www.dagondesign.com/articles/secure-form-mailer-plugin-for-wordpress/
[2]: http://www.dagondesign.com/articles/secure-php-form-mailer-script/#download
-[i1]: /img/blog/defeating-dd-formmailer/1.png
diff --git a/content/blog/including-recent-commits-hugo.md b/content/blog/including-recent-commits-hugo.md
index 8712d13..ee9cdbe 100644
--- a/content/blog/including-recent-commits-hugo.md
+++ b/content/blog/including-recent-commits-hugo.md
@@ -49,7 +49,7 @@ The following diagram shows a real example [from the repository where
this blog is stored][6]. Notice the commit [cf7a0d083c][7] has two
-![Diagram of my webzone repository][i1]
+{{< figure src="/img/blog/including-recent-commits-hugo/commit-diagram.svg" alt="Diagram of my webzone repository" >}}
My first idea for traversal was brute force; that is, looking at every
dang commit in the repository and then sorting them by date. However,
@@ -155,5 +155,3 @@ repositories that I wanted to update my homepage upon receving a push.
[8]: https://gohugo.io/
[9]: https://en.wikipedia.org/wiki/Breadth-first_search
[10]: {{< ref "blog/using-git-to-deploy-a-hugo-blog-atomically.md" >}}
-[i1]: /img/blog/including-recent-commits-hugo/commit-diagram.svg