Skip to main content

Not a care in the world.

A dog is curled up and sleeping peacefully on a couch.

I’m looking forward to people complaining about daylight savings time just so I can get a break from election coverage.

One less card for stoot

Auto-generated description: Text spelling stoot! is displayed diagonally on a pink background.

Stoot now has an option that will remove the Open Graph / Meta Tags card associated with the first link in a mastodon post. If you are interested in the tags that Mastodon sees, you can go to OpenGraph XYZ to put in your favorite URLs. Here a direct link to your fifth favorite. Mastodon takes the information meta tags from the first URL and makes them look nice when you post. For example, I posted a toot1 with a link to a post that created. I will get something like the following.

A post an arrow pointing to the URL and the second pointing to a card

Summary

You can now add a toot to your blog without including the Open Graph tag.

{{< stoot instance="$InstanceTLD" id="$ID" enableOGCard="true" >}}

The new enableOGCard option defaults to true so that it doesn’t unexpectedly change on people who have an older version of this plugin.

Details about the HTML and CSS structure

About a week ago, I got a message asking why stoot would render the image twice for the same mastodon toot.

Honestly, I had no idea it was doing this and haven’t looked at the code since I had packaged it up two weeks ago.

But, I didn’t want to leave this person without any help so I started to look into the issue and was able to reproduce the problem with a toot from someone I was already following.

Plumage glass.photo/pratik/3UFkV2LUQ1w

Image 113300475290024282 from toot 113300475439404467 on writing.exchange

Here is the code to embed it if you are using the stoot plugin

{{< stoot instance="writing.exchange" id="113300475439404467" >}}

A very pretty picture, but I don’t know if seeing it twice in succession.

For me to understand something better, I like to diagram it as I step through the code. I’ve included this diagram that shows you what div tags are created when using stoot. If you can always check out the code on GitHub.

All the different parts of a toot generated by stoot
Toot-block
This is the CSS class in the blockquote element that contains the entire mastodon post.
Toot-header
The div contains the information about the account that created the toot.
Toot-profile
This is the profile image of the account that made the toot. I included this CSS from the original project to establish a baseline for styling.
Toot-author
This is a div that contains the two links toot-author-name and toot-author-name that go to the same account page.
Toot-author-name
The name that toot author is going by at the time of rendering. The names sometimes changes as decided by the person in charge of the account.
Toot-author-handle
This is the account name in the @name@server format that mastodon likes to use.
Content
This is the main text of your toot.
Toot-img-grid
Stoot includes CSS and logic to handle 1, 2, 3, or 4 images in a grid and render them properly.
Toot-video-wrapper
Behind the scenes, there are two possible wrappers that render depending on what kind of video media is included with the toot.
Toot-card
This the div that contains the Open Graph card of the first link in the toot. This will include an image, title, and description from the website in the URL.
Toot-poll-wrapper
This is the div that containers HTML <meter> elements to convey the
Toot-footer
Contains date and time of the toot.

The problem is coming from the toot-card and I didn’t want to change all the cards, because someone might have become reliant on this behaviour or worse - never noticed it.

Further CSS Details

I didn’t want to make people work hard to style the included card, so I removed some styling from the CSS.

Show the different divs that make up the divs found in the Open Graph card

There are two div tags in the toot card that you can use to make things work to your satisfaction.

Controlling the Card

The problem is coming from the toot-card and I didn’t want to change all the cards, because someone might have become reliant on this behaviour or worse - never noticed it.

After idenifying the part of the code that controlled the cards, I set a conditional around it.

{{ if eq $enableOGCard "true"}}
{{ with $json.card }}
  {{- $cardData := . -}}
  {{- with $cardData.image -}}
  
  <a href="{{ $cardData.url }}" rel="'noopener">
    <div class="toot-card">
      <div class="toot-card-image">
        <img src="{{ $cardData.image }}" 
          alt="Card image from {{ $masIns }} toot {{ $id }}" 
          loading="lazy" class="toot-card-image-image" />
      </div>
      <div class="toot-card-content">
        <p class="card-title">{{ $cardData.title }}</p>
        <p class="card-description">{{ $cardData.description }}</p>
      </div>
    </div>
  </a> 
  {{- end -}}
{{ end }}
{{ end }}

At the top of the file, we have the following line that sets the value to a default in case it is isn’t specified.

{{ $enableOGCard := .Get "enableOGCard" | default "true" }}

What is next?

Time to close all the tabs and call it a night.

I would like to change the alt text for the incoming images, but I think I would have to learn more about what is offered from mastodon using this API.

I want to that @lmika for giving me some advice about the go programming language. I also want to thank @DaveyCraney for giving me some feedback about stoot.

And I want to thank you for making it to the end of this article.


  1. I am really hating the different names for slightly different things right now. ↩︎

Sharing pictures of tables in excel should be frowned upon.

Manny Monday Oct 28th, 2024

I talk a little bit about starting something new and then transition into the update to the stoot plug-in (or plugin, depending on how you spell it).

Music by LofCosmos from Pixabay.

Transcript

Finish a project.

Start closing the windows filled with tabs and then realize all the other projects.

Go to bed realizing that although you have more to do, you have accomplished something.

Bath time for Lillie!

I have to look into a way for this not to be as scary for her.

A very scared dog in the bathtub.

I’m planning on going to Homebrew Website Club Europe Meetup later today. I’m hoping to talk about masonry, but I think I’ll just get side tracked with coffee.

What a morning!

Hello @lmika, do you know someplace that I can find a quick start guide for the go language? I’m trying to debug an issue with stoot.