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 toot with a link to a post that created. I will get something like the following.
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.
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.
- 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.
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.
MandarisComing Out Of Their Shells was a studio album, and subsequent live musical tour that occurred from 1990 to 1991 (in 1992, it toured overseas). The tour was endorsed and sponsored by Pizza Hut. The very first showing of the tour was broadcast live on Pay-Per-View. A VHS recording of the broadcast was made released, as well as a "Making Of" direct to home video. The tour is generally lambasted for its terrible costumes and wafer-thin plot. The band featured Donatello on keys, Leonardo on bass guitar, Michelangelo on guitar/lead vocals & Raphael on drums/percussion/tenor saxophone/vocals. Guest vocalists include Master Splinter, April O'Neil, and The Shredder.
