Hugo Conversation Dialog

<Optimus Prime> Were we so different? They’re a young species. They have much to learn. But I’ve seen goodness in them. Freedom is the right of all sentient beings.

Hello everyone.. do you see conversation dialog strip above from Optimus Prime? Well, it my new Hugo features and I really like this kind of dialog stuff. It kinda cool and nostalgic too…

While browsing internet today, I found Christine Dodrill (Xe) website and some of her (I hope i get correct pronouns) posts are using some kind of “dialog” and I as reader, I found this is wonderful and it likely some magic conversation happen in my mind while reading.

So I create this so called “conversation-dialog” as Hugo shortcode.

layouts/shortcodes/conversation.html

Create a shortcodes file called as conversation.html inside you theme or root layouts/shortcodes/ directory.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

{{- $inner := .Inner | .Page.RenderString -}}
{{- $img := .Get 1 | default "/images/upload/tuzki-hand-high.png" -}}
{{- $get0 := .Get 0 | default "" -}}
<div style="display: flex;margin-bottom: 0.5em;">
    <div style="min-width: 6rem; max-width: 6rem; padding: 1em;">
        <picture>
            <img src="{{ $img }}" style="opacity:100%">
        </picture>
    </div>
    <div style="align-self: center;">&lt;<b>{{ if ne $get0 ""}}{{ $get0 }}{{else}}Anonymous{{end}}</b>&gt;&nbsp;
        {{- $inner -}}
    </div>
</div>

Now if you notice, I use inline CSS styling which is maybe you don’t like it. Feel free to modify and create own CSS classes.

Another thing is, I highlighted on line number 2, this part you need to replace the default image to what ever default image you want, you also can load remote URL from there.

Implementation

To use this Hugo shortcode, it is super easy. I have prepared 4 different use cases (take look the differences)

Fantastic, that all the thing you have to do. Have fun with your Hugo dialog!