0

Currently, I’m using hugo material theme : https://github.com/digitalcraftsman/hugo-material-docs

When I write the following content markdown

![practice-signup-1](/images/practice-signup-1.png)

Hugo will generate the following HTML code

<p><img src="https://investing.jstock.co/images/practice-signup-1.png" alt="practice-signup-1"></p>

However, I wish to add the following style to my img tag

<p><img src="https://investing.jstock.co/images/practice-signup-1.png" alt="practice-signup-1" style="max-width: 100%; width: 50%; height: auto;"></p>

I was wondering, how can I achieve so?

Alexis Wilke
  • 19,179
  • 10
  • 84
  • 156
Cheok Yan Cheng
  • 47,586
  • 132
  • 466
  • 875
  • Possible duplicate of [How to change image size Markdown?](https://stackoverflow.com/questions/14675913/how-to-change-image-size-markdown) – Waylan Aug 16 '17 at 22:54
  • Also possibly a duplicate of [How to use CSS in Markdown?](https://stackoverflow.com/q/27174946/866026) – Waylan Aug 16 '17 at 22:57

2 Answers2

2

You can create shortcode for it.

Make your own shortcode in /themes/your-theme-dir/layouts/shortcodes/img.html.

<p><img src="{{ .Get 0 }}" alt="practice-signup-1" style="max-width: 100%; width: 50%; height: auto;"></p>

and then use that short code in your post:

{{< img https://investing.jstock.co/images/practice-signup-1.png >}}

Other way, you can add style in css file instead of create inline style.

Dian
  • 470
  • 1
  • 6
  • 20
2

You can put raw HTML in markdown files. So if you have an image that you want special styles in, just paste the <img src.. code in your markdown file.

Robin Hu
  • 189
  • 5