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.

1 Like
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

2 Likes
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)

1 Like
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?

1 Like
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.

1 Like
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.

1 Like
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: