Hello, welcome to journal.robbi.my
Warning : This website are still in WIP mode
Thank you for your patience ๐Ÿ˜Š

โš ๏ธ Warning: This post is over a year old, the information may be out of date.

๐Ÿ“ Hugo Conversation Dialog

๐Ÿ“… | โฐ 1 minutes

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


๐Ÿ”€ Syndicated on:

Posted by: Robbi Nespu

Edit

Have some thoughts, discussion or feedback on this post?

๐Ÿ’ฌย Send me an email

What is webmention? How to send interactions!

Below you can find all of webmention with this page. Which means, you also 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 don't have WebMention capabilities? You can just use Comment Parade!



ุงุณู…ูŠ ู…ุญุงู„ูŠุถ ุจูŠู† ุงุญู…ุฏ avatar ุงุณู…ูŠ ู…ุญุงู„ูŠุถ ุจูŠู† ุงุญู…ุฏ avatar ุงุณู…ูŠ ู…ุญุงู„ูŠุถ ุจูŠู† ุงุญู…ุฏ avatar Benjamin ๐Ÿ‡ฉ๐Ÿ‡ช ๐ŸŽง ๐Ÿ–‹๏ธ avatar Robbi (็ฝ—ๆฏ”) avatar

Benjamin avatar

Benjamin

Thanks for this blog post. I enjoy your style of writing and might implement something like this on my Hugo blog.

Xe avatar

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!