How do images actually work?

[johnnymatthews]

I've got the following file structure:

content
  en
    docs
      level-one-folder
        _index.md
        yolo.md
        yolo.png

Inside yolo.md is the following line:

{{< img-simple src="yolo.png" alt="Square" class="border-0 rounded-circle" >}}

When I try to run npm run start I get the following error:

Error: Error building site: "/home/johnny/Temp/my-doks-site/content/en/docs/level-one-folder/yolo.md:18:1": failed to render shortcode "img-simple": failed to process shortcode: "/home/johnny/Temp/my-doks-site/layouts/shortcodes/img-simple.html:2:18": execute of template failed: template: shortcodes/img-simple.html:2:18: executing "shortcodes/img-simple.html" at <$image.Resize>: nil pointer evaluating resource.Resource.Resize

Even trying to load yolo.png using the standard markdown syntax doesn't work. I also ran npm run clear, but that didn't help. I'm all out of ideas.

[h-enk]

Place your images in a page bundle, like so:

..
├── blog/
│   ├── say-hello-to-doks/
│   │   ├── index.md
│   │   └── say-hello-to-doks.png
│   └── _index.md
└── _index.md

See also the Hugo docs: Page Bundles

Note: The images functionality also works now (093ab04) when using markdown for images — making it portable.

[johnnymatthews]

Oh I see! So in your example say-hello-to-doks/ is the name of the blog post, and everything below that directory contains the content of said post. Gotcha.

[Realvincentyuan]

Hi @h-enk,

thanks for the update! The image embedded with markdown has a few issues per my observations:

• smallLimit param does not seem to work as images exceed the post area like below
  
• it is not elegant and handy to center the image and caption

Hopefully, image links can be used to embed images on top of bundle as that will be much easier for migration from other framework, e.g. I am using mkdocs and want to migrate to HUGO while image reference is a huge blocker for now :(

Thanks for your advice and update!

[newhinton]

Is it possible to use those links outside of bundles? I (want to) use doks to generate a wiki from a set of markdown files from a different program, but most dont create bundles but "just" resolve images. Automatically creating bundles will be impossible, but i can move resources like images around freely. Is there a solution for me?

[h-enk]

Yes, it's possible to reference images in e.g. the ./assets/ directory.

If using Doks 0.5.0, see:

• https://github.com/h-enk/hyas-images/tree/v0.2.2, and
• https://github.com/danielfdickinson/image-handling-mod-hugo-dfd

If using Doks 1.0.0 (which will be released soon, including documentation), see (until then):

• https://github.com/h-enk/hyas-images
• https://github.com/hugo-mods/lazyimg

[drwilkins]

So can markdown syntax be used to refer to images in the root/images folder? or do images always need to be supplied in a bundle (in the same folder as the markdown file)?

[h-enk]

So can markdown syntax be used to refer to images in the root/images folder? or do images always need to be supplied in a bundle (in the same folder as the markdown file)?

Currently, images need to be part of a page bundle. I've put extending processing from other locations on the list for the next release: #502

[drwilkins]

Excellent, thank you.

…

On Mon, Oct 11, 2021, 1:15 AM Henk Verlinde ***@***.***> wrote: So can markdown syntax be used to refer to images in the root/images folder? or do images always need to be supplied in a bundle (in the same folder as the markdown file)? Currently, images need to be part of a page bundle. I've put extending processing from other locations on the list for the next release: #502 <#502> — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#470 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABOQ6UBYJPUABST26REVZKDUGJ6JPANCNFSM5ESZJCHA> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

[binnyg]

@johnnymatthews so what does your final folder/file structure look like and would you mind sharing the md file syntax for the image? I have been struggling with this for a day now and still can't make it work.

[johnnymatthews]

Here's a folder in a repo that should help you out: https://github.com/filecoin-project/lotus-docs/tree/feat/decouple-from-fil-docs/content/en/docs/tutorials/store-and-retrieve

Essentially, my structure looks something like this:

~/project
    /content
        /en
            /docs
                /tutorials
                    /store-and-retrieve-tutorial
                        index.md
                        image.png

Then, inside index.md I'll have something like:

# Example

Lorem ipsum.

![Image alt text](./image.png)

[binnyg]

Thank you

[shernshiou]

Hi, I am using page bundle.

~/project
    /content
        /en
            /docs
                /tutorials
                    /store-and-retrieve-tutorial
                        index.md
                        image.png

At index.md, this works {{< img-simple src="image.png" alt="Some Image" >}} but when using markdown tag ![Some Image](./image.png) the image is blurry.

[h-enk]

What about ![Some Image](image.png)? See also https://getdoks.org/docs/recipes/images/#markdown

[shernshiou]

Sorry for the late reply.

As you can see from the following image, the top one is using ![diagram](unsplash.jpg) while the bottom is using {{< img-simple src="unsplash.jpg" alt="Root Account Diagram" >}}