Profile image microformat

Profile Page
,
1

I’m working on integrating microformats in a variety of places across my omg.lol properties. One of the places I have less control over the markup is the Profile Page picture.

In whatever template is used could it be updated to add the class u-photo?

There are additional microformats that would be good to add to get the whole profile page up to speed with very little work needed by users, but they can more easily be added manually. The profile picture seems to be the one that is “spit out” without markup control. Alternatively I could load it from my CDN instead of using the shortcode/include.

6 Likes
2

Sorry for the delay on this—the class has been added. Happy to add others where needed!

1 Like
3

Woot! I might take you up on this, re: more classes, and that way everyone would benefit from a full-fledged h-card without needing to know how or what to add. I would say no hurry if you’re otherwise tied up, but it really would just be classes and perhaps a wrapper here or there.

TBD

4

The elements that I think would most benefit:

  • <body> or <main> add class h-card (I currently have an additional wrapper for this but can remove)
  • Name: add class p-name
<h1 id="name" class="p-name">
  Some Name <a id="verification" style="text-decoration: none; border: 0;" href="https://home.omg.lol/lookup/some_address"><i class="omg-icon omg-verified"></i></a>
</h1>
  • Pronouns: add class p-gender-identity
<div class="p-gender-identity metadata" id="pronouns">pronouns/here</div>
  • Occupation: add class p-job-title
<div class="p-job-title metadata" id="occupation">
  <i class="fa-solid fa-fw fa-solid fa-business-time"></i> &nbsp;Job title
</div>
  • Location: add class p-locality
<div class="p-locality metadata" id="location">
  <i class="fa-solid fa-fw fa-location-dot"></i> &nbsp;A region, city, or town name
</div>

I believe everything else on my profile I hand coded a long time ago so I don’t recall what else was “out-of-the-box”, but:

  • the “Bio” should be wrapped with a class of p-note
  • it would also be good for any link, such as “Profile items”, that are to a social or other profile/web presence to have a rel="me" and class of u-url

Like I said, I have already added these manually by putting <a>s in instead of using Markdown.

And maybe it is overkill, but perhaps this should/could be opt-in? Check a box to automagically make your Profile page a microformats h-card? Maybe that’s too complicated, I don’t know.

Here’s the h-card documentation on the Microformats wiki: h-card - Microformats Wiki

1 Like
5

Really appreciate this thorough list. Will work on adding these over the next few days and will follow up here when complete. :+1:

2 Likes