https://jakeworth.com/tags/hugo/Recent content in Hugo on Jake Worthhttps://jakeworth.com/twittercard.pnghttps://jakeworth.com/twittercard.pngHugoen-usThu, 02 Jul 2026 15:22:48 -0400https://jakeworth.com/tils/resized-images-in-hugo-markdown/Thu, 02 Jul 2026 15:22:48 -0400https://jakeworth.com/tils/resized-images-in-hugo-markdown/<p>Images in Hugo can be a bit tricky. Here&rsquo;s how I&rsquo;ve added images on my projects page that are resized, linked, and have alts: the <code>figure</code> shortcode.</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-go-html-template" data-lang="go-html-template"><span style="display:flex;"><span><span style="color:#75715e">{{</span><span style="color:#960050;background-color:#1e0010">&lt;</span> <span style="color:#a6e22e">figure</span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;/images/yiap.png&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">alt</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;Yes, It&#39;s a Problem&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">link</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;https://github.com/jwworth/yes-its-a-problem&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">width</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;600&#34;</span> </span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">&gt;</span><span style="color:#75715e">}}</span> </span></span></code></pre></div>