Markdown - image layout - goldmark v0.81.0

support
1

In the below link, one can use for instance { .color-blue } after a heading.

.color-blue {
color: blue; 
}

to change a headers color in markdown. It’s a really useful capability.

Markdown attributes

Now for images, I seem to be able to handle their layout in markdown is either shortcodes or passing a class through the title ![]( color-blue ).

I would very much like to use the {.float-left} instead. However, it seems Goldmark parses the below:

![/img/pathhere.jpg](This is a photo of stuff){.float-left}

as:

    <p class="float-left">
    </p>
    <p>
    <figure><img... etc...></figure>
    </p>

Is there a possibility I’m using this wrong? Or, at present, are the shortcodes or parsing a title of the markdown best practice?

Thank you for everyone’s time.

2

As per the Doc you linked to above attribute is not available for Markdown images. You can only pass a class through the title as you’ve already done.

attribute

Enable custom attribute support for titles and blocks by adding attribute lists inside single curly brackets ( {.myclass class="class1 class2" } ) and placing it after the Markdown element it decorates , on the same line for titles and on a new line directly below for blocks.

3

You could also insert raw HTML in your Markdown like this:

<div class="color-main">
 ![/img/pathhere.jpg](This is a photo of stuff)
</div>

For that, you need to allow HTML rendering in .md files with the following lines in config.toml:

[markup.goldmark.renderer]
  unsafe = true

(about the ‘unsafe’ param: the wording is a bit over-worrying here, you can use it safely AFAIK, especially if you are the only one with the push permission for your repo)

See this article for more info

4

Thank you and much appreciated, I wanted to double check at least.

5

Thank you and phenomenal name by the by - understood on including raw html.

6

You’re welcome!

Thank you and phenomenal name

Which name are you talking about?

I once bookmarked this tricky way to style pictures with Markdown:

Markdown lacks basic features for image formatting, such as alignment and sizing. This post presents a variety of ways to format images with Markdown

This could be useful for you. (bookmarked here)

7

All right thank you both (iaeiou) and (onedrawingperday), so with the various resources and blogs around the net, I did the below (finally confronting it this morning).
The Lead here is probably going call me crazy, but it might have merit and does work:
So, I want to have the markdown for non-foundational content to be the most clean I could possibly get, and where this solution wouldn’t be what I call “elegant” it does handle, fully, captions, class passing, clean URLs, Titles and alt tags:

So, I have the below in Layouts/_default/_markup/render-image.html
{{ $class := index ( findRE “\?(.?)\?" .Destination ) 0 }}
{{ $cleanClass := replace $class “?” “” }}
{{ $destination := index ( findRE "^(.?)\?” .Destination ) 0 }}
{{ $cleanDestination := replace $destination “?” “” }}
{{ $caption := index ( findRE “\#(.*?)\#” .Destination ) 0 }}

<figure class="{{$cleanClass}}">
	<img src="{{ $cleanDestination | safeURL }}" alt="{{ .Text }}" title="{{ .Title }}" >
</figure>
{{ if eq $caption "#caption#"}}
<figcaption>{{.Title}}</figcaption>
{{ end }}

And then for markdown I have:

![This is the alt tag](/img/content/pathhere.jpg?inline-right?#caption# "This is the caption and Title")

As I said, not elegant, as I feel regex is often a false path, but it works and the front end, well, I’d say is pretty clean.

Thank you for all your time (And the countless blogs which helped which I don’t have links to).

8

Hi @Roger and thanks for sharing.

Do you know that Markdown in Hugo already supports Images with caption and titles?

9

The CommonMark specification has a provision for image titles, but not captions.

The “image caption” example is nothing more than an emphasized string following an image. It has no relationship to the image.

10

And Mr. Mooring, that’s a three-peat kind-sir.
But, iaseiou and Mr. Mooring, - this is interesting, if there was a way to capture that “Your Caption” (within hugo) with a render-template through a variable (like {.Title}) then that would be fantastic. It would mean my hack could be a little simpler.
So, as far as I know, am image has {{.Title}} {{.Destination}} is there something like {{.caption}} which would give me the your caption so I can then make it semantically correct within the <figcaption></figcaption>
If their is a way you could help me shed light on such?

Example:

<figure class="{{$Class}}">
<img src="{{ .Destination | safeURL }}" alt="{{ .Text }}" title="{{ .Title }}" >
   <figcaption>{{.CAPTION OR SOMETHING}}</figcaption>
</figure>

Note: Current state of template:

With:

![text here](/image path here?class here?#caption toggle here# "title and caption here")

{{ $class := index ( findRE "\\?(.*?)\\?" .Destination ) 0 }}
{{ $cleanClass := replace $class "?" "" }}
{{ $caption := index ( findRE "\\#(.*?)\\#" .Destination ) 0 }}
 
{{ if not (eq $cleanClass "")}}
{{ $destination := index ( findRE "^(.*?)\\?" .Destination ) 0 }}
{{ $cleanDestination := replace $destination "?" "" }}
figure class="{{$cleanClass}}">
<img src="{{ $cleanDestination }}" alt="{{ .Text }}" title="{{ .Title }}" >
{{ if eq $caption "#caption#"}}
<figcaption>{{.Title}}</figcaption>
{{ end }}
</figure>
{{ else }}
{{ $cleanDestination := .Destination }}
<figure class="{{$cleanClass}}">
<img src="{{ $cleanDestination }}" alt="{{ .Text }}" title="{{ .Title }}" >
{{ if eq $caption "#caption#"}}
<figcaption>{{.Title}}</figcaption>
{{ end }}
</figure>	
{{ end }}
11

Here’s a lengthy read for you:
https://github.com/gohugoio/hugo/issues/6748

A <figure> is a block element. An <img> is an inline element. If you try to use an image render hook to return a <figure>, the <figure> will be treated as inline element.

Bottom line: if you want to place a <figure> in your content, use the built-in figure shortcode or roll your own.

12

That does answer my question.
At the least, gratifying to not be the only one wandering for a solution in this regard.

Thank you all very much.

¡Hasta la próxima!

13

Helped me as well :grinning: