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)

{{<conversation >}}
Don't think! FEEL. It is like a finger pointing a way to the moon... Don't concentrate on the finger or you will miss all that heavenly glory.
{{</conversation>}}

{{<conversation Morpheus "/images/upload/tuzki-peace.png" >}}
 What you know you can't explain, but you feel it. You've felt it your entire life, that there's something wrong with the world. You don't know what it is, but it's there, like a splinter in your mind, driving you mad.
{{</conversation>}}

{{<conversation "Agent Smith" "/images/upload/corona.png">}}
 You hear that, Mr. Anderson? That's the sound of inevitability, that's the sound of your death, goodbye, Mr. Anderson
{{</conversation>}}

{{<conversation "" "/images/upload/prepper-mask.png">}}
It is not the strongest of the species that survive, not the most intelligent, but the most responsive to change.
{{</conversation>}}

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