Add an image via HTML

[seaveredge]

When I want to have an image, which is a float, such that it wraps around the text as (hopefully rendered correctly) in this issue.

However, if I try to do this in the .md file with the correct HTML code, it views it correctly in the VSCode editor (in terms of the markdown previewer, but when I build the website again, it does not show...

The code that I use (with example image):

<img style="float: right; margin: 0px 0px 15px 20px;" src="https://www.w3schools.com/Css/w3css.gif" width="40px">

When I inspect the element in the browser (at local host) it says <!-- raw HTML omitted -->. Is there a way to circumvent this?

PS. This is my first time opening an issue at a repository that is from someone I don't know. I hope this is the correct place to ask this, otherwise feel free to move this to another tab.

EDIT: Ok, the markdown is not rendered correctly in Github, but I hope you get the point. Thanks in advance anyway for considering my problem :)

[keesfluitman]

this is a general hugo thing to not render raw HTML.
I also use it sometimes, Depending on how you structure your config files.
If you have a _default folder, create a markdown.toml

[goldmark]
[goldmark.renderer]
unsafe = true

https://gohugo.io/getting-started/configuration-markup/#rendererunsafe

I've got the same issue with this theme. Im trying to implement the lightbox or a figure template, so they dont take so much space and are more dynamic. But the lightbox here isnt working. I can tell the js is loaded and does sth by debugging in developer tools in my browser, but the images dont actually change.
https://hugocodex.org/add-ons/lightbox/

So im looking for a way to add images in a more dynamic and prettier fashion.

[juanMarinero]

Use the raw HTML shortcode

{{< rawhtml >}}
<img
  style="float:right;margin: 0px 0px 15px 20px;"
  src="https://www.w3schools.com/Css/w3css.gif"
  width=50%
>
{{< /rawhtml >}}

lipsum lipsum lipsum lipsum lipsum
lipsum lipsum lipsum lipsum lipsum 

References:

• Shortcode template: https://github.com/zjedi/hugo-scroll/blob/master/layouts/shortcodes/rawhtml.html
• Self promotion: https://juanmarinero.github.io/blogs/hugo_shortcodes/#raw-html

Btw. Set unsafe = true in markup.goldmark.renderer is discussed here. TLDR: it’s NOT recommended @keesfluitman

The specific figure shortcode

{{< figure
  class="float-right"
  src="https://www.w3schools.com/Css/w3css.gif"
  width=50% 
>}}

lipsum lipsum lipsum lipsum lipsum
lipsum lipsum lipsum lipsum lipsum

Add to layouts/partials/custom_head.html

.float-right {
  float: right;
  margin: 0px 0px 15px 20px;
}

References:

• https://gohugo.io/shortcodes/figure/
• Shortcode template: https://github.com/gohugoio/hugo/blob/master/tpl/tplimpl/embedded/templates/_shortcodes/figure.html
• Self promotion: https://juanmarinero.github.io/blogs/hugo_shortcodes/#figure

Create a custom figure shortcode

(Not tested)

1. Create layouts/_shortcodes/custom-figure.html:

<figure style="{{ .Get "style" | safeCSS }}">
  <img src="{{ .Get "src" }}" 
       {{- with .Get "width" }} width="{{ . }}"{{ end -}}
       {{- with .Get "height" }} height="{{ . }}"{{ end -}}
       {{- with .Get "alt" }} alt="{{ . }}"{{ end -}}>
  {{ with .Get "caption" }}<figcaption>{{ . | markdownify }}</figcaption>{{ end }}
</figure>

2. Use it like:

{{< custom-figure
  src="https://www.w3schools.com/Css/w3css.gif"
  width="50%"
  style="float:right;margin: 0px 0px 15px 20px;"
>}}

hugo-shortcode-gallery,...

#70

More docs

Hugo shortcodes:

• https://gohugo.io/shortcodes/
• Self promotion: https://juanmarinero.github.io/blogs/hugo_shortcodes

Avoid px

For responsive web design, it’s recommended to use adaptive units like em, vw, vh, or percentages instead of absolute units like pixels (px).

Check https://www.creativebloq.com/features/7-great-tools-for-testing-your-responsive-web-designs