26.11.2020 html

Example template for tweet2hugo

Here is the template used on my site for the tweet2hugo script I’ve published a few weeks ago. This utilizes quite a few of the data points included to also display images and videos along with your latest tweet. The CSS classes are from Bulma, you will need to replace these with your own, of course.

{{ with .Site.Data.latest_tweet }}
<div class="box has-text-white brdr-yayellow"
     style="background-color:#{{with .user}}{{.profile_background_color}}{{end}};">
    <div class="content p-4">
        <div class="columns">
            <div class="column is-half is-offset-one-quarter">
                <figure class="image is-128x128 is-centered">
                     <img alt="twitter profile picture" class="is-rounded" src="/images/twitter_profile.webp">
                </figure>
            </div>
        </div>
        <p class="has-text-centered">
            <a target="_blank" rel="nofollow noreferrer noopener" href="https://twitter.com/{{.user.name}}">
                @{{ .user.name }}
            </a>
        </p>
        <hr class="twitter-hr">
        <p class="block mt-5 has-text-justified">
            {{ .full_text | safeHTML }}
        </p>
            {{ if isset .extended_entities "media" }}
                {{with .extended_entities}}
                    {{ with ( index .media 0) }}
                        {{ $ww := 0 }}
                        {{ $hh := 0 }}
                        {{ with .sizes.small }}
                            {{ $ww = .w }}
                            {{ $hh = .h }}
                        {{end }}
                        {{ if eq .type "photo" }}
                            <div class="is-centered">
                                <img width="{{$ww}}" height="{{$hh}}" src="{{.media_url_https}}:small" alt="twitter image media">
                            </div>
                        {{end}}
                        {{ if eq .type "video" }}
                            {{ with (index .video_info.variants 0) }}
                            <div class="is-centered">
                                <video width="{{$ww}}" height="{{$hh}}" controls="controls">
                                    <source src="{{.url}}"/>
                                </video>
                            </div>
                            {{end}}
                        {{end}}
                    {{end}}
                {{end }}
            {{ end }}

        <hr class="twitter-hr">

        <div class="level mb-0">
            <span class="level-left">
                <a target="_blank" rel="nofollow noreferrer noopener" href="https://twitter.com/{{.user.name}}/status/{{.id_str}}">{{ slicestr .created_at 0 20 }}</a>
            </span>
            <span class="level-right">
               via {{ .source | safeHTML }}
            </span>
        </div>
        <hr class="twitter-hr">
        <div class="level">
            <span class="level-item is-size-4 mr-5">
                <a href="https://twitter.com/intent/like?tweet_id={{.id_str}}">
                    <span class="icon"><i class="fas fa-heart"></i>&nbsp;{{ .favorite_count }}</span>
                </a>
            </span>
            <span class="level-item is-size-4 mr-5">
                <a href="https://twitter.com/intent/retweet?tweet_id={{.id_str}}">
                    <span class="icon"><i class="fas fa-retweet"></i>&nbsp;{{ .retweet_count }}</span>
                </a>
            </span>
            <span class="level-item is-size-4 mr-5">
                <a href="https://twitter.com/intent/tweet?in_reply_to={{.id_str}}">
                    <span class="icon"><i class="fas fa-reply"></i></span>
                </a>
            </span>
        </div>
        {{ end }}
    </div>
</div>

Please also see the readme for tweet2hugo for instructions on how to set it up.

Link to the author's twitter Link to the authors ko-fi page

comments

Characters: 0/1000

gravatar portrait

 Pinned by contact@tuxstash.de

Come join the discussion and write something nice. You will have to confirm your comment by mail, so make sure it is legit and not a throwaway. Only the name part of it will be displayed, so don't worry about spam. If it does not show up after confirming it, it may be considered spam, but I curate them manually, so don't worry. Please read the privacy statement for more.