# Images management in a hugo website

**URL:** <https://discourse.gohugo.io/t/images-management-in-a-hugo-website/20802>\
**Category:** support\
**Created:** [September 15, 2019, 3:49pm UTC](https://discourse.gohugo.io/t/images-management-in-a-hugo-website/20802 "2019-09-15T15:49:11Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![mathieun7](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/mathieun7/32/9563_2.png) [@mathieun7](https://discourse.gohugo.io/u/mathieun7)\
**Post date:** [September 15, 2019, 3:49pm UTC](https://discourse.gohugo.io/t/images-management-in-a-hugo-website/20802/1 "2019-09-15T15:49:11Z")

</div>

Hello there !

My post was first about the fact that Hugo used the /layouts/\_defaults/ HTML files for the build, but I finally spotted my mistake. So I edit this post to ask some advices about images management.  
It is great to write articles using only Markdown, I love this ! But when it comes to insert pictures in a post, I only know the ![image]image\_url.jpg tag.  
I’m lost when I want to do something more : where do I have to work if I want to display some pictures in thumbnails ? Thumbnails with a link to the fullsize picture ?  
I tried to center a picture but Hugo puts it in a `<p>` tag and the CSS `margin: auto;` doesn’t work, and I can’t find any selector to apply a property to the `<p>` tags which contains `<img>` tags…

Well I’m lost, and since I’m new in Hugo, I tried to understand the [Docs](https://gohugo.io/content-management/image-processing/#readout) but it doesn’t helps me, actually I don’t even understand where I can add some of the codes in the page… So I’m here to ask you advices !

Thanks a lot,

M.

for example : You can see in [this page](https://compassionate-ardinghelli-6472ed.netlify.com/articles/deuxieme-article/) that the image is not centered. Hugo automatically place it in a `<p>` tag and I don’t know how I can manage the images display (centered ? thumbnail ? thumbnail + link to full size ?). I read the doc but it’s hard to understand.

---

<div class="post-metadata">

**Author:** ![ju52](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/ju52/32/6749_2.png) [@ju52](https://discourse.gohugo.io/u/ju52)\
**Post date:** [September 15, 2019, 5:38pm UTC](https://discourse.gohugo.io/t/images-management-in-a-hugo-website/20802/2 "2019-09-15T17:38:03Z")

</div>

you can use shortcode to embedd images `{{< figure ... >}}` There is a search function 😉

To center the image you have to use CSS or embeded styles.

I use a template **gallery** to show all pictures in sub-folder gallery

Sample is here

> <https://github.com/gj52/HugoSample/blob/master/themes/photon/layouts/photo/gallery.html>

PS: I use tachions CSS and fancybox

---

<div class="post-metadata">

**Author:** ![mathieun7](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/mathieun7/32/9563_2.png) [@mathieun7](https://discourse.gohugo.io/u/mathieun7)\
**Post date:** [September 15, 2019, 5:50pm UTC](https://discourse.gohugo.io/t/images-management-in-a-hugo-website/20802/3 "2019-09-15T17:50:46Z")

</div>

Thanks for your answer, I can tell you I used the search function, and nothing made sense to me.  
Since I’m quite new in Hugo, how could I guess the shortcode you mentionned could be useful ? I didn’t even know it exist ! And I’ve spent many hours on discovering hugo and how it works…

Thanks to you, I know I can look in that direction (and explore “shortcodes”…). I know it’s a very basic question, but I felt I was stuck, without any clue about where to look for. As I mentioned before, I tried to search for “image”, “picture”, in this forum and in the doc, but I didn’t understand everything… I’m french, maybe that’s why I’m a little bit lost in a foreign language on a foreign platform ^^

Thanks, I will now explore !

---

<div class="post-metadata">

**Author:** ![mathieun7](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/mathieun7/32/9563_2.png) [@mathieun7](https://discourse.gohugo.io/u/mathieun7)\
**Post date:** [September 15, 2019, 8:07pm UTC](https://discourse.gohugo.io/t/images-management-in-a-hugo-website/20802/4 "2019-09-15T20:07:37Z")

</div>

Back here… For a reason I can’t explain, shortcode is not processed.

deuxieme-article.md :

```auto
+++
date = "2019-09-14T01:57:29+02:00"
title = "Deuxièèèème Article"
type = "article"
draft = false
+++

Lorem ipsum summary of the article.
<!--more-->
Lorem ipsum rest of the article.
ET LOL

{{< figure src="/macron.jpeg" >}}
{{ figure src="/macron.jpeg" }}

```

The result (via hugo server) :

 ![05](https://canada1.discourse-cdn.com/flex036/uploads/gohugo/original/2X/4/49a7da2c4980dbb8e3f2bfc90111860ea47af588.jpeg)

Do you understand how is it possible ?

---

<div class="post-metadata">

**Author:** ![mathieun7](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/mathieun7/32/9563_2.png) [@mathieun7](https://discourse.gohugo.io/u/mathieun7)\
**Post date:** [September 15, 2019, 8:37pm UTC](https://discourse.gohugo.io/t/images-management-in-a-hugo-website/20802/5 "2019-09-15T20:37:21Z")

</div>

Maybe is there an option to enable shortcodes ? Or something I’ve done that disable them ?

The page : [https://compassionate-ardinghelli-6472ed.netlify.com/articles/deuxieme-article/](https://compassionate-ardinghelli-6472ed.netlify.com/articles/deuxieme-article/)  
My repository : [https://gitlab.com/mathieunicolas/website](https://gitlab.com/mathieunicolas/website)

---

<div class="post-metadata">

**Author:** ![maiki](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/maiki/32/16384_2.png) [@maiki](https://discourse.gohugo.io/u/maiki)\
**Post date:** [September 15, 2019, 8:54pm UTC](https://discourse.gohugo.io/t/images-management-in-a-hugo-website/20802/6 "2019-09-15T20:54:36Z")

</div>

`{{< figure src="/macron.jpeg" >}}` works for me:

 ![Screenshot_2019-09-15%20Canvas](https://canada1.discourse-cdn.com/flex036/uploads/gohugo/original/2X/e/e8b1d085d276f33d4b2120111d6d1499f2143b00.jpeg)

I cloned the repo and edited that article to be:

```auto
+++
date = "2019-09-14T01:57:29+02:00"
title = "Deuxièèèème Article"
type = "article"
draft = false
+++

Lorem ipsum summary of the article.
<!--more-->
Lorem ipsum rest of the article.
ET LOL

{{< figure src="/macron.jpeg" >}}

```

> [@mathieun7](#):
>
> Since I’m quite new in Hugo, how could I guess the shortcode you mentionned could be useful ?

You need to read all the docs. I expect everyone posting here to have read all the docs. 🙂

---

<div class="post-metadata">

**Author:** ![mathieun7](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/mathieun7/32/9563_2.png) [@mathieun7](https://discourse.gohugo.io/u/mathieun7)\
**Post date:** [September 15, 2019, 9:08pm UTC](https://discourse.gohugo.io/t/images-management-in-a-hugo-website/20802/7 "2019-09-15T21:08:42Z")

</div>

Thanks for your answer !  
I read the docs sir, I’ve read the docs during at least 6 hours the last 2 days.

The reason why it didn’t work, thanks to your comment, is that I use Ulysses to edit my MD files, and it automatically replaces `<` and `>` with `\<` and `\>`. I didn’t spot the mistake, and this kind of error is not in the docs. There was no reason the error was in my MD file since I made some copy/paste **from the docs** and just updated the file path.

Thanks

---

<div class="post-metadata">

**Author:** ![ju52](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/ju52/32/6749_2.png) [@ju52](https://discourse.gohugo.io/u/ju52)\
**Post date:** [September 16, 2019, 12:17pm UTC](https://discourse.gohugo.io/t/images-management-in-a-hugo-website/20802/8 "2019-09-16T12:17:47Z")

</div>

next step to read 😉

> **[Page Bundles](https://gohugo.io/content-management/page-bundles/)**
>
> Content organization using Page Bundles

beaucoup de succès

---

<div class="post-metadata">

**Author:** ![mathieun7](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/mathieun7/32/9563_2.png) [@mathieun7](https://discourse.gohugo.io/u/mathieun7)\
**Post date:** [September 16, 2019, 12:20pm UTC](https://discourse.gohugo.io/t/images-management-in-a-hugo-website/20802/9 "2019-09-16T12:20:16Z")

</div>

Haha, thanks for the advice !  
I’ve come to this page few times, not sure about what I understood… I’ll try one more time this afternoon !

Thanks for your kind message, sir !