CINXE.COM
Markdown-style images with full path when baseurl includes subdirectory - #2 by jmooring - support - HUGO
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Markdown-style images with full path when baseurl includes subdirectory - #2 by jmooring - support - HUGO</title> <meta name="description" content="Hi, I might have hit an edge-case that I can’t find out how to resolve when using images. Here’s what I’m trying to accomplish for our documentation site: I have a bunch of screenshots in leaf bundles (like content/a/i&hellip;"> <meta name="generator" content="Discourse 3.4.0.beta3-dev - https://github.com/discourse/discourse version 5bf5d1335680f28a8eb65c488353be9585eed08e"> <link rel="icon" type="image/png" href="https://global.discourse-cdn.com/flex036/uploads/gohugo/optimized/2X/6/66a05218f64425b2fa59ede30c1b4b7dc1fdf5f9_2_32x32.ico"> <link rel="apple-touch-icon" type="image/png" href="https://global.discourse-cdn.com/flex036/uploads/gohugo/optimized/2X/c/c2d3414c64e766d814100b32063948e604298a70_2_180x180.png"> <meta name="theme-color" media="all" content="#0a1922"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=yes, viewport-fit=cover"> <link rel="canonical" href="https://discourse.gohugo.io/t/markdown-style-images-with-full-path-when-baseurl-includes-subdirectory/52487" /> <link rel="search" type="application/opensearchdescription+xml" href="https://discourse.gohugo.io/opensearch.xml" title="HUGO Search"> <link href="https://yyz2.discourse-cdn.com/flex036/stylesheets/color_definitions_hugo-light_1_3_09733212c5bcbf3d2262e9135364889a94410a8e.css?__ws=discourse.gohugo.io" media="all" rel="stylesheet" class="light-scheme"/> <link href="https://yyz2.discourse-cdn.com/flex036/stylesheets/desktop_d02c2ac443d5119470bb87ccc1761df2dc8dc4ce.css?__ws=discourse.gohugo.io" media="all" rel="stylesheet" data-target="desktop" /> <link href="https://yyz2.discourse-cdn.com/flex036/stylesheets/checklist_d02c2ac443d5119470bb87ccc1761df2dc8dc4ce.css?__ws=discourse.gohugo.io" media="all" rel="stylesheet" data-target="checklist" /> <link href="https://yyz2.discourse-cdn.com/flex036/stylesheets/discourse-adplugin_d02c2ac443d5119470bb87ccc1761df2dc8dc4ce.css?__ws=discourse.gohugo.io" media="all" rel="stylesheet" data-target="discourse-adplugin" /> <link href="https://yyz2.discourse-cdn.com/flex036/stylesheets/discourse-ai_d02c2ac443d5119470bb87ccc1761df2dc8dc4ce.css?__ws=discourse.gohugo.io" media="all" rel="stylesheet" data-target="discourse-ai" /> <link href="https://yyz2.discourse-cdn.com/flex036/stylesheets/discourse-akismet_d02c2ac443d5119470bb87ccc1761df2dc8dc4ce.css?__ws=discourse.gohugo.io" media="all" rel="stylesheet" data-target="discourse-akismet" /> <link href="https://yyz2.discourse-cdn.com/flex036/stylesheets/discourse-cakeday_d02c2ac443d5119470bb87ccc1761df2dc8dc4ce.css?__ws=discourse.gohugo.io" media="all" rel="stylesheet" data-target="discourse-cakeday" /> <link href="https://yyz2.discourse-cdn.com/flex036/stylesheets/discourse-details_d02c2ac443d5119470bb87ccc1761df2dc8dc4ce.css?__ws=discourse.gohugo.io" media="all" rel="stylesheet" data-target="discourse-details" /> <link href="https://yyz2.discourse-cdn.com/flex036/stylesheets/discourse-lazy-videos_d02c2ac443d5119470bb87ccc1761df2dc8dc4ce.css?__ws=discourse.gohugo.io" media="all" rel="stylesheet" data-target="discourse-lazy-videos" /> <link href="https://yyz2.discourse-cdn.com/flex036/stylesheets/discourse-local-dates_d02c2ac443d5119470bb87ccc1761df2dc8dc4ce.css?__ws=discourse.gohugo.io" media="all" rel="stylesheet" data-target="discourse-local-dates" /> <link href="https://yyz2.discourse-cdn.com/flex036/stylesheets/discourse-narrative-bot_d02c2ac443d5119470bb87ccc1761df2dc8dc4ce.css?__ws=discourse.gohugo.io" media="all" rel="stylesheet" data-target="discourse-narrative-bot" /> <link href="https://yyz2.discourse-cdn.com/flex036/stylesheets/discourse-presence_d02c2ac443d5119470bb87ccc1761df2dc8dc4ce.css?__ws=discourse.gohugo.io" media="all" rel="stylesheet" data-target="discourse-presence" /> <link href="https://yyz2.discourse-cdn.com/flex036/stylesheets/discourse-solved_d02c2ac443d5119470bb87ccc1761df2dc8dc4ce.css?__ws=discourse.gohugo.io" media="all" rel="stylesheet" data-target="discourse-solved" /> <link href="https://yyz2.discourse-cdn.com/flex036/stylesheets/footnote_d02c2ac443d5119470bb87ccc1761df2dc8dc4ce.css?__ws=discourse.gohugo.io" media="all" rel="stylesheet" data-target="footnote" /> <link href="https://yyz2.discourse-cdn.com/flex036/stylesheets/hosted-site_d02c2ac443d5119470bb87ccc1761df2dc8dc4ce.css?__ws=discourse.gohugo.io" media="all" rel="stylesheet" data-target="hosted-site" /> <link href="https://yyz2.discourse-cdn.com/flex036/stylesheets/poll_d02c2ac443d5119470bb87ccc1761df2dc8dc4ce.css?__ws=discourse.gohugo.io" media="all" rel="stylesheet" data-target="poll" /> <link href="https://yyz2.discourse-cdn.com/flex036/stylesheets/spoiler-alert_d02c2ac443d5119470bb87ccc1761df2dc8dc4ce.css?__ws=discourse.gohugo.io" media="all" rel="stylesheet" data-target="spoiler-alert" /> <link href="https://yyz2.discourse-cdn.com/flex036/stylesheets/discourse-ai_desktop_d02c2ac443d5119470bb87ccc1761df2dc8dc4ce.css?__ws=discourse.gohugo.io" media="all" rel="stylesheet" data-target="discourse-ai_desktop" /> <link href="https://yyz2.discourse-cdn.com/flex036/stylesheets/poll_desktop_d02c2ac443d5119470bb87ccc1761df2dc8dc4ce.css?__ws=discourse.gohugo.io" media="all" rel="stylesheet" data-target="poll_desktop" /> <link href="https://yyz2.discourse-cdn.com/flex036/stylesheets/desktop_theme_2_554e2f649b5332218939d027878568e9fb5cb3e9.css?__ws=discourse.gohugo.io" media="all" rel="stylesheet" data-target="desktop_theme" data-theme-id="2" data-theme-name="custom header links"/> <link href="https://yyz2.discourse-cdn.com/flex036/stylesheets/desktop_theme_3_ba320989966c049743dec43ab8cc84324bf2a254.css?__ws=discourse.gohugo.io" media="all" rel="stylesheet" data-target="desktop_theme" data-theme-id="3" data-theme-name="hugo light"/> <meta id="data-ga-universal-analytics" data-tracking-code="UA-7131036-7" data-json="{"cookieDomain":"auto"}" data-auto-link-domains=""> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-7131036-7" nonce="oGFcbeBXqzglNEiJdlsAVC4Ol"></script> <script defer src="https://global.discourse-cdn.com/flex036/assets/google-universal-analytics-v4-e154af4adb3c483a3aba7f9a7229b8881cdc5cf369290923d965a2ad30163ae8.gz.js" data-discourse-entrypoint="google-universal-analytics-v4" nonce="oGFcbeBXqzglNEiJdlsAVC4Ol"></script> <link rel="alternate nofollow" type="application/rss+xml" title="RSS feed of 'Markdown-style images with full path when baseurl includes subdirectory'" href="https://discourse.gohugo.io/t/markdown-style-images-with-full-path-when-baseurl-includes-subdirectory/52487.rss" /> <meta property="og:site_name" content="HUGO" /> <meta property="og:type" content="website" /> <meta name="twitter:card" content="summary" /> <meta name="twitter:image" content="https://global.discourse-cdn.com/flex036/uploads/gohugo/original/2X/b/b91c8ab3a3c1c8679127cf049b46fa919e9e0e5c.png" /> <meta property="og:image" content="https://global.discourse-cdn.com/flex036/uploads/gohugo/original/2X/b/b91c8ab3a3c1c8679127cf049b46fa919e9e0e5c.png" /> <meta property="og:url" content="https://discourse.gohugo.io/t/markdown-style-images-with-full-path-when-baseurl-includes-subdirectory/52487/2" /> <meta name="twitter:url" content="https://discourse.gohugo.io/t/markdown-style-images-with-full-path-when-baseurl-includes-subdirectory/52487/2" /> <meta property="og:title" content="Markdown-style images with full path when baseurl includes subdirectory" /> <meta name="twitter:title" content="Markdown-style images with full path when baseurl includes subdirectory" /> <meta property="og:description" content="Images related to a single page should be placed in a page bundle: content/ ├── posts/ │ ├── post-1/ │ │ ├── c.jpg <-- page resource │ │ ├── d.jpg <-- page resource │ │ └── index.md │ ├── post-2.md │ └── _index.md └── _index.md Images that can be used anywhere on the site should be placed in the assets directory: assets/ └── images/ ├── a.jpg <-- global resource └── b.jpg <-- global resource To make this approach work with Markdown image destinations, enable Hug..." /> <meta name="twitter:description" content="Images related to a single page should be placed in a page bundle: content/ ├── posts/ │ ├── post-1/ │ │ ├── c.jpg <-- page resource │ │ ├── d.jpg <-- page resource │ │ └── index.md │ ├── post-2.md │ └── _index.md └── _index.md Images that can be used anywhere on the site should be placed in the assets directory: assets/ └── images/ ├── a.jpg <-- global resource └── b.jpg <-- global resource To make this approach work with Markdown image destinations, enable Hug..." /> <meta property="og:article:section" content="support" /> <meta property="og:article:section:color" content="652D90" /> <meta property="article:published_time" content="2024-11-21T16:26:39+00:00" /> <meta property="og:ignore_canonical" content="true" /> <script type="application/ld+json">{"@context":"http://schema.org","@type":"QAPage","name":"Markdown-style images with full path when baseurl includes subdirectory","mainEntity":{"@type":"Question","name":"Markdown-style images with full path when baseurl includes subdirectory","text":"Hi, I might have hit an edge-case that I can’t find out how to resolve when using images. Here’s what I’m trying to accomplish for our documentation site:\n\nI have a bunch of screenshots in leaf bundles (like content/a/image.jpg)\n\nI’d like to include them in the content, preferably using markdown-sty…","upvoteCount":0,"answerCount":1,"datePublished":"2024-11-21T09:57:17.676Z","author":{"@type":"Person","name":"fekete-robert","url":"https://discourse.gohugo.io/u/fekete-robert"},"acceptedAnswer":{"@type":"Answer","text":"Images related to a single page should be placed in a page bundle:\n\ncontent/\n\n├── posts/\n\n│ ├── post-1/\n\n│ │ ├── c.jpg <-- page resource\n\n│ │ ├── d.jpg <-- page resource\n\n│ │ └── index.md\n\n│ ├── post-2.md\n\n│ └── _index.md\n\n└── _index.md\n\nImages that can be used anywhere on the site shoul…","upvoteCount":1,"datePublished":"2024-11-21T16:26:39.394Z","url":"https://discourse.gohugo.io/t/markdown-style-images-with-full-path-when-baseurl-includes-subdirectory/52487/2","author":{"@type":"Person","name":"jmooring","url":"https://discourse.gohugo.io/u/jmooring"}}}}</script> </head> <body class="crawler browser-update"> <script defer="" src="https://yyz2.discourse-cdn.com/flex036/theme-javascripts/417061e7eee24be4fb6a457975f0dce96a82d9e6.js?__ws=discourse.gohugo.io" data-theme-id="5" nonce="oGFcbeBXqzglNEiJdlsAVC4Ol"></script> <header> <a href="/"> HUGO </a> </header> <div id="main-outlet" class="wrap" role="main"> <div id="topic-title"> <h1> <a href="/t/markdown-style-images-with-full-path-when-baseurl-includes-subdirectory/52487">Markdown-style images with full path when baseurl includes subdirectory</a> </h1> <div class="topic-category" itemscope itemtype="http://schema.org/BreadcrumbList"> <span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> <a href="/c/support/34" class="badge-wrapper bullet" itemprop="item"> <span class='badge-category-bg' style='background-color: #652D90'></span> <span class='badge-category clear-badge'> <span class='category-name' itemprop='name'>support</span> </span> </a> <meta itemprop="position" content="1" /> </span> </div> </div> <div itemscope itemtype='http://schema.org/DiscussionForumPosting'> <meta itemprop='headline' content='Markdown-style images with full path when baseurl includes subdirectory'> <link itemprop='url' href='https://discourse.gohugo.io/t/markdown-style-images-with-full-path-when-baseurl-includes-subdirectory/52487'> <meta itemprop='datePublished' content='2024-11-21T09:57:17Z'> <meta itemprop='articleSection' content='support'> <meta itemprop='keywords' content=''> <div itemprop='publisher' itemscope itemtype="http://schema.org/Organization"> <meta itemprop='name' content='HUGO'> </div> <span itemprop='author' itemscope itemtype="http://schema.org/Person"> <meta itemprop='name' content='fekete-robert'> <link itemprop='url' href='https://discourse.gohugo.io/u/fekete-robert'> </span> <meta itemprop='text' content='Hi, I might have hit an edge-case that I can’t find out how to resolve when using images. Here’s what I’m trying to accomplish for our documentation site: I have a bunch of screenshots in leaf bundles (like content/a/i&hellip;'> <div id='post_2' itemprop='comment' itemscope itemtype='http://schema.org/Comment' class='topic-body crawler-post'> <div class='crawler-post-meta'> <span class="creator" itemprop="author" itemscope itemtype="http://schema.org/Person"> <a itemprop="url" href='https://discourse.gohugo.io/u/jmooring'><span itemprop='name'>jmooring</span></a> </span> <span class="crawler-post-infos"> <time itemprop='datePublished' datetime='2024-11-21T16:26:39Z' class='post-time'> November 21, 2024, 4:26pm </time> <meta itemprop='dateModified' content='2024-11-21T17:56:15Z'> <span itemprop='position'>2</span> </span> </div> <div class='post' itemprop='text'> <p>Images related to a single page should be placed in a page bundle:</p> <pre><code class="lang-plaintext">content/ ├── posts/ │ ├── post-1/ │ │ ├── c.jpg <-- page resource │ │ ├── d.jpg <-- page resource │ │ └── index.md │ ├── post-2.md │ └── _index.md └── _index.md </code></pre> <p>Images that can be used anywhere on the site should be placed in the assets directory:</p> <pre><code class="lang-plaintext">assets/ └── images/ ├── a.jpg <-- global resource └── b.jpg <-- global resource </code></pre> <p>To make this approach work with Markdown image destinations, enable Hugo’s embedded <a href="https://gohugo.io/render-hooks/links/#default">link</a> and <a href="https://gohugo.io/render-hooks/images/#default">image</a> render hooks in your site configuration:</p> <pre><code class="lang-plaintext">[markup.goldmark.renderHooks.image] enableDefault = true [markup.goldmark.renderHooks.link] enableDefault = true </code></pre> <p>The content/posts/post-1/index.md file would look something like this:</p> <pre><code class="lang-plaintext">  </code></pre> <p>Note that Hugo’s embedded link and image render hooks are automatically enabled for multilingual single-host sites.</p> <p>Working example:</p> <pre><code class="lang-plaintext">git clone --single-branch -b hugo-forum-topic-52487 https://github.com/jmooring/hugo-testing hugo-forum-topic-52487 cd hugo-forum-topic-52487 hugo server </code></pre> <hr> <p>This approach, which in my view should be used on every Hugo site<sup class="footnote-ref"><a href="#footnote-171548-1" id="footnote-ref-171548-1">[1]</a></sup>, satisfies <span class="hashtag-raw">#1</span>, <span class="hashtag-raw">#2</span>, <span class="hashtag-raw">#3</span>, and <span class="hashtag-raw">#5</span> in your initial post. Images that are referenced in two or more content files must be placed in the assets directory. In addition to being a technical requirement, this prevents content and site authors from inadvertently breaking image links by doing things like:</p> <ul> <li>Deleting an image from the Page A bundle because they don’t know or remember that it is also used in Page B</li> <li>Making an image from the Page A bundle inaccessible from other pages by setting <code>draft = true</code>, setting a future publishing date, setting an expiry date, deleting the bundle, etc.</li> </ul> <hr class="footnotes-sep"> <ol class="footnotes-list"> <li id="footnote-171548-1" class="footnote-item"><p>As noted above, we automatically enable the embedded link and render hooks for multilingual single-host sites. <a href="#footnote-ref-171548-1" class="footnote-backref">↩︎</a></p> </li> </ol> </div> <div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter"> <meta itemprop="interactionType" content="http://schema.org/LikeAction"/> <meta itemprop="userInteractionCount" content="1" /> <span class='post-likes'>1 Like</span> </div> <div class='crawler-linkback-list' itemscope itemtype='http://schema.org/ItemList'> <div itemprop='itemListElement' itemscope itemtype='http://schema.org/ListItem'> <a itemprop='url' href="https://discourse.gohugo.io/t/how-to-properly-link-images-in-blog-posts/52537/2">How to properly link images in blog posts?</a> <meta itemprop='position' content='3'> </div> </div> </div> </div> <div role='navigation' itemscope itemtype='http://schema.org/SiteNavigationElement' class="topic-body crawler-post"> <span itemprop='name'> <a itemprop="url" href="/t/markdown-style-images-with-full-path-when-baseurl-includes-subdirectory/52487#post_2">show post in topic</a> </span> </div> <div id="related-topics" class="more-topics__list " role="complementary" aria-labelledby="related-topics-title"> <h3 id="related-topics-title" class="more-topics__list-title"> Related topics </h3> <div class="topic-list-container" itemscope itemtype='http://schema.org/ItemList'> <meta itemprop='itemListOrder' content='http://schema.org/ItemListOrderDescending'> <table class='topic-list'> <thead> <tr> <th>Topic</th> <th></th> <th class="replies">Replies</th> <th class="views">Views</th> <th>Activity</th> </tr> </thead> <tbody> <tr class="topic-list-item" id="topic-list-item-1721"> <td class="main-link" itemprop='itemListElement' itemscope itemtype='http://schema.org/ListItem'> <meta itemprop='position' content='1'> <span class="link-top-line"> <a itemprop='url' href='https://discourse.gohugo.io/t/image-path/1721' class='title raw-link raw-topic-link'>Image path</a> </span> <div class="link-bottom-line"> <a href='/c/support/34' class='badge-wrapper bullet'> <span class='badge-category-bg' style='background-color: #652D90'></span> <span class='badge-category clear-badge'> <span class='category-name'>support</span> </span> </a> <div class="discourse-tags"> </div> </div> </td> <td class="replies"> <span class='posts' title='posts'>14</span> </td> <td class="views"> <span class='views' title='views'>60520</span> </td> <td> November 26, 2019 </td> </tr> <tr class="topic-list-item" id="topic-list-item-20059"> <td class="main-link" itemprop='itemListElement' itemscope itemtype='http://schema.org/ListItem'> <meta itemprop='position' content='2'> <span class="link-top-line"> <a itemprop='url' href='https://discourse.gohugo.io/t/refer-to-static-images-from-post/20059' class='title raw-link raw-topic-link'>Refer to static images from post</a> </span> <div class="link-bottom-line"> <a href='/c/support/34' class='badge-wrapper bullet'> <span class='badge-category-bg' style='background-color: #652D90'></span> <span class='badge-category clear-badge'> <span class='category-name'>support</span> </span> </a> <div class="discourse-tags"> </div> </div> </td> <td class="replies"> <span class='posts' title='posts'>3</span> </td> <td class="views"> <span class='views' title='views'>1435</span> </td> <td> August 7, 2019 </td> </tr> <tr class="topic-list-item" id="topic-list-item-14989"> <td class="main-link" itemprop='itemListElement' itemscope itemtype='http://schema.org/ListItem'> <meta itemprop='position' content='3'> <span class="link-top-line"> <a itemprop='url' href='https://discourse.gohugo.io/t/relative-image-paths-in-hugo-in-markdowns-files/14989' class='title raw-link raw-topic-link'>Relative image paths in Hugo in markdowns files</a> </span> <div class="link-bottom-line"> <a href='/c/support/34' class='badge-wrapper bullet'> <span class='badge-category-bg' style='background-color: #652D90'></span> <span class='badge-category clear-badge'> <span class='category-name'>support</span> </span> </a> <div class="discourse-tags"> </div> </div> </td> <td class="replies"> <span class='posts' title='posts'>2</span> </td> <td class="views"> <span class='views' title='views'>2399</span> </td> <td> October 30, 2018 </td> </tr> <tr class="topic-list-item" id="topic-list-item-21649"> <td class="main-link" itemprop='itemListElement' itemscope itemtype='http://schema.org/ListItem'> <meta itemprop='position' content='4'> <span class="link-top-line"> <a itemprop='url' href='https://discourse.gohugo.io/t/images-alongside-content/21649' class='title raw-link raw-topic-link'>Images alongside content</a> </span> <div class="link-bottom-line"> <a href='/c/support/34' class='badge-wrapper bullet'> <span class='badge-category-bg' style='background-color: #652D90'></span> <span class='badge-category clear-badge'> <span class='category-name'>support</span> </span> </a> <div class="discourse-tags"> </div> </div> </td> <td class="replies"> <span class='posts' title='posts'>2</span> </td> <td class="views"> <span class='views' title='views'>1031</span> </td> <td> November 27, 2019 </td> </tr> <tr class="topic-list-item" id="topic-list-item-21980"> <td class="main-link" itemprop='itemListElement' itemscope itemtype='http://schema.org/ListItem'> <meta itemprop='position' content='5'> <span class="link-top-line"> <a itemprop='url' href='https://discourse.gohugo.io/t/markdown-syntax-image-path-readable-by-both-editor-hugo/21980' class='title raw-link raw-topic-link'>Markdown syntax image PATH readable by both editor & Hugo</a> </span> <div class="link-bottom-line"> <a href='/c/support/34' class='badge-wrapper bullet'> <span class='badge-category-bg' style='background-color: #652D90'></span> <span class='badge-category clear-badge'> <span class='category-name'>support</span> </span> </a> <div class="discourse-tags"> </div> </div> </td> <td class="replies"> <span class='posts' title='posts'>1</span> </td> <td class="views"> <span class='views' title='views'>828</span> </td> <td> November 27, 2019 </td> </tr> </tbody> </table> </div> </div> </div> <footer class="container wrap"> <nav class='crawler-nav'> <ul> <li itemscope itemtype='http://schema.org/SiteNavigationElement'> <span itemprop='name'> <a href='/' itemprop="url">Home </a> </span> </li> <li itemscope itemtype='http://schema.org/SiteNavigationElement'> <span itemprop='name'> <a href='/categories' itemprop="url">Categories </a> </span> </li> <li itemscope itemtype='http://schema.org/SiteNavigationElement'> <span itemprop='name'> <a href='/guidelines' itemprop="url">Guidelines </a> </span> </li> <li itemscope itemtype='http://schema.org/SiteNavigationElement'> <span itemprop='name'> <a href='/tos' itemprop="url">Terms of Service </a> </span> </li> <li itemscope itemtype='http://schema.org/SiteNavigationElement'> <span itemprop='name'> <a href='/privacy' itemprop="url">Privacy Policy </a> </span> </li> </ul> </nav> <p class='powered-by-link'>Powered by <a href="https://www.discourse.org">Discourse</a>, best viewed with JavaScript enabled</p> </footer> <div class="buorg"><div>Unfortunately, <a href="https://www.discourse.org/faq/#browser">your browser is unsupported</a>. Please <a href="https://browsehappy.com">switch to a supported browser</a> to view rich content, log in and reply.</div></div> </body> </html>