Fluid style for images with normal markdown syntax

[mfasold]

I am in the process of migrating from Hyas to the current version of Thulite.

I have been using the normal markdown syntax for adding images as demonstrated in the docs. Previously, the rendered HTML would contain class="img-fluid blur-up" for images - if I remember correctly this could be defined by adding image: class: "img-fluid blur-up" in params.yml.

In the new version, there are no class tags in my rendered HTML, leading to huge images. It also seems that the params.yml is deprecated. ASAICS, the image rendering is defined in ./node_modules/@thulite/images/layouts/_default/_markup/render-image.html, with no class tag.

So, is there no built-in way to get fluid images for normal markdown syntax? What am I missing?

[h-enk]

Yes, you're right /that's true (design choice, not well communicated I realize). You would now use the markdown render hook to display "simple" images. Use one of the three shortcodes for full control displaying images (which is not possible /highly opinionated when using a render hook).

But, you can always override the render hook and make it your own.

[mfasold]

To get any of the advanced features (like different "srcset" image sizes), I would now use the short codes, right?

Looking at the source of the img shortcode, I see that I can specify class as a parameter. When img-fluid shall be my default class for images (as I live in the bootstrap world), but I don't want to add this to every image shortcode, what would be the best way to do this? I tried to add a corresponding class parameter in [thulite_images.defaults] in params.toml, but the parameter does not seem to be carried along.

[h-enk]

To get any of the advanced features (like different "srcset" image sizes), I would now use the short codes, right?

That's right!

You could add Bootstrap's img-fluid class definition to the img element in assets/scss/common/_custom.scss:

// Put your custom SCSS code here

img {
  max-width: 100%;
  height: auto;
}

[mfasold]

Thank you for the suggestion, which put me on the right track, I think.

Modifying the global styles of img (quite drastic, but in this case ok for me) in assets/scss/common/_custom.scss had no effect. Searching a bit more, I found that the in the earlier version of Hyas it was recommended to copy the files-to-be-overridden from ./node_modules/@hyas/bootstrap/to ./themes/my-bootstrap-theme/. And so, I added this in themes/my-bootstrap-theme/assets/scss/common/_global.scss.

Now I also understand why adding the app.scss as recommended here was not working for me. I must admit, as someone who edits a blog only every couple of months, all the file implicit file lookups and their order from Hugo are confusing.

[h-enk]

Other option, copy node_modules/@thulite/images/layouts/_default/_markup/render-image.html and paste (override) to /layouts/_default/_markup/render-image.html. Add to the latter class="{{ site.Params.thulite_images.defaults.class }}":

{{- /* Render image element. */ -}}
<img
  src="{{ $r.RelPermalink }}"
  class="{{ site.Params.thulite_images.defaults.class }}"
  width="{{ string $r.Width }}"
  height="{{ string $r.Height }}"
  decoding="{{ site.Params.thulite_images.defaults.decoding }}"
  fetchpriority="{{ site.Params.thulite_images.defaults.fetchpriority }}"
  loading="{{ site.Params.thulite_images.defaults.loading }}"
  alt="{{ .PlainText }}"
  {{- with .Title -}}title="{{ . }}"{{- end -}}
  id="{{ $id }}"
/>

{{- /**/ -}}

And, to config/_default/params.toml add class = "img-fluid":

# Images (@thulite/images)
[thulite_images]
  [thulite_images.defaults]
    class = "img-fluid" # "rounded" or "shadow" for example
    decoding = "async" # sync, async, or auto (default)
    fetchpriority = "auto" # high, low, or auto (default)
    loading = "lazy" # eager or lazy (default)
    widths = [480, 576, 768, 1025, 1200, 1440] # [640, 768, 1024, 1366, 1600, 1920] for example
    sizes = "auto" # 100vw (default), 75vw, or auto for example
    process = "" # "fill 1600x900" or "fill 2100x900" for example
    lqip = "16x webp q20" # "16x webp q20" or "21x webp q20" for example

Yes, the current Thulite setup is quite different from the original Hyas setup(s).

It's probably easier to start a new project and copy your content files over?

[..] all the file implicit file lookups and their order from Hugo are confusing.

I get that (though it's how Hugo's module mounts work)

[mfasold]

Thank you, that looks like an even better solution!

[mfasold]

I also have a small related question. I would like to use syntax highlighting using markdown code fences. I managed to get styling by generating a style.css as documented here and importing this in a head partial.

However, this syntax highlighting now works using shortcode but not via code fences:

{{< highlight python>}}
print("Works")
{{< / highlight >}}

```python
print("Does not work")
\``` 

The above documentation from Hugo says that highlighting in code fences is enabled by default. So my question would be: could it be that Thulite kind of overwrites this? How could I activate it?

[h-enk]

In config/_default/markup.toml set codeFences = true:

[highlight]
  codeFences = true
  guessSyntax = false
  hl_Lines = ""
  lineNoStart = 1
  lineNos = false
  lineNumbersInTable = true
  noClasses = false
  style = "dracula"
  tabWidth = 4

Note, you can also put the generated syntax.css in assets/scss/common/ and import the file in assets/scss/app.scss (line 63):

// 8. Add additional custom code here
@import "common/fonts";
@import "common/global";
@import "common/syntax";
@import "layouts/footer";
@import "layouts/header";
@import "layouts/pages";

// 9. Custom styles
@import "common/custom";

[mfasold]

Thank you, that was precisely it!