CODEWITHSUNDEEP
markdownhugo
Cheok Yan Cheng
Cheok Yan Cheng

Reputation: 42710

Adding custom CSS style in img

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?

Upvotes: 0

Views: 1660

Answers (2)

Dian
Dian

Reputation: 470

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.

Upvotes: 2

Robin Hu
Robin Hu

Reputation: 189

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.

Upvotes: 2

Related Questions