html and images

Microformats2, WordPress and Featured Images Classes

In my exhuberance to post an image along with articles syndicaed from my site to Twitter, I hastily started adding the microformats2 class u-photo. I didn’t know better. It was brought to my attention that u-photo is meant for actual photo posts, where the image is the primary content. An experimental mf2 class u-featured for featured images would be more appropriate. A GitHub issue for brid.gy was added, and today, u-featured support was added to <brid.gy> for all silos.

Which brings me to WordPress. There isn’t an inherent way to add a class to a featured image when you attach it to a post from within the admin. However, I have found two different options. The first, would be to do it at the theme template level. In my case, I am now using the featured image for the image that appears above articles, and also used on the home page if in the most 3 recent articles. In my single.php template (actually template-parts/content.php but for simplicity, assume single.php) I have:

<?php if ( has_post_thumbnail() ) {
        the_post_thumbnail( 'latest-article-home' );
} ?>

where latest-article-home is the custom size. Here you can add your custom class.

 if ( has_post_thumbnail() ) {
        the_post_thumbnail( 'latest-article-home', array('class' => 'u-featured') );
} 

However, you may want to just add the class to all featured images in which case, you can filter wp_get_attachment_image_attributes.

function mf2_featured_image($attr) {
  remove_filter('wp_get_attachment_image_attributes','mf2_featured_image');
  $attr['class'] .= ' u-featured';
  return $attr;
}
add_filter('wp_get_attachment_image_attributes','mf2_featured_image');

Why remove the filter inside the filter? I wondered the same thing, and the author of the Stack Exchange answer where I found this looking to filter the_post_thumbnail “So that it only runs once in the particular circumstance that that you want it to run”. Made sense to me and works as expected.

I’m still curious if the bridgy-publish plugin should have this filter for users who may not fully understand the differences and why their featured image doesn’t show up with their post,but having multiple options in the short term while that is decided is good enough™ for me.

Owning My Feed Reading

I’ve been a stalwart RSS (Atom) reader since I started blogging 12 years ago. Back then, in the dark ages, it was the only way to easily follow what people were talking about on the interwebs. Fast forward to 2016, getting back into using my blog, the IndieWeb, I was still reading my long currated list of feeds, but started hearing about ways of interacting from your feed with your site. Some might call them Linkblog posts, IndieWeb vernacular use more specific terms of like(favorite), reply, repost and bookmark. What ever you call them, it is a way of sharing and commenting on your own site content from other people’s site.

So I had set myself a to-do to set up my own feed reader this year. Lo and behold last few days Jonathan LaCour( @cleverdevil ) began experimenting with NextCloud News and micropub for just those IndieWeb interactions and a feed reader. Today he relased a plugin on GitHub to use Quill for the micropub interation.

I know what I’m doing tonight.

Comment Backfeed from Twitter

Learning WordPress Comments Deeply – Why?

This post was originally intended to explain how I’m using the tools already built for WordPress to separate out likes, reposts and replies/comments. A follow-up post is forthcoming

When most people think of comments, they think of spam and trolls. I know I did. But then I discovered the IndieWeb, a movement to create interoperable components that would allow a more robust way of interacting with your site and the rest of the web. Most of the content published here is now syndicated out to “silos”, in my case primarily Twitter 1. And with that, if someone replies, retweets or likes that note or article, that interaction is stored in the WordPress database and displayed with comments.

Which leads to a broader discussion among WordPress users participating in the IndieWeb – How to better manage the different types of interactions? David Shanske, who has being doing yeoman’s work in building and contributing to the plugins that make IndieWeb possible with WordPress, outlined some of the hurdles and how to improve WordPress comments for the IndieWeb.

While I admit I do not see the utility in having a permalink for a comment, I also admittedly haven’t looked closely at the underlying code to know where the benefit is. I definitely see the need to fully flesh out custom comment types and would like to work with him as an evangelist to see who/where in the WordPress community we can lobby to put that in motion. I’d definitely like to contribute any code I can, as well as help with documentation.

When I discovered WordPress twelve years ago and started this personal blog on it, WordPress was a tight nit community of users dedicated to the democratization of the web. I still believe there are participants in the project where that is a guiding principal. I have no doubt Matt Mullenweg believes in that principal still. Which is why I have confidence that if framed in the right way, the IndieWeb desires to expand on the code managing and storing comments can be a priority for the greater WordPress community.

There is definitely a laundry list of wants and needs to better allow for a WordPress site be IndeWeb out of the box. A big one would be support for microformats 2. Custom comment types as outlined by David would be another. And I’m still only scratching the surface.

If you are interested in more about the IndieWeb or how we can move the needle in WordPress, I’d love to hear your response.


  1. I’m weaning myself off posting natively to Twitter, but that’s an evergreen statement. 

Forking Paths

In no small part I started down the path of rebooting my personal site employing the tenets of IndieWeb principles because I read about it on Jeremy Keith’s weblog adactio. It took some time to come to fruition, with lots of starts and sputters, and I still have itches to scratch.

I wasn’t surprised then when I read his post from his recent talk . He does a superb job of starting from the beginning of the web and coming full circle to where we are today with “walled gardens” and how we do not have to lock ourselves into them.

I would like us all to spend more time in the garden of forking paths. I would like us all to continue to grow this garden of forking paths. Add your own website to this garden of forking paths. Use it to make more links.
Jeremy Keith

Plans for Jekyll IndieWeb Project

I started a project soon after I began embracing the IndieWeb for the Jekyll platform, Jekyll IndieWeb (A less than inspiring project name I’m afraid to say.) My initial goals were to have a framework for myself that was fully microformats 2 compliant to build my own site off of and to share a starting point for anyone new to having their own website and wanting to embrace IndieWeb themselves.

So far I know of one person who is using it, which is encouragement enough to continue looking at ways to improve it. In the upcoming release of Jekyll, themes will be supported. While considered a minor enhancement, I think its a major milestone for Jekyll. Previously, there was no simple way to change the look and feel of your site without manually copying files into your install. Most theme projects are packaged as standalone Jekyll builds.

So that said, my plan moving forward to is to package the microformated theme, complete with the same config options as a Gem under the name “Crier” (as in town crier. Not sure it’s anymore imaginative than the original project.) The original GitHub project will switch to the Gem once the new version is released, but will stay as a standalone Jekyll install for anyone who wants to get started from scratch. Also, Tom began working implementing a webmention gem for sending while at IndieWeb Summit 2016. With the help of Bear in the IndieWeb community, I hope to have a tutorial and example of using continuous integration to build and deploy a site back to GitHub allowing the sending of webmentions along with the already supported receiving.

I would love to hear from anyone else interested in the project or using it, and what else you would like to see. Long term goal is micropub support.

IndieWeb Summit 2016

This weekend is the 2016 IndieWeb Summit in Portland Oregon. I would have loved to attend in person, but a cross country flight wasn’t in the cards. Fortunately, the organizers have long had plans in place to accommodate remote attendance by providing live video feeds of demonstrations as well as covering a couple of the breakout sessions on Saturday. IWC also has a robust IRC channel which will facilitate participation on build day.

My primary goals beyond furthering my understanding of the technologies behind the IndieWeb is to switch back to webmention.io for receiving webmentions. Aaron Gustafson updated his Jekyll plugin and I like the idea of cached mentions as well as the idea of using progressive enhancement in displaying them. This will entail taking the mentions from the current tool and formatting them to match Aaron’s cache file.

Secondly, I want to wrap my head around syndicating from micropub and begin to use it more. I believe there is a workflow out there, I just need to fully understand how to wire them all the bits together. If time permits, also in the micropub realm, I want to get mobile publishing set up.

Housekeeping May 2016

Figure for my own reference I should document the updates I’ve made to the site the last month.

I’ve written before that my primary goal with the reboot of this site is to embrace IndieWeb. The first step was receiving webmentions, then sending them. Also in the process I, started an indiewebified Jekyll theme (which I’m using on this site at the time of writing.) Part of that was to have better microformats in the markup.

The big itch that I wanted to scratch was implementing micropub to free myself from Twitter (something I’ve failed at thus far). With the help of Pelle Wessman who shared n bit of yet to be public “glue” to pull together his other tools, I set up my own micropub endpoint on a Heroku.1 I still need to workout adding a syndication endpoint for Twitter so I can auto-tweet notes, but that is coming.

Once that was in place, I was able to use the tools Aaron Perecki built, Quill and OwnYourGram. Quill is a web based micropub publishing app, and OwnYourGram is a service that helps you PESOS your Instagram photos to your own site2.

A lot of the experiments I’ve been doing here might be overkill for a simple blog, but are great ways to expose myself to new technologies. I’ve long had an Amazon Web Services s3 bucket set up as a CDN, but had never found a workflow to efficiently use it. With the my current build/deploy process with Travis, a copy of the Instagram photo is saved to my GitHub repository via micropub. In the build script, the image is copied to the s3 bucket, then linked to the CDN.

The primary reason to use the CDN was I went through the steps to get 100% on Google Pagespeed (last I checked). Since the site is primarily text and is already static it ranked pretty well, but I went ahead and configured loading critical CSS3. (I had set that up with my old Habari theme, but Google’s added a step to async load the remaining CSS). I also had to tweak caching in nginx, which while I was in there, I went ahead and set up http/2. The primary reason I moved back from GitHub pages to my VPS was to serve the site over https with a free LetsEncrypt SSL certificate.

Finally, I went back and forth on analytics. I don’t need them, but it’s nice to see what visitors are looking for and at. I poked around at some self hosted options, ultimately decided for now that for the people who don’t want to share data with Google, there are browser tools to block sending the data, which I’m OK with, therefore using GA here isn’t forcing anyone into it.

I still want to do a fresh design, but only after last few kinks in Jekyll-IndieWeb theme are fixed. I’ll still use the markup as the foundation, just present it differently. As always, if you have any questions, hit me on Twitter @miklb or leave a webmention and I’ll do my best to reply.

  1. Which was my first experience with both Heroku as well as a node app.
  2. Instagram has locked you out of pushing your images from your own site to Instagram.
  3. The command line tool in Filament Group’s CriticalCSS tool made that pretty trivial.

Interest in Tampa Homebrew Website Club?

Gauging interest in Tampa to see if anyone would be up for joining a
Homebrew Website Club. A lot of tech folks have vey neglected personal sites and this would give folks a chance to get together and talk tech and work on their personal site and pet proejcts. Platform agnostic (read, not another WordPress meetup) so open to anyone. If interested ping me on Twitter @miklb for now and I’ll sort out finding a location and setting up a time. Only looking for a couple of people to get off the ground.

Breaking Out of the Silo

In my never ending quest to make this site all things “miklb”, one of the goals of the IndieWeb is to POSSE, that is, Publish on your own site, syndicate elsewhere. Breaking the habit of using Twitter without posting first on my site is going to be a hard one, but it’s a goal. While debates rage about extending character counts to 10,000 words, if we only were to use our blog for long form thoughts and link back to Twitter, this wouldn’t be an issue. Consider this an exercise in