Images inserted via HTML into blog posts not rendered by Hugo

user_218244 0
Viewed 882

I'm using HTML snippets such as

<img src="site.jpg" style="width:100px; float:left; margin: 0px 5px 5px 0px" border="0" />

to insert scaled and offset images into blog posts in Hugo. Unfortunately I'm finding with the latest version of Hugo that images inserted this way are not rendering. If I do an image insert via Markdown, the images are inserted fine, but it appears impossible apply a style tag?

Any suggestions on how I can diagnose the issue here? I'm currently at a loss.

hugo css html
3 Answers

It turns out that inline HTML was getting filtered out by Hugo. The following needed to be added to config.toml to allow the HTML to be inserted into the resulting pages.

[markup]
  [markup.goldmark]
    [markup.goldmark.renderer]
      unsafe = true

This came to pass in Hugo 0.60.0 with CommonMark compliance.

user_2182440

I would prefer to keep the HTML out of the MD as much as possible; setting anything to "unsafe" always makes me a little nervous, and I presume that was the intention when the the parameter was named "unsafe"!

I think my first port of call would be to use the figure shortcode, that supports a class name, as well as nice-to-haves like captions and titles (which may have accessiblity and SEO benefits).

{{< figure src="site.jpg" title="Cool Image" class="pull-left" >}}

If that doesn't suit, the options would be a custom shortcode, or target through pure css, you could use nth-child to alternate images to the left and right if desired.

Edit - Additional info

Create a CSS file and link it in the head, for example I have <project-root>static/styles/main.css and this in the head of my layout

<link href="/styles/main.css" rel="stylesheet" type="text/css">

Very important to note that static is not part of the url/href.

Above I assigned the figure the class of pull-left so in main.css your style would look like

.pull-left{
    width:100px; 
    float:left; 
    margin: 0px 5px 5px 0px;
}

Added details from Link in Comments

Best to make a copy of theme files rather than overwriting so create

layouts -> partials -> head.html

normally copied from

themes -> actual-theme -> layouts -> partials -> head.html

and add in the normal HTML link tag. (Fun bonus fact, themes are optional if you want to create from scratch)

You can also specify files in the config file

custom_css = ["css/custom.css"]
custom_js = ["js/custom.js"]

And use this code to add to the head.html

// css 
{{ range .Site.Params.custom_css -}}
    <link rel="stylesheet" href="{{ . | absURL }}">
{{- end }}

// javascript
{{ range .Site.Params.custom_js -}}
    <link rel="stylesheet" href="{{ . | absURL }}">
{{- end }}
user_9005570

Not sure if this helps, but I cleaned up your syntax a little.

<img src="site.jpg" style="width:100px; float:left; margin: 0px 5px 5px 0px; border:0px;" />
user_145153730
Related