Inkludér dit Mastodon-feed i et WordPress-indlæg

Indhold

• Sådan kommer du i gang på bare 30 sekunder
• Ikke fan af shortcodes? Så brug da den nye Gutenberg blok!
• Include Mastodon Feed fungerer godt, fordi:
• Lidt CSS giver et smukt kolonne-layout
• @oldrup@mastodon.green
• Sådan opbygges blokstruktur og shortcode
• Sådan tilføjer du stylesheetet imf-columns
• #SilentSunday on mastodon.green
• Brugerdefineret CSS til mastodon-feedet
• Webtilgængelighed og Include Mastodon Feed
• Find og støt den rigtige Mastodon instans for dig
• #MastoArt on mastodon.green

Sådan kommer du i gang på bare 30 sekunder

1. Installér Include Mastodon Feed fra WordPress.org
2. Find dit konto-id ved hjælp af Wolfgangs praktiske værktøj
3. Indsæt en shortcode i dit indlæg, som i dette eksempel:

Og du vil se et enkelt indlæg, som ikke er stylet til mit temas mørke tilstand:

Ikke fan af shortcodes? Så brug da den nye Gutenberg blok!

Artiklen her blev skrevet da en shortcode var den eneste måde at benytte Include Mastodon Feed plugin’et på. Nu har Wolfgang lavet en blok! Den afprøver jeg her, hvor alle shortcodes i artiklen erstattes med blokken.

Include Mastodon Feed fungerer godt, fordi:

Det er, hvad en åben protokol og et offentligt API kan gøre i hænderne på en dygtig programmør med lidt tid til overs. Der er ingen “hemmelig sovs”; API’en returnerer blot indholdet af de seneste indlæg (statusser), som hvis du besøgte det offentlige feed på mastodon.social/@Mastodon.

Wolfgang har endda justeret plugin’et, så det understøtter lazy load, mindre og hurtigere billedstørrelser og en masse forbedringer af tilgængeligheden.

Lidt CSS giver et smukt kolonne-layout

Da HTML-outputtet fra plugin’et har god semantik, meningsfulde klassenavne og nyttige custom properties, så lad os trykke på den hemmelige hacking-inspektionsknap og se, hvad vi kan gøre med ren CSS. Måske det her?

[include-mastodon-feed instance="mastodon.green" account="109535931552740701" limit="14" excludeReplies="true" excludeConversationStarters="true" onlyMedia="true" preserveImageAspectRatio="true" imageSize="preview" imageLink="status" showPreviewCards="false" hideStatusMeta="true" cache="true"]

Sådan opbygges blokstruktur og shortcode

For at aktivere kolonnelayoutet skal du tilføje to indlejrede gruppeblokke (tre, hvis du har lyst til det skrå og klippede layout), tildele klasserne og tilføje en shortcode til den inderste blok. Du kan lege med indholdsbredden, men jeg har tilføjet nogle anbefalede udgangspunkter nedenfor:

1. Opret containergruppe med klassen imf-colums (fuld bredde)
2. Valgfrit: Opret “udklipsgruppe” med klassen imf-clipper (90vw)
3. Opret en indre gruppe med klassen imf-inner (1440-1920px)
4. Tilføj overskrift og indsæt Include Mastodon Feed shortcode

Eksempel på containergruppestruktur

Hvilke attributter skal jeg bruge i shortcoden?

De passende attributter til Include Mastodon Feed-kortkoden afhænger af din brugssituation. Målet med dette lille CSS-projekt er at vise visuelt indhold i en “pinteresque-stil”, filtrere det meste tekst fra, men naturligvis linke til det oprindelige indlæg. Når vi nu taler om indlæg vs “posts” vs statusser…

Jeg foreslår, at du starter simpelt og følger instruktionerne på installationssiden for Include Mastodon Feed-plugin. Her er nogle af de attributter, jeg indstillede specifikt til eksemplet ovenfor, og hvorfor:

Sådan tilføjer du stylesheetet imf-columns

Med blokstrukturen og shortcode på plads er alt, hvad vi behøver for at aktivere kolonnelayoutet, at tilføje CSS. Brug ethvert foretrukket brugerdefineret CSS-plugin eller dit temas mulighed for at tilføje CSS.

Men før vi gør det, så lad os se på de indlæg, der er tagget #SilentSunday på mastodon.green. Træk vejret ind, hold det … pust ud. Gong! 🧘

[include-mastodon-feed instance="mastodon.green" tag="#silentsunday" limit="20" excludeReplies="true" excludeConversationStarters="true" onlyMedia="true" preserveImageAspectRatio="true" imageSize="preview" imageLink="status" showPreviewCards="false" hideStatusMeta="false" hideDateTime="true" cache="true"]

Brugerdefineret CSS til mastodon-feedet

Følgende CSS indeholder de tre klasser .imf-columns, .imf-clipper og .imf-inner samt et sæt brugerdefinerede CSS-properties til at tilpasse indlæggets design. Jeg håber, de er nogenlunde selvforklarende, men der er dog et par bemærkninger:

• Vi bruger CSS-columns, hvilket betyder, at --imf-column-width er minimumsbredden, og --imf-column-count er det maksimale antal kolonner; browseren vil indpasse et antal kolonner inden for disse begrænsninger.
• Alle mine custom properties har præfikset --imf
• Pluginets custom properties har præfikset --include-mastodon-feed

/***
* IMF Columns; Image focused column styling for Include Mastodon Feed shortcode.
* 1.1.1: Added support for video and limited long hashtags
* Adjust the following settings to fit you theme.
***/

.imf-columns {
    --imf-column-width: 24ch;
    --imf-column-count: 5;
    --imf-column-gap: 2rem;
    --imf-clipper-max-height: min(80vh, 60rem);
    --imf-inner-rotation: 7deg;
    --imf-status-padding: .75rem;
    --imf-status-font-size: var(--wp--preset--font-size--small, 0.8rem);
    --imf-status-color: #404040;
    --imf-status-avatar-height: 1.5rem;
    --imf-status-box-shadow: 0.6rem 0.8rem 1rem #0003;
    --imf-status-media-hover: contrast(90%) brightness(120%) saturate(80%);
    --include-mastodon-feed-border-radius: 1.5rem;
    --include-mastodon-feed-bg-light: #fafafa;
    --include-mastodon-feed-accent-color: #563acc;
}

/***
* How to use: In block editor, create 2-3 nested groups with imf classes and shortcode:
* 1: Create container group with class imf-columns, this can have background
* 2:  Optional: create clipping group with class imf-clipper; recommended width: 90vw
* 3:   Create inner group with class imf-inner; recommended width: 1440-1920px
* 4:      In that, create heading (optional) and insert Include Mastodon Feed shortcode
***/


/** Include Mastodon Feed **/

/* Use CSS Columns for the mastodon feed */
.imf-columns .include-mastodon-feed {
    column-width: var(--imf-column-width);
    column-count: var(--imf-column-count);
    column-gap: var(--imf-column-gap);
    margin: 0 0 var(--imf-column-gap);
}


/** Status Cards **/

/* Display as INLINE-grid (safari-fix) for reordering of content and avoid column-breaking ⭐ */
.imf-columns .include-mastodon-feed .status {
    display: inline-grid;
    break-inside: avoid-column;
    margin: calc(var(--imf-column-gap)/2) 0;
    border: .5px solid #fff7;
    /* antialiasing*/
    padding: var(--imf-status-padding, 1rem);
    color: var(--imf-status-color);
    font-size: var(--imf-status-font-size);
    overflow-wrap: break-word;
    box-shadow: var(--imf-status-box-shadow, unset);
}


/* Hide statuses with videos or content warnings or unknown content */
.imf-columns .include-mastodon-feed .status:has(.audio, .gifv, .contentWarning, .unknown) {
    display: none;
}


/** Status Card > Content **/

/* Display as flex for reordering media and collapse ALL content (text nodes without html markup) ⭐ */
.imf-columns .include-mastodon-feed .status .content {
    display: flex;
    flex-wrap: wrap;
    visibility: collapse;
    line-height: 0;
}

/* Un-collapse proper marked up content (paragraphs, images, links) to make them visible again ⭐ */
.imf-columns .include-mastodon-feed .status .content * {
    visibility: visible;
    line-height: 1.33;
}

/* In the status, show hashtags and mentions links, but hide other arbitrary links */
.imf-columns .include-mastodon-feed .status .content p a:not(.hashtag, .mention) {
    display: none;
}


/** Status Card > Content > Media **/

/* Pull media up to be displayed first on the status ️ (Note; tabindex order will mess up) */
.imf-columns .include-mastodon-feed .status .content .media {
    order: -1;
    margin: 0 0 .5em 0;
    flex-grow: 1;
}

/* And round the corners */
.imf-columns .include-mastodon-feed .status .content .media :where(a, img, video) {
    border-radius: calc(var(--include-mastodon-feed-border-radius) / 1.5);
	width: 100%;
}

/* Use custom image hover filter */
.imf-columns .include-mastodon-feed .status .content .media a:hover {
    filter: var(--imf-status-media-hover);
}

/* Unset some video related rules */
.imf-columns .include-mastodon-feed .status .content .media .video {
    margin-top: unset;
    font-size: var(--imf-status-font-size);
}

/* Hotfix: Remove extra whitespace below some image links */
.imf-columns .include-mastodon-feed .status .content .media .image a {
    aspect-ratio: unset;
}


/** Status Card > Content > Text & Tags **/

/* Paragraphs; show only the first one ⭐ */
.imf-columns .include-mastodon-feed .status .content p:not(:first-of-type) {
    display: none;
}

/* If status last paragraph has hashtags, then limit first paragraph to 2 lines only ⭐ */
.imf-columns .include-mastodon-feed .status .content p:first-of-type:has(~p:last-of-type>a.hashtag) {
    --imf-status-line-clamp: 2;
}

/* Paragraphs; show only the first 2-3 lines ⭐ */
.imf-columns .include-mastodon-feed .status .content p:first-of-type {
	display: -webkit-box;
    -webkit-line-clamp: var(--imf-status-line-clamp, 3);
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Paragraphs; Remove the margins, keeping this card tight */
.imf-columns .include-mastodon-feed .status .content p {
    margin: unset;
}

/* Breaks and blockquotes looks weird on cards, hide them! */
.imf-columns .include-mastodon-feed .status .content :is(br, blockquote) {
    display: none;
}


/** Hashtags **/

/* Make exception to 1 paragraph, but show the last paragraph too if it has hashtags, ... */
.imf-columns .include-mastodon-feed .status .content p:not(:first-of-type):last-of-type:has(.hashtag) {
    display: inline-block;
}

/* Display maximum 3 hashtags, hide the rest ⭐ */
.imf-columns .include-mastodon-feed .status .content .hashtag:not(:nth-of-type(-n + 3)) {
    display: none;
}

/* Hashtags; make sure they don't exceed #TheWithOfTheColumnsYouManiacs */
.imf-columns .include-mastodon-feed .status .content .hashtag span {
	display: inline-block;
	max-width: calc(var(--imf-column-width) - 6ch);
}


/** Status Cards > Account Info **/

/* Order account info below the content */
.imf-columns .include-mastodon-feed .account {
    order: 2;
    margin-top: 0.5em;
    font-size: var(--imf-status-font-size);
    line-height: 1;
}

/* Tweak account avatar and name spacing*/
.imf-columns .include-mastodon-feed .account,
.imf-columns .include-mastodon-feed .account a {
    display: flex;
    align-items: flex-end;
    gap: .4em;
}

/* Make avatar a little larger */
.imf-columns .include-mastodon-feed .account .avatar {
    height: var(--imf-status-avatar-height, 1.5rem);
}


/** OPTIONAL; Clipper and rotated Inner container */

/* Inner Container; rotate on laptops and larger */
@media screen and (min-width: 1440px) {

    /* Right align headings and text so it fits nicely when inner is rotated */
    .imf-columns:has(.imf-clipper) .imf-inner .wp-block-heading {
        text-align: right;
    }

    /* Rotate inner container */
    .imf-columns:has(.imf-clipper) .imf-inner {
        transform-origin: 46% 21%;
        rotate: var(--imf-inner-rotation);
    }

    /* Clip overflow that occurs when rotating inner container */
    .imf-columns .imf-clipper {
        height: var(--imf-clipper-max-height);
        max-height: var(--imf-clipper-max-height);
        overflow: clip;
    }

    /* Remove inner padding for that tight tilted section */
    .imf-columns:has(.imf-clipper) {
        padding: 0;
    }
}

/** OPTIONAL; Limit number of statuses on phones to 6 to avoid excessive scrolling */

@media (max-width: 768px) {
    .imf-columns .include-mastodon-feed .status:not(:nth-of-type(-n + 6)) {
        display: none;
    }
}


/* OPTIONAL; Fade in inner section to reduce layout shifts and because it looks nice. */

/* Fade in the entire inner container in .8 seconds (adjust to your site) */
.imf-columns .imf-inner {
    animation: fadeIn 0.8s linear forwards;
}

/* 0 opacity (invisible) for half the time, then fade to full opacity */
@keyframes fadeIn {

    0%,
    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

Webtilgængelighed og Include Mastodon Feed

Wolfgang – forfatteren af Include Mastodon Feed – og jeg forpligtede os på at forbedre plugin’et under GAAD 2025 Global Accessibility Awareness Day. Vi arbejdede på HTML-semantik og den overordnede “ud af boksen-oplevelsen”, divs blev erstattet med lister, hvor det var relevant, og vi sikrede, at alt-tekst og sprogattributter var til stede og testede skærmlæser og tastatur.

Alligevel er jeg opmærksom på to mindre mangler:

• Da jeg bruger CSS-order til at trække indlægsbilleder til toppen af kortet, er fokusrækkefølgen (også kaldet tab-order) lidt forkert. Links i indlægsteksten (hashtags) er fokuseret før billedlinket.
• Hvis du bruger imf-clipper til visuelt at klippe bunden af indlæggene af for at få den særlig effekt, vil hele indlægsteksten stadig blive læst højt i skærmlæsere. Ikke tosset, faktisk, men lidt inkonsekvent.

Jeg synes at dette er en acceptabel implementering af mastodont-feeds i WordPress, men jeg kan selvfølgelig have overset noget, så hvis du ser en mulighed for at forbedre tilgængeligheden yderligere, så kontakt mig.

Find og støt den rigtige Mastodon instans for dig

Fediverse er bare sådan en fornøjelse; folk er hjælpsomme, API’erne er åbne, og tingene fungerer bare. Men det er ikke gratis at hoste ting, så når du har fundet den rette instans for dig, så overvej at støtte den.

Jeg betaler et par euro for mit medlemskab af mastodon.green hver måned til gengæld for en SoMe-oplevelse, der er reklamefri og ikke sælger mine data. De planter træer, ca. 600 hver måned, for at kompensere for den CO²-udledning, der forårsages af at holde serverne tændt. Absolut det værd.

Jeg vil slutte af med at hylde alle de kunstnere, som i en tid med AI-slop skaber og deler ud af ægte menneskelig kreativitet. Stop aldrig ❤️

[include-mastodon-feed instance="mastodon.art" tag="#MastoArt" limit="20" excludeReplies="true" excludeConversationStarters="true" onlyMedia="true" preserveImageAspectRatio="true" imageSize="preview" imageLink="status" showPreviewCards="false" hideStatusMeta="false" hideDateTime="true" cache="true"]