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

**URL:** <https://discourse.gohugo.io/t/help-to-insert-and-resize-an-image-link-from-markdown-into-hugo/38869>\
**Category:** support\
**Created:** [May 31, 2022, 3:34am UTC](https://discourse.gohugo.io/t/help-to-insert-and-resize-an-image-link-from-markdown-into-hugo/38869 "2022-05-31T03:34:53Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![00krishna](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/00krishna/32/14017_2.png) [@00krishna](https://discourse.gohugo.io/u/00krishna)\
**Post date:** [May 31, 2022, 3:34am UTC](https://discourse.gohugo.io/t/help-to-insert-and-resize-an-image-link-from-markdown-into-hugo/38869/1 "2022-05-31T03:34:53Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![frjo](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/frjo/32/18626_2.png) [@frjo](https://discourse.gohugo.io/u/frjo)\
**Post date:** [May 31, 2022, 6:27am UTC](https://discourse.gohugo.io/t/help-to-insert-and-resize-an-image-link-from-markdown-into-hugo/38869/2 "2022-05-31T06:27:37Z")

</div>

If you want/need to use standard markdown and all the images should be processed in the same way I would use [Render Hooks](https://gohugo.io/templates/render-hooks/#readout). You can create render hooks for images, links, headers and codeblock.

A more flexible solution are [Shortcodes](https://gohugo.io/content-management/shortcodes/#readout). There are some built in shortcodes and you can also create as many custom ones as you need.

Here are some example [shortcodes](https://github.com/frjo/hugo-theme-zen/tree/main/layouts/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.

---

<div class="post-metadata">

**Author:** ![tut](https://avatars.discourse-cdn.com/v4/letter/t/e95f7d/32.png) [@tut](https://discourse.gohugo.io/u/tut)\
**Post date:** [May 31, 2022, 7:39am UTC](https://discourse.gohugo.io/t/help-to-insert-and-resize-an-image-link-from-markdown-into-hugo/38869/3 "2022-05-31T07:39:32Z")

</div>

> [@frjo](#):
>
> If you want/need to use standard markdown and all the images should be processed in the same way I would use [Render Hooks](https://gohugo.io/templates/render-hooks/#readout).

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).