CINXE.COM

<!doctype html><html class="h-full antialiased scheme-light dark:scheme-dark" lang=en-US><head><meta charset=utf-8><title>Image render hooks</title><style>[x-cloak]{display:none!important}</style><meta name=description content="Create an image render to hook override the rendering of Markdown images to HTML."><script src=/js/head-early.dff29c12424edc8a76de306af0d3e8a80c17b90834272ee2f14c7c468b05299c.js integrity="sha256-3/KcEkJO3Ip23jBq8NPoqAwXuQg0Jy7i8Ux8RosFKZw=" crossorigin=anonymous async></script><script src=/js/main.224df0ca02632e7874f616d5d1968a577c539c056bf1c00ed45d52ffeaef773d.js integrity="sha256-Ik3wygJjLnh09hbV0ZaKV3xTnAVr8cAO1F1S/+rvdz0=" crossorigin=anonymous defer></script><script src=/js/turbo.1259bc642535deeb95ecb5b342ecbfa1b91f1034073a938696d04d06d823da25.js integrity="sha256-Elm8ZCU13uuV7LWzQuy/obkfEDQHOpOGltBNBtgj2iU=" crossorigin=anonymous defer></script> <link rel="stylesheet" href="/css/styles.min.4b0d0093c423ef3e5db296e369887569338fc709a2c8df5e1a70924c885c1a50.css" integrity="sha256-Sw0Ak8Qj7z5dspbjaYh1aTOPxwmiyN9eGnCSTIhcGlA=" crossorigin="anonymous" > <meta name=viewport content="width=device-width,initial-scale=1,viewport-fit=cover"><meta name=generator content="Hugo 0.144.1"><meta name=robots content="index, follow"><title>Image render hooks | Hugo </title><link rel=apple-touch-icon sizes=180x180 href=/apple-touch-icon.png><link rel=icon type=image/png href=/favicon-32x32.png sizes=32x32><link rel=icon type=image/png href=/favicon-16x16.png sizes=16x16><link rel=manifest href=/manifest.json><link rel=mask-icon href=/safari-pinned-tab.svg color=#0594cb><meta name=turbo-prefetch content="true"><meta name=view-transition content="same-origin"><meta name=description content=" Create an image render to hook override the rendering of Markdown images to HTML. "><meta property="og:title" content="Image render hooks"><meta property="og:description" content=" Create an image render to hook override the rendering of Markdown images to HTML. "><meta property="og:type" content=" article "><meta property="og:url" content="https://gohugo.io/render-hooks/images/"><meta property="og:image" content="https://gohugo.io/opengraph/gohugoio-card-base-1_hu_7cf4cb9babb791ad.png"><meta property="article:section" content="render-hooks"><meta property="article:modified_time" content="2025-02-17T00:38:33-08:00"><meta itemprop=name content="Image render hooks"><meta itemprop=description content="Create an image render to hook override the rendering of Markdown images to HTML."><meta itemprop=dateModified content="2025-02-17T00:38:33-08:00"><meta itemprop=wordCount content="862"><meta itemprop=keywords content="Render Hooks"><meta name=twitter:card content="summary"><meta name=twitter:title content="Image render hooks"><meta name=twitter:description content="Create an image render to hook override the rendering of Markdown images to HTML."><script async src="https://www.googletagmanager.com/gtag/js?id=G-MBZGKNMDWC"></script><script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-MBZGKNMDWC",{anonymize_ip:!0,dimension1:"gohugo.io",dimension2:"master"});var trackOutboundLink=function(e){gtag("event","click",{event_category:"outbound",event_label:e,transport_type:"beacon"})}</script></head><body class="flex flex-col min-h-full bg-white dark:bg-blue-950 kind-page"><script src=/js/body-start.02e9d5b15cc0520d2638a5c7a692c75065c6bdb802535ef6c14f412a52b715e1.js integrity="sha256-AunVsVzAUg0mOKXHppLHUGXGvbgCU172wU9BKlK3FeE=" crossorigin=anonymous></script><header x-data=navbar class="print:hidden sticky top-0 z-50 bg-blue-950 flex flex-none flex-wrap items-center justify-between px-4 py-5 shadow-md shadow-slate-900/5 transition duration-500 sm:px-6 lg:px-8 dark:shadow-none" :class="$store.nav.scroll.atTop ? '': 'bg-blue-950/80'"><div class="relative flex basis-0 items-center mr-2 lg:mr-8"><a class="text-white text-xl font-bold upper" href=/ aria-label="The world’s fastest framework for building websites">HUGO</a></div><div class="relative flex flex-grow basis-0 items-center min-w-24 max-w-3xl overflow-x-auto"><a href=/news/ class="font-semibold text-gray-300 hover:text-gray-400 ml-4">News</a> <a href=/documentation/ class="font-semibold text-gray-300 hover:text-gray-400 ml-4">Docs</a> <a href=https://themes.gohugo.io/ class="font-semibold text-gray-300 hover:text-gray-400 ml-4">Themes</a> <a href=https://discourse.gohugo.io/ class="font-semibold text-gray-300 hover:text-gray-400 ml-4">Community</a> <a href=https://github.com/gohugoio/hugo class="font-semibold text-gray-300 hover:text-gray-400 ml-4">GitHub</a></div><div class="-my-5 pl-2 grow-0"><div x-data=search class="flex w-full"><button type=button aria-label=Search class="text-gray-300 grid cursor-pointer w-full lg:w-56 grid-cols-[auto_1fr_auto] items-center rounded-md px-2 sm:px-4 py-2 text-left text-xs/6 lg:text-sm/6 outline-0 sm:outline-1 -outline-offset-1 outline-gray-600"> <svg class="fill-slate-400 dark:fill-slate-500 pointer-events-none -ml-0.5 mr-2 size-5 sm:size-4"><use href="#icon--search"/></svg> <span class="hidden lg:inline">Search docs</span> <span class="hidden lg:inline">/</span></button><div class="fixed inset-0 overflow-hidden z-20" :class="{'fixed': open}" aria-label="Search docs" role=dialog aria-modal=true @keydown.right=$focus.next() @keydown.left=$focus.previous() @keydown.esc="open=false" x-cloak><div class="absolute inset-0 overflow-hidden z-20" x-show=open><div class="absolute inset-0" aria-hidden=true></div><div class="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10" @click.outside="open = false"><div class="pointer-events-auto w-screen max-w-md" x-show=open x-transition:enter="transform transition ease-in-out duration-300 sm:duration-500" x-transition:enter-start=translate-x-full x-transition:enter-end=translate-x-0 x-transition:leave="transform transition ease-in-out duration-300 sm:duration-500" x-transition:leave-start=translate-x-0 x-transition:leave-end=translate-x-full><div class="flex h-full flex-col overflow-y-scroll dark:bg-blue-950/96 bg-white py-6 shadow-sm dark:shadow-gray-800"><div class="px-4 sm:px-6"><div class="flex items-start justify-between"><input x-model.debounce.100ms=query @click=search() type=search arial-label=Search class="text-gray-800 dark:text-gray-100 bg-white/40 dark:bg-gray-900 shadow rounded border-0 p-3 w-full" placeholder="Search docs" x-ref=input></div></div><div class="relative mt-6 flex-1 px-4 sm:px-6"><ul role=list class="divide-y divide-gray-200 dark:divide-gray-900"><template x-for="[group, entries] in Object.entries(result)" :key=group><li class=py-4><div class="mb-1 dark:text-gray-300 font-semibold uppercase tracking-widest text-sm" x-text=group></div><template x-for="entry in entries" :key=entry.objectID><a class="flex flex-nowrap space-x-4 py-2 text-sm leading-5 text-gray-900 dark:text-gray-500 hover:dark:text-gray-800 hover:bg-gray-50 dark:hover:bg-gray-500 focus:outline-none focus:bg-gray-50 dark:focus:bg-gray-800 cursor-pointer transition duration-150 ease-in-out" :href=entry.url><span class="w-1/3 text-xs text-right text-gray-500 dark:text-gray-300" x-text=entry.hierarchy.lvl1></span><div class=w-2/3><h3 class="text-md font-bold" x-html=entry.getHeadingHTML()></h3><template x-if="entry._snippetResult && entry._snippetResult.content"><div class="two-lines-ellipsis mt-1"><span>…</span> <span x-html=entry._snippetResult.content.value></span><span>…</span></div></template></div></a></template></li></template></ul></div></div></div></div></div></div></div></div><div class="relative ml-0 md:ml-8 flex basis-0 justify-end gap-0 sm:gap-1 xl:grow-1"><div class="hidden lg:block cursor-pointer outline-2 hover:outline-3 outline-blue-500 w-10 h-10"><div x-data="{open: false}"><div @click="open = true"><img src=/images/qr/qr_dccf95a4a162728d.png width=148 height=148 @load="$event.target.classList.remove('_opacity-0')" alt="QR code linking to https://gohugo.io/render-hooks/images/" class="w-10 bg-white view-transition-qr"></div><div x-cloak x-show=open x-transition:enter.opacity.duration.200ms x-transition:leave.opacity.duration.300ms x-trap.inert.noscroll=open @keydown.esc.window="open = false" @click.self="open = false" class="fixed inset-0 z-30 flex items-end justify-center bg-black/50 pb-8 backdrop-blur-xs sm:items-center" role=dialog aria-modal=true aria-label=Modal><div x-show=open x-transition:enter.opacity.scale.60.origin.top.right.duration.300ms.delay.200ms class="flex content-center items-center justify-center max-w-lg flex-col overflow-hidden bg-white dark:bg-blue-950 border-2 border-gray-300 dark:border-gray-800 shadow-lg sm:shadow-xl"><div class="border-b border-outline border-gray-300 dark:border-gray-800 p-2 lg:p-4"><h3 class="text-sm font-semibold">QR code linking to https://gohugo.io/render-hooks/images/</h3></div><img src=/images/qr/qr_dccf95a4a162728d.png width=148 height=148 @load="$event.target.classList.remove('_opacity-0')" alt="QR code linking to https://gohugo.io/render-hooks/images/" class="w-64 p-4"></div></div></div></div><div class="ml-2 sm:ml-6 flex items-center" x-data><button @click=$store.nav.userSettings.toggleColorScheme() aria-label="Toggle color scheme" id=theme-toggle type=button class="inline-flex cursor-pointer items-center p-2 bg-orange-600 hover:bg-orange-700 dark:bg-gray-600 dark:hover:bg-gray-700 border border-transparent rounded-full shadow-sm text-white hover:text-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-500"><svg aria-hidden="true" class="w-3 h-3 sm:w-5 sm:h-5" fill="none" stroke="currentcolor" viewBox="0 0 24 24"><path x-show="$store.nav.userSettings.colorScheme() == 1" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3A9 9 0 113 12a9 9 0 0118 0z"/><path x-show="$store.nav.userSettings.colorScheme() == 2" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364-.707-.707M6.343 6.343l-.707-.707m12.728.0-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/><path x-show="$store.nav.userSettings.colorScheme() == 3" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003.0 0012 21a9.003 9.003.0 008.354-5.646z"/></svg></button></div><div class="hidden sm:block ml-2 sm:ml-6 h-6 fill-slate-400 group-hover:fill-slate-500 dark:group-hover:fill-slate-300"><a href=https://github.com/gohugoio/hugo target=_blank class="font-normal font-mono tracking-tighter flex items-center bg-gray-100 hover:bg-gray-200 dark:bg-gray-600 dark:hover:bg-gray-700 text-sm text-black dark:text-white h-10 border-none cursor-pointer relative py-1 px-2 rounded-md" aria-label="Star on GitHub"><svg class="mr-[4px] fill-gray-800 dark:fill-gray-100 w-6 h-6"><use href="#icon--github"/></svg> <span class="hidden md:inline mr-[3px]">Star</span> <span class="hidden md:inline">78096</span> <span class="inline md:hidden">78.1k</span></a></div></div></header><div class="flex w-full xl:w-6xl h-full flex-auto mx-auto"><main class="flex-1 mx-auto lg:mx-0 w-full max-w-3x lg:max-w-3x pt-8 lg:pt-14 pb-20 px-main"><article class="max-w-5xl lg:max-w-3xl" id=article><header><nav aria-label=breadcrumb class="flex breadcrumbs"><ol class="inline-flex items-center flex-wrap tracking-tight"><li class="flex items-center"><a href=/documentation/ class="truncate text-blue-600 hover:text-blue-500 dark:text-blue-500 dark:hover:text-blue-400">Docs</a><svg class="fill-gray-500 dark:fill-gray-100 w-3 h-3 mx-2"><use href="#icon--chevron-right"/></svg></li><li class="flex items-center"><a href=/render-hooks/ class="truncate text-blue-600 hover:text-blue-500 dark:text-blue-500 dark:hover:text-blue-400 current-section">Render hooks</a><svg class="fill-gray-500 dark:fill-gray-100 w-3 h-3 mx-2"><use href="#icon--chevron-right"/></svg></li><li class="truncate text-gray-700 dark:text-gray-300">Images</li></ol></nav><h1 class="font-display mt-6 sm:mt-8 text-3xl tracking-tight text-slate-900 dark:text-white">Image render hooks</h1></header><div class=content><div class=lead>Create an image render to hook override the rendering of Markdown images to HTML.</div><div class="mb-4 sm:mb-6 flex flex-wrap gap-2"><a href=/categories/render-hooks/ class="bg-green-800 text-green-100 border border-green-700 text-xs h-auto tracking-widest uppercase font-light not-prose no-underline inline-block py-1 px-3 rounded-xl shadow-xs hover:opacity-80 hover:shadow-none">Render Hooks</a></div><h2 id=markdown>Markdown</h2><p>A Markdown image has three components: the image description, the image destination, and optionally the image title.</p><div class="highlight not-prose"><pre tabindex=0 class=chroma><code class=language-text data-lang=text><span class=line><span class=cl>![white kitten](/images/kitten.jpg "A kitten!") </span></span><span class=line><span class=cl> ------------ ------------------ --------- </span></span><span class=line><span class=cl> description destination title </span></span></code></pre></div><p>These components are passed into the render hook <a aria-label=context href=/quick-reference/glossary/#context>context</a> as shown below.</p><h2 id=context>Context</h2><p>Image render hook templates receive the following context:</p><h6 id=attributes>Attributes</h6><p>(<code>map</code>) The <a aria-label="Markdown attributes" href=/content-management/markdown-attributes/>Markdown attributes</a>, available if you configure your site as follows:</p><div x-data class="shortcode-code not-prose relative p-0 mt-2 mb-4 sm:mb-8"><svg class="absolute right-7 top-0 z-30 text-blue-600 hover:text-blue-500 cursor-pointer w-8" @click="$copy($refs[$store.nav.userSettings.settings.configFileType])"><use href="#icon--copy"/></svg><nav class="relative flex" aria-label=Tabs><div class="flex-none text-sm px-2 content-center border-b-1 border-gray-300 dark:border-gray-700" aria-label=Filename>hugo.</div><button x-on:click="$store.nav.userSettings.settings.configFileType = 'yaml'" aria-label="Toggle yaml" class="px-3 py-2 font-semibold text-black dark:text-slate-200 border-l-1 border-t-1 border-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 dark:border-gray-700 cursor-pointer relative min-w-0 flex-1 overflow-hidden text-sm no-underline text-center focus:z-10 overflow-x-auto" :class="$store.nav.userSettings.settings.configFileType === 'yaml' ? 'border-b-0 bg-light dark:bg-dark' : 'border-b-1'"> <span>yaml </span></button> <button x-on:click="$store.nav.userSettings.settings.configFileType = 'toml'" aria-label="Toggle toml" class="px-3 py-2 font-semibold text-black dark:text-slate-200 border-l-1 border-t-1 border-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 dark:border-gray-700 cursor-pointer relative min-w-0 flex-1 overflow-hidden text-sm no-underline text-center focus:z-10 overflow-x-auto" :class="$store.nav.userSettings.settings.configFileType === 'toml' ? 'border-b-0 bg-light dark:bg-dark' : 'border-b-1'"> <span>toml </span></button> <button x-on:click="$store.nav.userSettings.settings.configFileType = 'json'" aria-label="Toggle json" class="px-3 py-2 font-semibold text-black dark:text-slate-200 border-l-1 border-t-1 border-r-1 border-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 dark:border-gray-700 cursor-pointer relative min-w-0 flex-1 overflow-hidden text-sm no-underline text-center focus:z-10 overflow-x-auto" :class="$store.nav.userSettings.settings.configFileType === 'json' ? 'border-b-0 bg-light dark:bg-dark' : 'border-b-1'"> <span>json</span></button></nav><div class="max-h-96 overflow-y-auto border-l-1 border-b-1 border-r-1 border-gray-300 dark:border-gray-700" x-ref=yaml x-cloak x-transition:enter.opacity.duration.300ms x-show="$store.nav.userSettings.settings.configFileType === 'yaml'"><div class="highlight not-prose"><pre tabindex=0 class=chroma><code class=language-yaml data-lang=yaml><span class=line><span class=cl><span class=nt>markup</span><span class=p>:</span><span class=w> </span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>goldmark</span><span class=p>:</span><span class=w> </span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>parser</span><span class=p>:</span><span class=w> </span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>attribute</span><span class=p>:</span><span class=w> </span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>block</span><span class=p>:</span><span class=w> </span><span class=kc>true</span><span class=w> </span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>wrapStandAloneImageWithinParagraph</span><span class=p>:</span><span class=w> </span><span class=kc>false</span><span class=w> </span></span></span></code></pre></div></div><div class="max-h-96 overflow-y-auto border-l-1 border-b-1 border-r-1 border-gray-300 dark:border-gray-700" x-ref=toml x-cloak x-transition:enter.opacity.duration.300ms x-show="$store.nav.userSettings.settings.configFileType === 'toml'"><div class="highlight not-prose"><pre tabindex=0 class=chroma><code class=language-toml data-lang=toml><span class=line><span class=cl><span class=p>[</span><span class=nx>markup</span><span class=p>]</span> </span></span><span class=line><span class=cl> <span class=p>[</span><span class=nx>markup</span><span class=p>.</span><span class=nx>goldmark</span><span class=p>]</span> </span></span><span class=line><span class=cl> <span class=p>[</span><span class=nx>markup</span><span class=p>.</span><span class=nx>goldmark</span><span class=p>.</span><span class=nx>parser</span><span class=p>]</span> </span></span><span class=line><span class=cl> <span class=nx>wrapStandAloneImageWithinParagraph</span> <span class=p>=</span> <span class=kc>false</span> </span></span><span class=line><span class=cl> <span class=p>[</span><span class=nx>markup</span><span class=p>.</span><span class=nx>goldmark</span><span class=p>.</span><span class=nx>parser</span><span class=p>.</span><span class=nx>attribute</span><span class=p>]</span> </span></span><span class=line><span class=cl> <span class=nx>block</span> <span class=p>=</span> <span class=kc>true</span> </span></span></code></pre></div></div><div class="max-h-96 overflow-y-auto border-l-1 border-b-1 border-r-1 border-gray-300 dark:border-gray-700" x-ref=json x-cloak x-transition:enter.opacity.duration.300ms x-show="$store.nav.userSettings.settings.configFileType === 'json'"><div class="highlight not-prose"><pre tabindex=0 class=chroma><code class=language-json data-lang=json><span class=line><span class=cl><span class=p>{</span> </span></span><span class=line><span class=cl> <span class=nt>"markup"</span><span class=p>:</span> <span class=p>{</span> </span></span><span class=line><span class=cl> <span class=nt>"goldmark"</span><span class=p>:</span> <span class=p>{</span> </span></span><span class=line><span class=cl> <span class=nt>"parser"</span><span class=p>:</span> <span class=p>{</span> </span></span><span class=line><span class=cl> <span class=nt>"attribute"</span><span class=p>:</span> <span class=p>{</span> </span></span><span class=line><span class=cl> <span class=nt>"block"</span><span class=p>:</span> <span class=kc>true</span> </span></span><span class=line><span class=cl> <span class=p>},</span> </span></span><span class=line><span class=cl> <span class=nt>"wrapStandAloneImageWithinParagraph"</span><span class=p>:</span> <span class=kc>false</span> </span></span><span class=line><span class=cl> <span class=p>}</span> </span></span><span class=line><span class=cl> <span class=p>}</span> </span></span><span class=line><span class=cl> <span class=p>}</span> </span></span><span class=line><span class=cl><span class=p>}</span> </span></span></code></pre></div></div></div><h6 id=destination>Destination</h6><p>(<code>string</code>) The image destination.</p><h6 id=isblock>IsBlock</h6><p>(<code>bool</code>) Returns true if a standalone image is not wrapped within a paragraph element.</p><h6 id=ordinal>Ordinal</h6><p>(<code>int</code>) The zero-based ordinal of the image on the page.</p><h6 id=page>Page</h6><p>(<code>page</code>) A reference to the current page.</p><h6 id=pageinner>PageInner</h6><span class="not-prose inline-flex items-center px-2 mr-1 rounded text-sm font-medium bg-green-200 dark:bg-green-400 fill-green-600"><svg class="mr-1.5 h-2 w-2" viewBox="0 0 8 8"><circle cx="4" cy="4" r="3"/></svg> <a class="text-green-800 dark:text-black hover:text-green-600 no-underline" href=https://github.com/gohugoio/hugo/releases/tag/v0.125.0 target=_blank>New in v0.125.0</a></span><p>(<code>page</code>) A reference to a page nested via the <a aria-label=RenderShortcodes href=/methods/page/rendershortcodes/><code>RenderShortcodes</code></a> method. <a aria-label="See details" href=/render-hooks/images/#pageinner-details>See details</a>.</p><h6 id=plaintext>PlainText</h6><p>(<code>string</code>) The image description as plain text.</p><h6 id=text>Text</h6><p>(<code>template.HTML</code>) The image description.</p><h6 id=title>Title</h6><p>(<code>string</code>) The image title.</p><h2 id=examples>Examples</h2><div class="border-l-4 overflow-x-auto border-blue-400 bg-blue-50 dark:bg-blue-950 border-1 border-blue-100 dark:border-blue-900 p-4 mt-6 mb-8"><div class=flex><div class=shrink-0><svg class="fill-blue-500 dark:fill-blue-400 h-7 w-7"><use href="#icon--exclamation"/></svg></div><div class=ml-3><div class=mt-2><p>With inline elements such as images and links, remove leading and trailing whitespace using the <code>{{‑ ‑}}</code> delimiter notation to prevent whitespace between adjacent inline elements and text.</p></div></div></div></div><p>In its default configuration, Hugo renders Markdown images according to the <a aria-label="CommonMark specification" href=https://spec.commonmark.org/current/ rel=external>CommonMark specification</a>. To create a render hook that does the same thing:</p><div x-data class="shortcode-code font-mono not-prose relative mt-6 mb-8 border-1 border-gray-200 dark:border-gray-800 bg-light dark:bg-dark"><svg class="absolute right-7 top-2 z-30 text-blue-600 hover:text-blue-500 cursor-pointer w-6 h-6" @click="$copy($refs.code)"><use href="#icon--copy"/></svg><div class="san-serif text-sm inline-block leading-none pl-2 py-3 bg-gray-300 dark:bg-slate-700 dark: w-full select-none">layouts/_default/_markup/render-image.html</div><div x-ref=code><div class="highlight not-prose"><pre tabindex=0 class=chroma><code class=language-go-html-template data-lang=go-html-template><span class=line><span class=cl><span class=p><</span><span class=nt>img</span> <span class=na>src</span><span class=o>=</span><span class=s>"</span><span class=cp>{{</span><span class=w> </span><span class=na>.Destination</span><span class=w> </span><span class=o>|</span><span class=w> </span><span class=nx>safeURL</span><span class=w> </span><span class=cp>}}</span><span class=s>"</span> </span></span><span class=line><span class=cl> <span class=cp>{{-</span><span class=w> </span><span class=k>with</span><span class=w> </span><span class=na>.PlainText</span><span class=w> </span><span class=cp>}}</span> <span class=na>alt</span><span class=o>=</span><span class=s>"</span><span class=cp>{{</span><span class=w> </span><span class=na>.</span><span class=w> </span><span class=cp>}}</span><span class=s>"</span><span class=cp>{{</span><span class=w> </span><span class=k>end</span><span class=w> </span><span class=cp>-}}</span> </span></span><span class=line><span class=cl> <span class=cp>{{-</span><span class=w> </span><span class=k>with</span><span class=w> </span><span class=na>.Title</span><span class=w> </span><span class=cp>}}</span> <span class=na>title</span><span class=o>=</span><span class=s>"</span><span class=cp>{{</span><span class=w> </span><span class=na>.</span><span class=w> </span><span class=cp>}}</span><span class=s>"</span><span class=cp>{{</span><span class=w> </span><span class=k>end</span><span class=w> </span><span class=cp>-}}</span> </span></span><span class=line><span class=cl><span class=p>></span> </span></span><span class=line><span class=cl><span class=cm>{{- /* chomp trailing newline */ -}}</span></span></span></code></pre></div></div></div><p>To render standalone images within <code>figure</code> elements:</p><div x-data class="shortcode-code font-mono not-prose relative mt-6 mb-8 border-1 border-gray-200 dark:border-gray-800 bg-light dark:bg-dark"><svg class="absolute right-7 top-2 z-30 text-blue-600 hover:text-blue-500 cursor-pointer w-6 h-6" @click="$copy($refs.code)"><use href="#icon--copy"/></svg><div class="san-serif text-sm inline-block leading-none pl-2 py-3 bg-gray-300 dark:bg-slate-700 dark: w-full select-none">layouts/_default/_markup/render-image.html</div><div x-ref=code><div class="highlight not-prose"><pre tabindex=0 class=chroma><code class=language-go-html-template data-lang=go-html-template><span class=line><span class=cl><span class=cp>{{-</span><span class=w> </span><span class=k>if</span><span class=w> </span><span class=na>.IsBlock</span><span class=w> </span><span class=cp>-}}</span> </span></span><span class=line><span class=cl> <span class=p><</span><span class=nt>figure</span><span class=p>></span> </span></span><span class=line><span class=cl> <span class=p><</span><span class=nt>img</span> <span class=na>src</span><span class=o>=</span><span class=s>"</span><span class=cp>{{</span><span class=w> </span><span class=na>.Destination</span><span class=w> </span><span class=o>|</span><span class=w> </span><span class=nx>safeURL</span><span class=w> </span><span class=cp>}}</span><span class=s>"</span> </span></span><span class=line><span class=cl> <span class=cp>{{-</span><span class=w> </span><span class=k>with</span><span class=w> </span><span class=na>.PlainText</span><span class=w> </span><span class=cp>}}</span> <span class=na>alt</span><span class=o>=</span><span class=s>"</span><span class=cp>{{</span><span class=w> </span><span class=na>.</span><span class=w> </span><span class=cp>}}</span><span class=s>"</span><span class=cp>{{</span><span class=w> </span><span class=k>end</span><span class=w> </span><span class=cp>-}}</span> </span></span><span class=line><span class=cl> <span class=p>></span> </span></span><span class=line><span class=cl> <span class=cp>{{-</span><span class=w> </span><span class=k>with</span><span class=w> </span><span class=na>.Title</span><span class=w> </span><span class=cp>}}</span><span class=p><</span><span class=nt>figcaption</span><span class=p>></span><span class=cp>{{</span><span class=w> </span><span class=na>.</span><span class=w> </span><span class=cp>}}</span><span class=p></</span><span class=nt>figcaption</span><span class=p>></span><span class=cp>{{</span><span class=w> </span><span class=k>end</span><span class=w> </span><span class=cp>-}}</span> </span></span><span class=line><span class=cl> <span class=p></</span><span class=nt>figure</span><span class=p>></span> </span></span><span class=line><span class=cl><span class=cp>{{-</span><span class=w> </span><span class=k>else</span><span class=w> </span><span class=cp>-}}</span> </span></span><span class=line><span class=cl> <span class=p><</span><span class=nt>img</span> <span class=na>src</span><span class=o>=</span><span class=s>"</span><span class=cp>{{</span><span class=w> </span><span class=na>.Destination</span><span class=w> </span><span class=o>|</span><span class=w> </span><span class=nx>safeURL</span><span class=w> </span><span class=cp>}}</span><span class=s>"</span> </span></span><span class=line><span class=cl> <span class=cp>{{-</span><span class=w> </span><span class=k>with</span><span class=w> </span><span class=na>.PlainText</span><span class=w> </span><span class=cp>}}</span> <span class=na>alt</span><span class=o>=</span><span class=s>"</span><span class=cp>{{</span><span class=w> </span><span class=na>.</span><span class=w> </span><span class=cp>}}</span><span class=s>"</span><span class=cp>{{</span><span class=w> </span><span class=k>end</span><span class=w> </span><span class=cp>-}}</span> </span></span><span class=line><span class=cl> <span class=cp>{{-</span><span class=w> </span><span class=k>with</span><span class=w> </span><span class=na>.Title</span><span class=w> </span><span class=cp>}}</span> <span class=na>title</span><span class=o>=</span><span class=s>"</span><span class=cp>{{</span><span class=w> </span><span class=na>.</span><span class=w> </span><span class=cp>}}</span><span class=s>"</span><span class=cp>{{</span><span class=w> </span><span class=k>end</span><span class=w> </span><span class=cp>-}}</span> </span></span><span class=line><span class=cl> <span class=p>></span> </span></span><span class=line><span class=cl><span class=cp>{{-</span><span class=w> </span><span class=k>end</span><span class=w> </span><span class=cp>-}}</span></span></span></code></pre></div></div></div><p>Note that the above requires the following site configuration:</p><div x-data class="shortcode-code not-prose relative p-0 mt-2 mb-4 sm:mb-8"><svg class="absolute right-7 top-0 z-30 text-blue-600 hover:text-blue-500 cursor-pointer w-8" @click="$copy($refs[$store.nav.userSettings.settings.configFileType])"><use href="#icon--copy"/></svg><nav class="relative flex" aria-label=Tabs><div class="flex-none text-sm px-2 content-center border-b-1 border-gray-300 dark:border-gray-700" aria-label=Filename>hugo.</div><button x-on:click="$store.nav.userSettings.settings.configFileType = 'yaml'" aria-label="Toggle yaml" class="px-3 py-2 font-semibold text-black dark:text-slate-200 border-l-1 border-t-1 border-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 dark:border-gray-700 cursor-pointer relative min-w-0 flex-1 overflow-hidden text-sm no-underline text-center focus:z-10 overflow-x-auto" :class="$store.nav.userSettings.settings.configFileType === 'yaml' ? 'border-b-0 bg-light dark:bg-dark' : 'border-b-1'"> <span>yaml </span></button> <button x-on:click="$store.nav.userSettings.settings.configFileType = 'toml'" aria-label="Toggle toml" class="px-3 py-2 font-semibold text-black dark:text-slate-200 border-l-1 border-t-1 border-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 dark:border-gray-700 cursor-pointer relative min-w-0 flex-1 overflow-hidden text-sm no-underline text-center focus:z-10 overflow-x-auto" :class="$store.nav.userSettings.settings.configFileType === 'toml' ? 'border-b-0 bg-light dark:bg-dark' : 'border-b-1'"> <span>toml </span></button> <button x-on:click="$store.nav.userSettings.settings.configFileType = 'json'" aria-label="Toggle json" class="px-3 py-2 font-semibold text-black dark:text-slate-200 border-l-1 border-t-1 border-r-1 border-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 dark:border-gray-700 cursor-pointer relative min-w-0 flex-1 overflow-hidden text-sm no-underline text-center focus:z-10 overflow-x-auto" :class="$store.nav.userSettings.settings.configFileType === 'json' ? 'border-b-0 bg-light dark:bg-dark' : 'border-b-1'"> <span>json</span></button></nav><div class="max-h-96 overflow-y-auto border-l-1 border-b-1 border-r-1 border-gray-300 dark:border-gray-700" x-ref=yaml x-cloak x-transition:enter.opacity.duration.300ms x-show="$store.nav.userSettings.settings.configFileType === 'yaml'"><div class="highlight not-prose"><pre tabindex=0 class=chroma><code class=language-yaml data-lang=yaml><span class=line><span class=cl><span class=nt>markup</span><span class=p>:</span><span class=w> </span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>goldmark</span><span class=p>:</span><span class=w> </span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>parser</span><span class=p>:</span><span class=w> </span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>wrapStandAloneImageWithinParagraph</span><span class=p>:</span><span class=w> </span><span class=kc>false</span><span class=w> </span></span></span></code></pre></div></div><div class="max-h-96 overflow-y-auto border-l-1 border-b-1 border-r-1 border-gray-300 dark:border-gray-700" x-ref=toml x-cloak x-transition:enter.opacity.duration.300ms x-show="$store.nav.userSettings.settings.configFileType === 'toml'"><div class="highlight not-prose"><pre tabindex=0 class=chroma><code class=language-toml data-lang=toml><span class=line><span class=cl><span class=p>[</span><span class=nx>markup</span><span class=p>]</span> </span></span><span class=line><span class=cl> <span class=p>[</span><span class=nx>markup</span><span class=p>.</span><span class=nx>goldmark</span><span class=p>]</span> </span></span><span class=line><span class=cl> <span class=p>[</span><span class=nx>markup</span><span class=p>.</span><span class=nx>goldmark</span><span class=p>.</span><span class=nx>parser</span><span class=p>]</span> </span></span><span class=line><span class=cl> <span class=nx>wrapStandAloneImageWithinParagraph</span> <span class=p>=</span> <span class=kc>false</span> </span></span></code></pre></div></div><div class="max-h-96 overflow-y-auto border-l-1 border-b-1 border-r-1 border-gray-300 dark:border-gray-700" x-ref=json x-cloak x-transition:enter.opacity.duration.300ms x-show="$store.nav.userSettings.settings.configFileType === 'json'"><div class="highlight not-prose"><pre tabindex=0 class=chroma><code class=language-json data-lang=json><span class=line><span class=cl><span class=p>{</span> </span></span><span class=line><span class=cl> <span class=nt>"markup"</span><span class=p>:</span> <span class=p>{</span> </span></span><span class=line><span class=cl> <span class=nt>"goldmark"</span><span class=p>:</span> <span class=p>{</span> </span></span><span class=line><span class=cl> <span class=nt>"parser"</span><span class=p>:</span> <span class=p>{</span> </span></span><span class=line><span class=cl> <span class=nt>"wrapStandAloneImageWithinParagraph"</span><span class=p>:</span> <span class=kc>false</span> </span></span><span class=line><span class=cl> <span class=p>}</span> </span></span><span class=line><span class=cl> <span class=p>}</span> </span></span><span class=line><span class=cl> <span class=p>}</span> </span></span><span class=line><span class=cl><span class=p>}</span> </span></span></code></pre></div></div></div><h2 id=default>Default</h2><span class="not-prose inline-flex items-center px-2 mr-1 rounded text-sm font-medium bg-green-200 dark:bg-green-400 fill-green-600"><svg class="mr-1.5 h-2 w-2" viewBox="0 0 8 8"><circle cx="4" cy="4" r="3"/></svg> <a class="text-green-800 dark:text-black hover:text-green-600 no-underline" href=https://github.com/gohugoio/hugo/releases/tag/v0.123.0 target=_blank>New in v0.123.0</a></span><p>Hugo includes an <a aria-label="embedded image render hook" href=https://github.com/gohugoio/hugo/blob/master/tpl/tplimpl/embedded/templates/_default/_markup/render-image.html rel=external>embedded image render hook</a> to resolve Markdown image destinations. Disabled by default, you can enable it in your site configuration:</p><div x-data class="shortcode-code not-prose relative p-0 mt-2 mb-4 sm:mb-8"><svg class="absolute right-7 top-0 z-30 text-blue-600 hover:text-blue-500 cursor-pointer w-8" @click="$copy($refs[$store.nav.userSettings.settings.configFileType])"><use href="#icon--copy"/></svg><nav class="relative flex" aria-label=Tabs><div class="flex-none text-sm px-2 content-center border-b-1 border-gray-300 dark:border-gray-700" aria-label=Filename>hugo.</div><button x-on:click="$store.nav.userSettings.settings.configFileType = 'yaml'" aria-label="Toggle yaml" class="px-3 py-2 font-semibold text-black dark:text-slate-200 border-l-1 border-t-1 border-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 dark:border-gray-700 cursor-pointer relative min-w-0 flex-1 overflow-hidden text-sm no-underline text-center focus:z-10 overflow-x-auto" :class="$store.nav.userSettings.settings.configFileType === 'yaml' ? 'border-b-0 bg-light dark:bg-dark' : 'border-b-1'"> <span>yaml </span></button> <button x-on:click="$store.nav.userSettings.settings.configFileType = 'toml'" aria-label="Toggle toml" class="px-3 py-2 font-semibold text-black dark:text-slate-200 border-l-1 border-t-1 border-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 dark:border-gray-700 cursor-pointer relative min-w-0 flex-1 overflow-hidden text-sm no-underline text-center focus:z-10 overflow-x-auto" :class="$store.nav.userSettings.settings.configFileType === 'toml' ? 'border-b-0 bg-light dark:bg-dark' : 'border-b-1'"> <span>toml </span></button> <button x-on:click="$store.nav.userSettings.settings.configFileType = 'json'" aria-label="Toggle json" class="px-3 py-2 font-semibold text-black dark:text-slate-200 border-l-1 border-t-1 border-r-1 border-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 dark:border-gray-700 cursor-pointer relative min-w-0 flex-1 overflow-hidden text-sm no-underline text-center focus:z-10 overflow-x-auto" :class="$store.nav.userSettings.settings.configFileType === 'json' ? 'border-b-0 bg-light dark:bg-dark' : 'border-b-1'"> <span>json</span></button></nav><div class="max-h-96 overflow-y-auto border-l-1 border-b-1 border-r-1 border-gray-300 dark:border-gray-700" x-ref=yaml x-cloak x-transition:enter.opacity.duration.300ms x-show="$store.nav.userSettings.settings.configFileType === 'yaml'"><div class="highlight not-prose"><pre tabindex=0 class=chroma><code class=language-yaml data-lang=yaml><span class=line><span class=cl><span class=nt>markup</span><span class=p>:</span><span class=w> </span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>goldmark</span><span class=p>:</span><span class=w> </span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>renderHooks</span><span class=p>:</span><span class=w> </span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>image</span><span class=p>:</span><span class=w> </span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>enableDefault</span><span class=p>:</span><span class=w> </span><span class=kc>true</span><span class=w> </span></span></span></code></pre></div></div><div class="max-h-96 overflow-y-auto border-l-1 border-b-1 border-r-1 border-gray-300 dark:border-gray-700" x-ref=toml x-cloak x-transition:enter.opacity.duration.300ms x-show="$store.nav.userSettings.settings.configFileType === 'toml'"><div class="highlight not-prose"><pre tabindex=0 class=chroma><code class=language-toml data-lang=toml><span class=line><span class=cl><span class=p>[</span><span class=nx>markup</span><span class=p>]</span> </span></span><span class=line><span class=cl> <span class=p>[</span><span class=nx>markup</span><span class=p>.</span><span class=nx>goldmark</span><span class=p>]</span> </span></span><span class=line><span class=cl> <span class=p>[</span><span class=nx>markup</span><span class=p>.</span><span class=nx>goldmark</span><span class=p>.</span><span class=nx>renderHooks</span><span class=p>]</span> </span></span><span class=line><span class=cl> <span class=p>[</span><span class=nx>markup</span><span class=p>.</span><span class=nx>goldmark</span><span class=p>.</span><span class=nx>renderHooks</span><span class=p>.</span><span class=nx>image</span><span class=p>]</span> </span></span><span class=line><span class=cl> <span class=nx>enableDefault</span> <span class=p>=</span> <span class=kc>true</span> </span></span></code></pre></div></div><div class="max-h-96 overflow-y-auto border-l-1 border-b-1 border-r-1 border-gray-300 dark:border-gray-700" x-ref=json x-cloak x-transition:enter.opacity.duration.300ms x-show="$store.nav.userSettings.settings.configFileType === 'json'"><div class="highlight not-prose"><pre tabindex=0 class=chroma><code class=language-json data-lang=json><span class=line><span class=cl><span class=p>{</span> </span></span><span class=line><span class=cl> <span class=nt>"markup"</span><span class=p>:</span> <span class=p>{</span> </span></span><span class=line><span class=cl> <span class=nt>"goldmark"</span><span class=p>:</span> <span class=p>{</span> </span></span><span class=line><span class=cl> <span class=nt>"renderHooks"</span><span class=p>:</span> <span class=p>{</span> </span></span><span class=line><span class=cl> <span class=nt>"image"</span><span class=p>:</span> <span class=p>{</span> </span></span><span class=line><span class=cl> <span class=nt>"enableDefault"</span><span class=p>:</span> <span class=kc>true</span> </span></span><span class=line><span class=cl> <span class=p>}</span> </span></span><span class=line><span class=cl> <span class=p>}</span> </span></span><span class=line><span class=cl> <span class=p>}</span> </span></span><span class=line><span class=cl> <span class=p>}</span> </span></span><span class=line><span class=cl><span class=p>}</span> </span></span></code></pre></div></div></div><p>A custom render hook, even when provided by a theme or module, will override the embedded render hook regardless of the configuration setting above.</p><div class="border-l-4 overflow-x-auto border-blue-400 bg-blue-50 dark:bg-blue-950 border-1 border-blue-100 dark:border-blue-900 p-4 mt-6 mb-8"><div class=flex><div class=shrink-0><svg class="fill-blue-500 dark:fill-blue-400 h-7 w-7"><use href="#icon--exclamation"/></svg></div><div class=ml-3><div class=mt-2><p>The embedded image render hook is automatically enabled for multilingual single-host sites if <a aria-label="duplication of shared page resources" href=/getting-started/configuration-markup/#duplicateresourcefiles>duplication of shared page resources</a> is disabled. This is the default configuration for multilingual single-host sites.</p></div></div></div></div><p>The embedded image render hook resolves internal Markdown destinations by looking for a matching <a aria-label="page resource" href=/quick-reference/glossary/#page-resource>page resource</a>, falling back to a matching <a aria-label="global resource" href=/quick-reference/glossary/#global-resource>global resource</a>. Remote destinations are passed through, and the render hook will not throw an error or warning if unable to resolve a destination.</p><p>You must place global resources in the <code>assets</code> directory. If you have placed your resources in the <code>static</code> directory, and you are unable or unwilling to move them, you must mount the <code>static</code> directory to the <code>assets</code> directory by including both of these entries in your site configuration:</p><div x-data class="shortcode-code not-prose relative p-0 mt-2 mb-4 sm:mb-8"><svg class="absolute right-7 top-0 z-30 text-blue-600 hover:text-blue-500 cursor-pointer w-8" @click="$copy($refs[$store.nav.userSettings.settings.configFileType])"><use href="#icon--copy"/></svg><nav class="relative flex" aria-label=Tabs><div class="flex-none text-sm px-2 content-center border-b-1 border-gray-300 dark:border-gray-700" aria-label=Filename>hugo.</div><button x-on:click="$store.nav.userSettings.settings.configFileType = 'yaml'" aria-label="Toggle yaml" class="px-3 py-2 font-semibold text-black dark:text-slate-200 border-l-1 border-t-1 border-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 dark:border-gray-700 cursor-pointer relative min-w-0 flex-1 overflow-hidden text-sm no-underline text-center focus:z-10 overflow-x-auto" :class="$store.nav.userSettings.settings.configFileType === 'yaml' ? 'border-b-0 bg-light dark:bg-dark' : 'border-b-1'"> <span>yaml </span></button> <button x-on:click="$store.nav.userSettings.settings.configFileType = 'toml'" aria-label="Toggle toml" class="px-3 py-2 font-semibold text-black dark:text-slate-200 border-l-1 border-t-1 border-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 dark:border-gray-700 cursor-pointer relative min-w-0 flex-1 overflow-hidden text-sm no-underline text-center focus:z-10 overflow-x-auto" :class="$store.nav.userSettings.settings.configFileType === 'toml' ? 'border-b-0 bg-light dark:bg-dark' : 'border-b-1'"> <span>toml </span></button> <button x-on:click="$store.nav.userSettings.settings.configFileType = 'json'" aria-label="Toggle json" class="px-3 py-2 font-semibold text-black dark:text-slate-200 border-l-1 border-t-1 border-r-1 border-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 dark:border-gray-700 cursor-pointer relative min-w-0 flex-1 overflow-hidden text-sm no-underline text-center focus:z-10 overflow-x-auto" :class="$store.nav.userSettings.settings.configFileType === 'json' ? 'border-b-0 bg-light dark:bg-dark' : 'border-b-1'"> <span>json</span></button></nav><div class="max-h-96 overflow-y-auto border-l-1 border-b-1 border-r-1 border-gray-300 dark:border-gray-700" x-ref=yaml x-cloak x-transition:enter.opacity.duration.300ms x-show="$store.nav.userSettings.settings.configFileType === 'yaml'"><div class="highlight not-prose"><pre tabindex=0 class=chroma><code class=language-yaml data-lang=yaml><span class=line><span class=cl><span class=nt>module</span><span class=p>:</span><span class=w> </span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>mounts</span><span class=p>:</span><span class=w> </span></span></span><span class=line><span class=cl><span class=w> </span>- <span class=nt>source</span><span class=p>:</span><span class=w> </span><span class=l>assets</span><span class=w> </span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>target</span><span class=p>:</span><span class=w> </span><span class=l>assets</span><span class=w> </span></span></span><span class=line><span class=cl><span class=w> </span>- <span class=nt>source</span><span class=p>:</span><span class=w> </span><span class=l>static</span><span class=w> </span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>target</span><span class=p>:</span><span class=w> </span><span class=l>assets</span><span class=w> </span></span></span></code></pre></div></div><div class="max-h-96 overflow-y-auto border-l-1 border-b-1 border-r-1 border-gray-300 dark:border-gray-700" x-ref=toml x-cloak x-transition:enter.opacity.duration.300ms x-show="$store.nav.userSettings.settings.configFileType === 'toml'"><div class="highlight not-prose"><pre tabindex=0 class=chroma><code class=language-toml data-lang=toml><span class=line><span class=cl><span class=p>[</span><span class=nx>module</span><span class=p>]</span> </span></span><span class=line><span class=cl> <span class=p>[[</span><span class=nx>module</span><span class=p>.</span><span class=nx>mounts</span><span class=p>]]</span> </span></span><span class=line><span class=cl> <span class=nx>source</span> <span class=p>=</span> <span class=s1>'assets'</span> </span></span><span class=line><span class=cl> <span class=nx>target</span> <span class=p>=</span> <span class=s1>'assets'</span> </span></span><span class=line><span class=cl> <span class=p>[[</span><span class=nx>module</span><span class=p>.</span><span class=nx>mounts</span><span class=p>]]</span> </span></span><span class=line><span class=cl> <span class=nx>source</span> <span class=p>=</span> <span class=s1>'static'</span> </span></span><span class=line><span class=cl> <span class=nx>target</span> <span class=p>=</span> <span class=s1>'assets'</span> </span></span></code></pre></div></div><div class="max-h-96 overflow-y-auto border-l-1 border-b-1 border-r-1 border-gray-300 dark:border-gray-700" x-ref=json x-cloak x-transition:enter.opacity.duration.300ms x-show="$store.nav.userSettings.settings.configFileType === 'json'"><div class="highlight not-prose"><pre tabindex=0 class=chroma><code class=language-json data-lang=json><span class=line><span class=cl><span class=p>{</span> </span></span><span class=line><span class=cl> <span class=nt>"module"</span><span class=p>:</span> <span class=p>{</span> </span></span><span class=line><span class=cl> <span class=nt>"mounts"</span><span class=p>:</span> <span class=p>[</span> </span></span><span class=line><span class=cl> <span class=p>{</span> </span></span><span class=line><span class=cl> <span class=nt>"source"</span><span class=p>:</span> <span class=s2>"assets"</span><span class=p>,</span> </span></span><span class=line><span class=cl> <span class=nt>"target"</span><span class=p>:</span> <span class=s2>"assets"</span> </span></span><span class=line><span class=cl> <span class=p>},</span> </span></span><span class=line><span class=cl> <span class=p>{</span> </span></span><span class=line><span class=cl> <span class=nt>"source"</span><span class=p>:</span> <span class=s2>"static"</span><span class=p>,</span> </span></span><span class=line><span class=cl> <span class=nt>"target"</span><span class=p>:</span> <span class=s2>"assets"</span> </span></span><span class=line><span class=cl> <span class=p>}</span> </span></span><span class=line><span class=cl> <span class=p>]</span> </span></span><span class=line><span class=cl> <span class=p>}</span> </span></span><span class=line><span class=cl><span class=p>}</span> </span></span></code></pre></div></div></div><p>Note that the embedded image render hook does not perform image processing. Its sole purpose is to resolve Markdown image destinations.</p><h2 id=pageinner-details>PageInner details</h2><span class="not-prose inline-flex items-center px-2 mr-1 rounded text-sm font-medium bg-green-200 dark:bg-green-400 fill-green-600"><svg class="mr-1.5 h-2 w-2" viewBox="0 0 8 8"><circle cx="4" cy="4" r="3"/></svg> <a class="text-green-800 dark:text-black hover:text-green-600 no-underline" href=https://github.com/gohugoio/hugo/releases/tag/v0.125.0 target=_blank>New in v0.125.0</a></span><p>The primary use case for <code>PageInner</code> is to resolve links and <a aria-label="page resources" href=/quick-reference/glossary/#page-resource>page resources</a> relative to an included <code>Page</code>. For example, create an “include” shortcode to compose a page from multiple content files, while preserving a global context for footnotes and the table of contents:</p><div x-data class="shortcode-code font-mono not-prose relative mt-6 mb-8 border-1 border-gray-200 dark:border-gray-800 bg-light dark:bg-dark"><div class="san-serif text-sm inline-block leading-none pl-2 py-3 bg-gray-300 dark:bg-slate-700 dark: w-full select-none">layouts/shortcodes/include.html</div><div x-ref=code><div class="highlight not-prose"><pre tabindex=0 class=chroma><code class=language-go-html-template data-lang=go-html-template><span class=line><span class=cl><span class=cp>{{</span><span class=w> </span><span class=k>with</span><span class=w> </span><span class=na>.Get</span><span class=w> </span><span class=nx>0</span><span class=w> </span><span class=cp>}}</span> </span></span><span class=line><span class=cl> <span class=cp>{{</span><span class=w> </span><span class=k>with</span><span class=w> </span><span class=na>$.Page.GetPage</span><span class=w> </span><span class=na>.</span><span class=w> </span><span class=cp>}}</span> </span></span><span class=line><span class=cl> <span class=cp>{{-</span><span class=w> </span><span class=na>.RenderShortcodes</span><span class=w> </span><span class=cp>}}</span> </span></span><span class=line><span class=cl> <span class=cp>{{</span><span class=w> </span><span class=k>else</span><span class=w> </span><span class=cp>}}</span> </span></span><span class=line><span class=cl> <span class=cp>{{</span><span class=w> </span><span class=nx>errorf</span><span class=w> </span><span class=s>"The %q shortcode was unable to find %q. See %s"</span><span class=w> </span><span class=na>$.Name</span><span class=w> </span><span class=na>.</span><span class=w> </span><span class=na>$.Position</span><span class=w> </span><span class=cp>}}</span> </span></span><span class=line><span class=cl> <span class=cp>{{</span><span class=w> </span><span class=k>end</span><span class=w> </span><span class=cp>}}</span> </span></span><span class=line><span class=cl><span class=cp>{{</span><span class=w> </span><span class=k>else</span><span class=w> </span><span class=cp>}}</span> </span></span><span class=line><span class=cl> <span class=cp>{{</span><span class=w> </span><span class=nx>errorf</span><span class=w> </span><span class=s>"The %q shortcode requires a positional parameter indicating the logical path of the file to include. See %s"</span><span class=w> </span><span class=na>.Name</span><span class=w> </span><span class=na>.Position</span><span class=w> </span><span class=cp>}}</span> </span></span><span class=line><span class=cl><span class=cp>{{</span><span class=w> </span><span class=k>end</span><span class=w> </span><span class=cp>}}</span></span></span></code></pre></div></div></div><p>Then call the shortcode in your Markdown:</p><div x-data class="shortcode-code font-mono not-prose relative mt-6 mb-8 border-1 border-gray-200 dark:border-gray-800 bg-light dark:bg-dark"><div class="san-serif text-sm inline-block leading-none pl-2 py-3 bg-gray-300 dark:bg-slate-700 dark: w-full select-none">content/posts/p1.md</div><div x-ref=code><div class="highlight not-prose"><pre tabindex=0 class=chroma><code class=language-md data-lang=md><span class=line><span class=cl>{{% include "/posts/p2" %}}</span></span></code></pre></div></div></div><p>Any render hook triggered while rendering <code>/posts/p2</code> will get:</p><ul><li><code>/posts/p1</code> when calling <code>Page</code></li><li><code>/posts/p2</code> when calling <code>PageInner</code></li></ul><p><code>PageInner</code> falls back to the value of <code>Page</code> if not relevant, and always returns a value.</p><div class="border-l-4 overflow-x-auto border-blue-400 bg-blue-50 dark:bg-blue-950 border-1 border-blue-100 dark:border-blue-900 p-4 mt-6 mb-8"><div class=flex><div class=shrink-0><svg class="fill-blue-500 dark:fill-blue-400 h-7 w-7"><use href="#icon--exclamation"/></svg></div><div class=ml-3><div class=mt-2><p>The <code>PageInner</code> method is only relevant for shortcodes that invoke the <a aria-label=RenderShortcodes href=/methods/page/rendershortcodes/><code>RenderShortcodes</code></a> method, and you must call the shortcode using <a aria-label="Markdown notation" href=/content-management/shortcodes/#notation>Markdown notation</a>.</p></div></div></div></div><p>As a practical example, Hugo’s embedded link and image render hooks use the <code>PageInner</code> method to resolve markdown link and image destinations. See the source code for each:</p><ul><li><a aria-label="Embedded link render hook" href=https://github.com/gohugoio/hugo/blob/master/tpl/tplimpl/embedded/templates/_default/_markup/render-link.html rel=external>Embedded link render hook</a></li><li><a aria-label="Embedded image render hook" href=https://github.com/gohugoio/hugo/blob/master/tpl/tplimpl/embedded/templates/_default/_markup/render-image.html rel=external>Embedded image render hook</a></li></ul><div class=print:hidden><hr class="border-t border-gray-200 dark:border-gray-800 my-10 lg:my-16"><div class="text-gray-800 dark:text-gray-300 font-semibold">Last updated: February 17, 2025 : <a class="text-blue-600 hover:text-blue-500" href=https://github.com/gohugoio/hugoDocs/commit/0fca8ef2511017a504071033d2ab076071ae5840>all: Change shortcode usage and design to prevent invalid HTML (0fca8ef25)</a></div><a href=https://github.com/gohugoio/hugoDocs/edit/master/content/en/render-hooks/images.md class="mt-4 inline-block not-prose bg-blue-600 hover:bg-blue-800 text-white hover:text-white font-bold py-2 px-4 rounded">Improve this page</a></div></div></article></main><aside class="py-15 ml-4 xl:ml-12 w-60 hidden lg:relative lg:block lg:flex-none"><div class="overflow-y-auto max-h-96 relative mt-2 mb-8" data-turbo-preserve-scroll-container=in-this-section><h2 class="text-base font-semibold tracking-tight text-gray-600 dark:text-gray-400">In this section</h2><ul id=in-sthis-section class=mt-2><li><a class="text-sm text-blue-600 hover:text-blue-500 dark:text-blue-500 dark:hover:text-blue-400" href=/render-hooks/introduction/>Introduction</a></li><li><a class="text-sm text-blue-600 hover:text-blue-500 dark:text-blue-500 dark:hover:text-blue-400" href=/render-hooks/blockquotes/>Blockquotes</a></li><li><a class="text-sm text-blue-600 hover:text-blue-500 dark:text-blue-500 dark:hover:text-blue-400" href=/render-hooks/code-blocks/>Code blocks</a></li><li><a class="text-sm text-blue-600 hover:text-blue-500 dark:text-blue-500 dark:hover:text-blue-400" href=/render-hooks/headings/>Headings</a></li><li><a class="text-sm font-bold text-blue-600 hover:text-blue-600 dark:hover:text-blue-200 dark:text-blue-200 focus:font-bold scroll-active" href=/render-hooks/images/>Images</a></li><li><a class="text-sm text-blue-600 hover:text-blue-500 dark:text-blue-500 dark:hover:text-blue-400" href=/render-hooks/links/>Links</a></li><li><a class="text-sm text-blue-600 hover:text-blue-500 dark:text-blue-500 dark:hover:text-blue-400" href=/render-hooks/passthrough/>Passthrough</a></li><li><a class="text-sm text-blue-600 hover:text-blue-500 dark:text-blue-500 dark:hover:text-blue-400" href=/render-hooks/tables/>Tables</a></li></ul></div><div x-data=toc class="sticky top-[8rem] h-screen overflow-y-auto overflow-x-hidden"><h2 class="text-base font-semibold tracking-tight text-gray-600 dark:text-gray-400">On this page</h2><nav class="w-56 mt-2"><ul><ul><li><a href=#markdown x-ref=markdown @click.stop="setActive('markdown')" class="block pb-1 text-blue-600 hover:text-blue-500 dark:text-blue-500 dark:hover:text-blue-400 text-sm" :class="{'font-bold dark:text-blue-200 dark:hover:text-blue-300' : activeHeading === 'markdown'}">Markdown</a></li><li><a href=#context x-ref=context @click.stop="setActive('context')" class="block pb-1 text-blue-600 hover:text-blue-500 dark:text-blue-500 dark:hover:text-blue-400 text-sm" :class="{'font-bold dark:text-blue-200 dark:hover:text-blue-300' : activeHeading === 'context'}">Context</a></li><ul><ul><ul><ul></ul></ul></ul></ul><li><a href=#examples x-ref=examples @click.stop="setActive('examples')" class="block pb-1 text-blue-600 hover:text-blue-500 dark:text-blue-500 dark:hover:text-blue-400 text-sm" :class="{'font-bold dark:text-blue-200 dark:hover:text-blue-300' : activeHeading === 'examples'}">Examples</a></li><li><a href=#default x-ref=default @click.stop="setActive('default')" class="block pb-1 text-blue-600 hover:text-blue-500 dark:text-blue-500 dark:hover:text-blue-400 text-sm" :class="{'font-bold dark:text-blue-200 dark:hover:text-blue-300' : activeHeading === 'default'}">Default</a></li><li><a href=#pageinner-details x-ref=pageinner-details @click.stop="setActive('pageinner-details')" class="block pb-1 text-blue-600 hover:text-blue-500 dark:text-blue-500 dark:hover:text-blue-400 text-sm" :class="{'font-bold dark:text-blue-200 dark:hover:text-blue-300' : activeHeading === 'pageinner-details'}">PageInner details</a></li></ul></ul></nav></div></aside></div><svg style="display:none"><symbol id="icon--chevron-right" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414.0z" clip-rule="evenodd"/></symbol></svg> <svg style="display:none"><symbol id="icon--search" viewBox="0 0 20 20"><path d="M16.293 17.707a1 1 0 001.414-1.414l-1.414 1.414zM9 14A5 5 0 014 9H2a7 7 0 007 7v-2zM4 9a5 5 0 015-5V2A7 7 0 002 9h2zm5-5a5 5 0 015 5h2A7 7 0 009 2v2zm8.707 12.293-3.757-3.757-1.414 1.414 3.757 3.757 1.414-1.414zM14 9a4.98 4.98.0 01-1.464 3.536l1.414 1.414A6.98 6.98.0 0016 9h-2zm-1.464 3.536A4.98 4.98.0 019 14v2a6.98 6.98.0 004.95-2.05l-1.414-1.414z"/></symbol></svg> <svg style="display:none"><symbol id="icon--anchor" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76.0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71.0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71.0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76.0 5-2.24 5-5s-2.24-5-5-5z"/></symbol></svg> <svg style="display:none"><symbol id="icon--exclamation" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03.0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347.0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75.0 01.75.75v3.5a.75.75.0 01-1.5.0v-3.5A.75.75.0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"/></symbol></svg> <svg style="display:none"><symbol id="icon--copy" viewBox="0 0 24 24"><path fill="none" stroke="currentcolor" stroke-width="1.5" aria-hidden="true" stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25.0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424.0 00-1.123-.08m-5.801.0c-.065.21-.1.433-.1.664.0.414.336.75.75.75h4.5a.75.75.0 00.75-.75 2.25 2.25.0 00-.1-.664m-5.8.0A2.251 2.251.0 0113.5 2.25H15c1.012.0 1.867.668 2.15 1.586m-5.8.0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621.0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621.0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25zM6.75 12h.008v.008H6.75V12zm0 3h.008v.008H6.75V15zm0 3h.008v.008H6.75V18z"/></symbol></svg> <svg style="display:none"><symbol id="icon--github" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.477 2 2 6.463 2 11.97c0 4.404 2.865 8.14 6.839 9.458.5.092.682-.216.682-.48.0-.236-.008-.864-.013-1.695-2.782.602-3.369-1.337-3.369-1.337-.454-1.151-1.11-1.458-1.11-1.458-.908-.618.069-.606.069-.606 1.003.07 1.531 1.027 1.531 1.027.892 1.524 2.341 1.084 2.91.828.092-.643.35-1.083.636-1.332-2.22-.251-4.555-1.107-4.555-4.927.0-1.088.39-1.979 1.029-2.675-.103-.252-.446-1.266.098-2.638.0.0.84-.268 2.75 1.022A9.607 9.607.0 0112 6.82c.85.004 1.705.114 2.504.336 1.909-1.29 2.747-1.022 2.747-1.022.546 1.372.202 2.386.1 2.638.64.696 1.028 1.587 1.028 2.675.0 3.83-2.339 4.673-4.566 4.92.359.307.678.915.678 1.846.0 1.332-.012 2.407-.012 2.734.0.267.18.577.688.48 3.97-1.32 6.833-5.054 6.833-9.458C22 6.463 17.522 2 12 2z"/></symbol></svg> <template id=anchor-heading><a class="inline-flex items-center" aria-label=Anchor><svg class="ml-2 fill-primary hover:fill-primary/70 w-4 h-4"><use href="#icon--anchor"/></svg></a></template><footer class="print:hidden bg-blue-950 mt-8 sm:mt-24 border-t-1 border-gray-800"><div class="mx-auto max-w-7xl pt-16 pb-8 sm:pt-18 lg:pt-20"><div class="xl:grid xl:grid-cols-3 xl:gap-8"><div class="flex flex-col items-center justify-between space-y-8"><div class=text-gray-200>By the <a href=https://github.com/gohugoio/hugo/graphs/contributors class="text-blue-300 hover:underline">Hugo Authors</a><br></div><img src=/images/hugo-logo-wide.svg alt="Hugo Logo" class="aspect-3/1 w-40"><ul class="space-y-2 text-gray-200"><li class=hover:text-white><a href=https://fosstodon.org/@gohugoio>@GoHugoIO</a></li><li class=hover:text-white><a href=https://twitter.com/spf13>@spf13</a></li><li class=hover:text-white><a href=https://twitter.com/bepsays>@bepsays</a></li><li class=mt-6><a href=https://github.com/gohugoio/hugo/issues/new class="text-sm/6 text-gray-200 hover:text-white">File an issue</a></li><li><a href=https://discourse.gohugo.io/ class="text-sm/6 text-gray-200 hover:text-white">Get help</a></li><li><a href=https://themes.gohugo.io/ class="text-sm/6 text-gray-200 hover:text-white">Find a theme</a></li></ul></div><div class="mt-16 xl:mt-0 col-span-2 text-gray-200 max-w-3xl flex items-center content-center justify-center mx-auto"><div class="mx-auto max-w-7xl px-6 lg:px-8"><h2 class="font-bold text-2xl mb-6 tracking-tighter">Hugo Sponsors</h2><div class="grid grid-cols-1 lg:grid-cols-3 gap-x-8 gap-y-6"><div class=max-w-64 style=background-color:#fff><a href="https://www.linode.com/?utm_campaign=hugosponsor&utm_content=gohugoio&utm_medium=banner&utm_source=hugofooter" title=Linode class="group inline-block w-full h-full shadow-md dark:shadow-gray-600"><div class="flex w-full h-full p-8 items-center justify-center content-center transition duration-500 hover:scale-105"><svg height="100%" width="100%" enable-background="new 0 0 575.8 178.3" viewBox="0 0 575.8 178.3"><path d="m148.6 78.9-24.7-13.6L103.1 78l-.3 13-10.1-6.7-13.8 8.4c-.2-3.9-.4-8.6-.6-14.2L64.1 69c3.9-2 8.4-4.3 13.5-7-.1.0.1 1.4-2-46.5l-32-15.4-43.6 13.6 9.7 46.9L24.3 72l-11.1 5.3 7.3 35.3 10.2 9.6-7.3 4.5 5.7 27.3L52 178.3c.1-.1 2.4-1.9 29.5-23.5l-.8-18.6 11.7 9.9c.2-.2 2.4-1.9 23.7-18.8l.8-13.7 8.8 6.1c.1-.2 2.1-1.7 19.3-15.3z"/><path d="m128.1 93.5 20.5-14.6-24.7-13.6L103.1 78z" fill="#141414"/><path d="m125.8 119.5 2.3-26-25-15.5-.5 25.4z" fill="#004b16"/><path d="m92.6 146-.3-27-25.1-19.1 1.9 26.4z" fill="#004b16"/><path d="m92.3 119 25.5-18.2-25.1-16.5-25.5 15.6z" fill="#141414"/><path d="m52.1 178.2-4.1-27.6-24.6-24.1 5.7 27.4z" fill="#004b16"/><path d="m48 150.6 32.4-23.1-25.1-20.4-31.9 19.4z" fill="#141414"/><path d="m45.9 136.3-5.3-36.4-27.4-22.8 7.3 35.4z" fill="#004b16"/><path d="m40.6 99.9 37.7-21.4-28.2-18.9-36.9 17.5z" fill="#141414"/><path d="m38 82.5-7.3-49.9L0 13.6l9.7 46.9z" fill="#004b16"/><path d="m30.7 32.6 44.9-17.2-32-15.4-43.6 13.6z" fill="#141414"/><g fill="#1cb35c"><path d="m145.2 104.2c-19 15.1-19.4 15.4-19.3 15.4 2.4-27.2 2.2-26 2.3-26C150 78.1 148.6 79 148.7 79z"/><path d="m116.2 127.2C92.7 145.9 92.4 146 92.5 146c-.2-28.2-.3-27-.2-27 27.1-19.4 25.4-18.2 25.5-18.2z"/><path d="m81.6 154.7C52.2 178 52 178.2 52.1 178.2c-4.2-28.4-4.1-27.5-4-27.5 34.5-24.6 32.3-23.1 32.4-23.1z"/><path d="m75.6 15.4c2.1 47.9 1.9 46.5 2 46.5C38.8 82.1 37.9 82.5 38 82.5c-7.5-51-7.4-49.9-7.3-49.9z"/><path d="m78.3 78.5c1.6 36.3 1.4 35.1 1.5 35.1-33.6 22.6-34 22.8-33.9 22.8C40.4 99 40.5 1e2 40.6 1e2z"/></g><path d="m191.4 33.6 16.8-4c0 81.8-3.1 93.5 8 97.1-2.6 4.9-7.1 7.4-13.3 7.4-15.3.0-11.5-11.3-11.5-100.5z"/><path d="m233.7 132.7V74.3h-9.2V60.5h26.3v72.2zm8.7-100.1c12.9.0 12.9 19.5.0 19.5s-12.9-19.5.0-19.5z"/><path d="m316.8 132.7c0-43.6 1.1-49.6-3.5-55.2-5.8-6.9-20-5-26.1 3v52.2h-16.8V60.5h12.1l3.1 6.7c9.1-10.8 30.4-10.9 40.6-.4 9.7 10 7.4 20.5 7.4 65.8z"/><path d="m347.2 96.4c0-49.2 69.4-51.1 69.4.0-.1 50.7-69.4 50.8-69.4.0zm17.5.0c0 28.8 22.2 27.7 29.7 17.7 7-9.4 8.8-41.2-12.5-41.2-12.3.0-17.2 11.3-17.2 23.5z"/><path d="m476.4 132.7c0-7.4 1.8-3.4-7.1-.4-10.2 3.5-25.1 2-34.1-7.9-11.1-12.3-12.6-39.5 1.3-54.6 11.4-12.3 28.5-13.1 39.9-7.4V33.5l16.9-4v103.1zm0-54.9c-8.9-7.1-20.9-4.8-26.8 1.9-8.1 9.1-11.2 40.2 16.2 40.2 2.9.0 9-2.2 10.6-4.4z"/><path d="m574.6 101.8H523c1.2 22.3 29 21.4 38.1 12.2l6.5 12.9c-14 11.3-62.3 15-62.3-29.5.1-54.1 81.3-49 69.3 4.4zm-51-12.7h35.5c-1.2-10.6-7-15.8-17.5-15.8-9.7.0-15.6 5.2-18 15.8z"/></svg></div></a></div><div class=max-w-64 style=background-color:#f4f4f4><a href="https://www.jetbrains.com/go/?utm_source=OSS&utm_medium=referral&utm_campaign=hugo" title="The complete IDE crafted for professional Go developers." class="group inline-block w-full h-full shadow-md dark:shadow-gray-600"><div class="flex w-full h-full p-8 items-center justify-center content-center transition duration-500 hover:scale-105"><svg fill="none" height="100%" width="100%" viewBox="0 0 238 79"><defs><linearGradient id="a" x1="63.6351" x2="39.318" y1="54.0451" y2="1.59593" gradientUnits="userSpaceOnUse"><stop offset=".24" stop-color="#00d886"/><stop offset=".51" stop-color="#007dfe"/></linearGradient><linearGradient id="b" x1="59.3792" x2=".674325" y1="4.38051" y2="63.0854" gradientUnits="userSpaceOnUse"><stop offset=".27" stop-color="#007dfe"/><stop offset=".7" stop-color="#d249fc"/></linearGradient></defs><path fill="#000" fill-rule="evenodd" d="M107.38 35.54h-7.19v-4.29h12.41v2.31c0 2.63-.62 5-1.88 7.11-1.26 2.12-2.99 3.78-5.19 4.99s-4.51 1.82-7.37 1.82-5.44-.67-7.74-2.02c-2.31-1.34-4.12-3.2-5.44-5.56S83 34.9 83 31.99s.66-5.55 1.98-7.91c1.32-2.36 3.14-4.21 5.44-5.56 2.31-1.35 4.89-2.02 7.74-2.02 2.27.0 4.36.4 6.29 1.21 1.93.8 3.56 1.93 4.9 3.39 1.35 1.45 2.29 3.14 2.85 5.07h-5.71c-.49-1-1.14-1.86-1.95-2.59-.82-.73-1.76-1.28-2.84-1.67-1.08-.39-2.25-.58-3.5-.58-1.84.0-3.51.46-5 1.38-1.49.92-2.66 2.19-3.5 3.81-.84 1.62-1.26 3.44-1.26 5.47s.42 3.85 1.26 5.47 2.01 2.89 3.5 3.81 3.16 1.38 5 1.38c1.71.0 3.25-.32 4.63-.96 1.38-.65 2.48-1.54 3.29-2.69.73-1.04 1.14-2.19 1.26-3.46zm19.54-11c2.15.0 4.11.5 5.86 1.5s3.13 2.37 4.14 4.12c1.01 1.74 1.51 3.7 1.51 5.85s-.5 4.1-1.51 5.85-2.38 3.12-4.14 4.12-3.74 1.5-5.89 1.5c-2.15.0-4.11-.5-5.86-1.5s-3.13-2.37-4.14-4.12c-1.01-1.74-1.51-3.7-1.51-5.85s.5-4.1 1.5-5.85 2.38-3.12 4.14-4.12c1.77-1 3.75-1.5 5.9-1.5zm3.25 17.55c.95-.58 1.69-1.4 2.21-2.46s.78-2.25.78-3.62-.26-2.58-.79-3.63c-.52-1.05-1.26-1.87-2.21-2.46-.95-.59-2.04-.89-3.26-.89-1.22.0-2.31.3-3.26.88s-1.68 1.4-2.2 2.46c-.52 1.06-.78 2.28-.78 3.64s.26 2.56.78 3.62c.52 1.05 1.25 1.88 2.2 2.46.94.59 2.04.88 3.26.88s2.32-.3 3.27-.88zm17.73-25.08h.01l-.01-.01v.01zm0 0h-5.3v29.96h19.75v-4.82H147.9V17.01zm30.87 8.73c1.11.66 2.02 1.54 2.73 2.63v-3.31h4.96v21.92h-4.96v-3.31c-.71 1.09-1.62 1.98-2.73 2.63-1.36.8-2.95 1.2-4.76 1.2-1.94.0-3.68-.49-5.22-1.47s-2.75-2.34-3.62-4.09-1.3-3.72-1.3-5.92.43-4.17 1.3-5.92 2.08-3.11 3.61-4.09 3.28-1.47 5.23-1.47c1.81.0 3.4.4 4.76 1.2zm-.29 16.36c.94-.59 1.67-1.41 2.2-2.46.53-1.05.79-2.26.79-3.63s-.26-2.58-.79-3.63c-.52-1.05-1.26-1.87-2.2-2.46s-2.05-.89-3.25-.89-2.27.3-3.21.89-1.67 1.41-2.19 2.46-.78 2.26-.78 3.63.26 2.58.78 3.64 1.25 1.88 2.19 2.46c.94.59 1.99.88 3.21.88s2.31-.3 3.25-.89zm24.72-17.56c1.57.0 2.95.34 4.13 1.03l.01.03c1.18.68 2.11 1.68 2.76 2.97.65 1.29.98 2.84.98 4.64v13.78h-5.03V33.98c0-1.06-.18-1.96-.54-2.7-.36-.74-.87-1.31-1.54-1.7s-1.47-.59-2.4-.59c-.99.0-1.88.22-2.65.67-.77.45-1.37 1.07-1.79 1.88-.42.81-.63 1.72-.63 2.75v12.69h-5.05V25.06h4.9v3.21c.63-1.06 1.44-1.92 2.45-2.55 1.25-.79 2.72-1.18 4.4-1.18zm29.04 3.79v-11.3h5.05v29.96h-5.05v-3.28c-.71 1.07-1.61 1.94-2.71 2.59-1.36.8-2.95 1.2-4.76 1.2-1.94.0-3.68-.49-5.22-1.47s-2.75-2.34-3.62-4.09-1.31-3.72-1.31-5.92.44-4.17 1.31-5.92 2.08-3.11 3.61-4.09 3.27-1.47 5.23-1.47c1.81.0 3.4.4 4.76 1.2 1.1.64 2 1.52 2.71 2.59zm-3.01 13.77c.95-.59 1.68-1.41 2.21-2.46s.79-2.26.79-3.63-.26-2.58-.79-3.63c-.53-1.05-1.27-1.87-2.21-2.46s-2.05-.89-3.25-.89-2.27.3-3.21.89-1.67 1.41-2.19 2.46-.78 2.26-.78 3.63.26 2.58.78 3.64 1.25 1.88 2.19 2.46c.94.59 1.99.88 3.21.88s2.31-.3 3.25-.89zM87.7037 74.19c.17-.31.25-.66.25-1.05h.01v-9.15h3.1v9.37c0 .88-.2 1.67-.61 2.38s-.97 1.26-1.68 1.66c-.71.4-1.52.6-2.41.6h-2.37v-2.85h1.95c.4.0.75-.08 1.05-.25.31-.17.54-.4.71-.71zm15.2603-1.9h-6.5003v3.02h7.3803v2.7H93.4437V63.99h10.2003v2.71h-7.1803v2.97h6.5003v2.62zm6.16-5.52h-4.16v-2.78h11.39v2.78h-4.13V78h-3.1V66.77zm17.2 3.9c.29.08.56.18.81.31h.01c.57.31 1.02.73 1.34 1.28s.48 1.17.48 1.86c0 .75-.2 1.42-.61 2.01-.41.59-.98 1.05-1.72 1.38s-1.58.5-2.52.5h-6.35V63.99h6.23c.89.0 1.69.16 2.39.47s1.24.75 1.63 1.31c.39.56.58 1.2.58 1.91.0.62-.15 1.17-.44 1.65-.29.48-.7.86-1.21 1.12-.18.0945-.386.1532-.585.21l-.035.01zm-2.8-4.33h-2.75v3.45h2.75c.38.0.72-.08 1.01-.22.3-.14.52-.34.69-.61s.25-.59.25-.93-.09-.64-.25-.89c-.17-.26-.4-.45-.69-.59-.29-.14-.63-.21-1.01-.21zm1.24 9.1c.32-.15.57-.35.75-.62v.02c.18-.27.27-.57.27-.93.0-.36-.09-.68-.27-.96-.18-.28-.44-.5-.76-.65-.33-.15-.7-.23-1.11-.23h-2.87v3.59h2.87c.42.0.8-.07 1.12-.22zm16.56-4.67c-.43.67-1.03 1.2-1.81 1.57h-.01c-.14.07-.3.13-.46.19l3.2 5.48h-3.54l-2.84-5.11h-2.02v5.11h-3.1V63.99h6.14c1.01.0 1.9.18 2.67.55.77.37 1.36.89 1.78 1.56s.63 1.43.63 2.32c0 .89-.21 1.68-.64 2.35zm-3.56-.61c.32-.16.57-.39.74-.68v.01c.17-.29.26-.63.26-1.03s-.09-.74-.26-1.03-.42-.51-.74-.67c-.32-.15-.7-.23-1.13-.23h-2.79v3.87h2.79c.43.0.81-.08 1.13-.24zm5.51 7.85 5.01-14.02h3.36l5.12 14.02h-3.09l-1.06-3.09h-5.2l-.99 3.09h-3.15zm6.46-10.39-1.61 4.95h3.71l-1.72-4.95-.19-.9-.19.9zm11.43 10.39h-3.2V63.99h3.2v14.02zm5.44-14.02 6.02 9.48h.01v-9.48h2.83v14.02h-3.05l-6-9.48v9.48h-2.83V63.99h3.02zm17.78 5.66c.71.13 1.33.4 1.88.79v-.02c.55.4.97.88 1.28 1.47s.46 1.23.46 1.92c0 .85-.23 1.61-.68 2.28-.45.67-1.08 1.2-1.88 1.58-.81.38-1.74.57-2.77.57s-1.95-.19-2.75-.56-1.43-.9-1.89-1.56c-.46-.66-.7-1.44-.71-2.31h3.1c0 .36.1.68.29.96.19.28.46.49.81.64s.75.23 1.18.23.8-.07 1.12-.2c.32-.13.56-.32.74-.57s.27-.53.27-.84c0-.39-.12-.71-.36-.97s-.57-.44-.98-.54l-2.52-.52c-.66-.14-1.24-.39-1.74-.75s-.89-.82-1.16-1.36c-.27-.55-.41-1.16-.41-1.83.0-.84.22-1.58.64-2.23.43-.65 1.02-1.16 1.78-1.53.76-.37 1.62-.55 2.6-.55s1.86.18 2.62.53c.76.35 1.36.84 1.79 1.47.43.62.66 1.35.68 2.16h-3.1c0-.3-.09-.57-.25-.81-.17-.24-.4-.42-.69-.55-.29-.14-.64-.2-1.02-.2s-.72.07-1.01.19-.52.3-.68.52c-.16.23-.24.49-.24.79.0.34.11.61.33.84s.52.38.89.47l2.38.49zm14.38 8.36h-3.2V63.99h3.2v14.02zm7.88-14.02c1.33.0 2.53.31 3.59.91 1.06.61 1.9 1.44 2.5 2.51.61 1.06.91 2.27.91 3.59.0 1.32-.31 2.52-.91 3.59-.6 1.07-1.43 1.9-2.5 2.51s-2.26.91-3.59.91h-5.47V63.99h5.47zm2.01 10.86c.58-.35 1.03-.85 1.34-1.5v-.01c.31-.65.47-1.44.47-2.35s-.16-1.7-.47-2.35c-.31-.65-.76-1.15-1.34-1.5s-1.26-.52-2.05-.52h-2.32v8.75h2.32c.79.0 1.47-.17 2.05-.52zm9.8-2.56v3.02h7.38v2.7h-10.4V63.99h10.2v2.71h-7.18v2.97h6.5v2.62h-6.5z" clip-rule="evenodd"/><path fill="#00d886" d="m48.0521 58.1839 11.8755-.0017c2.2493.0 4.0722-1.8234 4.0722-4.0727V42.6029c0-1.1887-.5196-2.3186-1.422-3.0924L24.4164 6.80068c-.7384-.63244-1.6786-.98037-2.6508-.98037H9.89011c-2.24931.0-4.07273 1.82342-4.07273 4.07273V21.4014c0 1.1887.51957 2.3185 1.42197 3.0924L45.4002 57.203c.7383.633 1.6786.9804 2.6514.9804l5e-4 5e-4z"/><path fill="url(#a)" d="M49.4806 58.1818h10.4465c2.2493.0 4.0728-1.8234 4.0728-4.0727V41.0164c0-.1925-.014-.3851-.0408-.576L58.6815 3.49673C58.3952 1.49062 56.6765.0 54.65.0H38.977c-2.2499.0-4.0733 1.824-4.0727 4.07389l.0047 18.53851c0 .4375.0704.8721.2088 1.2869l10.4995 31.4979c.5545 1.6629 2.1109 2.7846 3.8639 2.7846h-6e-4z"/><path fill="url(#b)" d="M4.07273 64H38.041c1.6291.0 3.1017-.9711 3.7434-2.4681l16.0681-37.4906c.217-.5068.3293-1.0531.3293-1.6046V4.07273C58.1818 1.82342 56.3584.0 54.1091.0h-17.966c-.8046.0-1.5912.238545-2.2609.685382L1.81353 22.0881C.681309 22.8439.001745 24.1146.001745 25.4755L0 59.9273C0 62.1766 1.82342 64 4.07273 64z"/><path fill="#000" d="M52 12H12v40h40V12z"/><path fill="#fff" d="M19.764 31.6245c1.174.6765 2.4847 1.0155 3.9318 1.0155 1.3899.0 2.6427-.3095 3.7589-.9293 1.1231-.6197 2.005-1.4651 2.6461-2.5384.6481-1.0798.9721-2.2857.9721-3.6183v-1.1879h-6.405v2.3221h3.516c-.0722.5605-.2761 1.0718-.6106 1.5339-.3958.5468-.9322.9762-1.6092 1.2852-.6701.3096-1.4188.4646-2.2469.4646-.8928.0-1.6988-.2227-2.4193-.6695-.7204-.4467-1.2857-1.0583-1.6959-1.836-.4034-.784-.6047-1.667-.6047-2.6461.0-.979.2013-1.858.6047-2.6357.4108-.7846.9761-1.4003 1.6959-1.847.7199-.4467 1.5265-.6695 2.4193-.6695.6053.0 1.1706.0972 1.696.2916.526.1875.9831.4577 1.372.8101.3958.3455.7094.7563.9397 1.2314h3.1542c-.2737-.9866-.7529-1.8575-1.4368-2.6137-.677-.7563-1.5126-1.3436-2.5061-1.7608-.9866-.4172-2.0669-.6267-3.2404-.6267-1.4477.0-2.7583.3414-3.9318 1.0259-1.1741.6765-2.0959 1.6133-2.7653 2.8082-.6695 1.1879-1.0046 2.5165-1.0046 3.9856.0 1.4692.3351 2.8018 1.0046 3.9967.67 1.1879 1.5918 2.1236 2.7653 2.8081z"/><path fill="#fff" fill-rule="evenodd" d="M36.1829 31.6245c1.181.6765 2.4951 1.0155 3.9422 1.0155 1.4541.0 2.7688-.339 3.9423-1.0155 1.181-.6845 2.1062-1.6202 2.7757-2.8081.6695-1.1949 1.0045-2.5275 1.0045-3.9967.0-1.4691-.335-2.7977-1.0045-3.9856-.6695-1.1949-1.5947-2.1317-2.7757-2.8082C42.8939 17.3414 41.5723 17 40.1251 17c-1.4471.0-2.7612.3414-3.9422 1.0259-1.1735.6765-2.0988 1.6133-2.7758 2.8082-.6695 1.1879-1.0045 2.5165-1.0045 3.9856.0 1.4692.335 2.8018 1.0045 3.9967.6765 1.1879 1.6023 2.1236 2.7758 2.8081zm6.3621-2.2463c-.7129.4468-1.516.6695-2.4089.6695-.8928.0-1.6994-.2227-2.4193-.6695-.7128-.4536-1.2747-1.0756-1.685-1.8684-.4033-.7991-.6046-1.696-.6046-2.6895.0-.9935.2013-1.8858.6046-2.6785.4103-.7991.9722-1.4217 1.685-1.8684.7199-.4537 1.5265-.6805 2.4193-.6805.8929.0 1.696.2268 2.4089.6805.7129.4467 1.2707 1.0693 1.674 1.8684.4033.7921.6047 1.685.6047 2.6785s-.2014 1.8904-.6047 2.6895c-.4033.7922-.9611 1.4148-1.674 1.8684z" clip-rule="evenodd"/><path fill="#fff" d="M16.9941 44h16v3h-16v-3z"/></svg></div></a></div><div class=max-w-64 style=background-color:#4e4f4f><a href="https://bep.is/en/hugo-sponsor-2023-01/?utm_campaign=hugosponsor&utm_content=gohugoio&utm_medium=banner&utm_source=hugofooter" title="Your Company?" class="group inline-block w-full h-full shadow-md dark:shadow-gray-600" style=color:#fff;font-weight:700;text-decoration:none;text-align:center><div class="flex w-full h-full p-8 items-center justify-center content-center transition duration-500 hover:scale-105 invisible group-hover:visible"><span class="text-4xl font-bold text-white">Your Company?</span></div></a></div></div></div></div></div><div class="mt-16 border-t border-white/10 pt-8 sm:mt-20 lg:mt-24"><p class="text-sm/6 text-gray-200">The Hugo logos are copyright © Steve Francia 2013–2025. The Hugo Gopher is based on an original work by Renée French.</p></div></div></footer></body></html>