📢 Actions Speak Louder Than Words!

Hugo Conversation Dialog

Posted: Sep 2, 2021 | Reading time: 2 min
⚠️ Warning: This post is over a year old, the information may be out of date.
📢 I’ve moved to a new website. Please visit me at https://journal.robbi.my !
post

<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!

Edit

Have some thoughts, discussion or feedback on this post?
IndieWeb Interactions

Below you can find the interactions that this page has had using Indieweb. Which means, you can mentioned this URL on any website that support WebMention. Have you written a response to this post? Let me know the URL:

((Do you use a website that do not set up with WebMention capabilities? You can use Comment Parade.)


Comments and replies

  • 💬 Benjamin: Thanks for this blog post. I enjoy your style of writing and might implement something like this on my Hugo blog.
  • 💬 Xe: @robbinespu wow! That's cool! I may try and get that implemented into work things! This is going to make things so much easier! Thanks!

Mentions, bookmarks, likes and repost