Help to insert and resize an image link from markdown into Hugo

support
1

Hello all. So I am still new to Hugo, and just trying to figure out my toolchain. I am working on a more mathematical blog that will have some plots and figures, etc. I am generating the plots in a markdown file using codebraid, which will then give me a corresponding output with the image/figure link in markdown format, like ![](images/myimage.png). The problem is that this does not give me a way to resize the image if it is too small or to center the image.

So I was reading through the Hugo docs on shortcodes and also a number of blog posts/forum posts on this question. The problem is that there are a number of different suggestions, and I am not familiar enough with Hugo to figure out which is a good answer.

What I would like to do, is have the images in the same folder as my post itself. And then I would create a link in the markdown post that sets the image size and centering.

So the folder would look like:

  • content
    • my_new_post
      -images
      -my_image.png
      -my_post.md

So in the actual post markdown, I imagine I need some kind of code to tell Hugo how to handle that image. I am not sure if I should use a shortcode, or if I should just hand code the HTML tags? I will have to use some python script to pull the original link in its markdown format, and then reformat that into the corresponding code, etc. Can anyone tell me whether I should use a shortcode or straight HTML, and how to setup this code. I can write the script, but I am uncertain about how to write the Hugo stuff. Thanks.

2

If you want/need to use standard markdown and all the images should be processed in the same way I would use Render Hooks. You can create render hooks for images, links, headers and codeblock.

A more flexible solution are Shortcodes. There are some built in shortcodes and you can also create as many custom ones as you need.

Here are some example shortcodes from my own Zen theme.

Manual HTML works but I avoid it, hard to write and a lot more work the day you want to update the output.

1 Like
3

This is the option I went for since it allows your markdown links to work cross platform (e.g. if you switch from Hugo to another SSG).

1 Like