Chirp

The Chirp plugin is a free and open-source extension for Grav CMS.

With Chirp you can embed Tweets with the [tweet] shortcode and customize the template as your theme needs.

Installation

Chirp is part of the official Grav repository.

Check our guide for installing Open-Source plugins.

Configuration

user/plugins/chirp/chirp.yaml:

enabled: true
built_in_css: true

Usage

You can insert a tweet passing an URL through the property.

[tweet url="https://twitter.com/jack/status/20"][/tweet]

Or inside the tags.

[tweet]https://twitter.com/jack/status/20[/tweet]

Or just use the ID.

[tweet]20[/tweet]

Customization

You can disable the default CSS by setting built_in_css to false. Each element of the Tweet has a class to it, so you can customize it very easily.

Default CSS:

.tweet {
    display: block;
    margin: 2rem 0;
    background-color: #f6f6f6;
    padding: 1.25rem 2rem;
    border-radius: 0.5rem;
}

.tweet__content {
    font-size: 1.125rem;
    margin: 0 0 1rem 0;
    padding: 0;
    border: none;
}

.tweet__bottom {
    display: flex;
    gap: 1rem;
    flex-wrap: true;
    align-items: start;
}

.tweet__credits {
    display: block;
}

.tweet__author {
    display: inline-block;
}

.tweet__author::before {
    content: "\2014 \0020";
}

.tweet__at {
    display: inline-block;
}

/* 
 | Hide DOM Elements that need to
 | be read only by Screen Readers 
*/
.tweet__sr-only {
    display: none;
}

Theming

If you need further customization, you can override the partials/tweet.html.twig and partials/tweet-image.html.twig template.

Default partials/tweet.html.twig:

<figure class="tweet">
    <blockquote class="tweet__content" cite="{{ tweet.url }}">
        {{ tweet.content|raw }}
    </blockquote>
    <div class="tweet__bottom">
        <figcaption class="tweet__credits">
            <span class="tweet__sr-only">Tweet by</span>
            <cite class="tweet__author">{{ tweet.author }}</cite>
            <span class="tweet__at">(@{{ tweet.at }})</span>
        </figcaption>
        <time class="tweet__time" datetime="{{ tweet.date|date('Y-m-d')|e }}">
            {{ tweet.date|date(system.pages.dateformat.short) }}
        </time>
    </div>
</figure>

Default partials/tweet-image.html.twig:

<span>
    <img src="{{ url }}" onerror="this.nextElementSibling.style.display = 'inline-block'; this.style.display = 'none'" alt="">
    <a href="{{ text }}" class="tweet__sr-only">{{ text }}</a>
</span>

Support