An h-card can be as simple as you want it, from just your name and URL, to your full contact information and photo/avatar. In the examples below, we’ll add a simple h-card displaying our name, and links to both our website and Twitter profiles.
To add your h-card, we’re going to use the Form Templates feature of Textpattern, by way of the Forms Panel. We’ll be using Form templates for adding many IndieWeb features, so I recommend taking some time to read the documentation when you get the chance.
Creating the H-Card
Start by navigating to the Forms Panel, by clicking Presentation > Forms:
Click on “New Form”, located to the right-side of the page:
Give your new Form a name of “hcard”, and change the type to “Miscellaneous”. Copy and paste the code below into the editor, and edit it to match your details.
<div class="h-card vcard"> <h3 class="p-name fn">YOUR NAME</h3> <ul> <li><a href="http://yourdomain.com" rel="me" class="u-url">My TXP website</a></li> <li><a href="http://twitter.com/username" rel="me" class="url">Twitter</a></li> </ul> </div>
It should look something like this:
Adding the H-Card to Your Site
Now that we have created the h-card, we need to display it on our site. Thankfully, we’re already in the right admin screen to do this, so we don’t have to go far!
Expand the “Miscellaneous” category on the left-side of the screen, by clicking on the heading. Our newly created h-card Form will be listed.
We can choose to add our h-card to any of body_header, body_aside, or body_footer. For this example, we’re going to add the h-card to body_aside. Click the link to body_aside, and the editor will reload.
With Textpattern, you can embed any Form within another using the special tag
<txp:output_form … > (documentation). So to output our h-card, we would use
<txp:output_form name="hcard" />. You can see this in the example code below, where I’ve added the h-card inside a new
section within body_aside. You can copy and paste this code to replace the contents of your editor:
<aside class="complementary-content"> <!-- feed links, default flavor is RSS, so we don't need to specify a flavor on the first feed_link --> <p><txp:feed_link class="feed-rss" label="RSS" /> / <txp:feed_link class="feed-atom" flavor="atom" label="Atom" /></p> <section> <txp:output_form form="hcard" /> <section> <!-- if links exist, renders a links list --> <txp:evaluate test="linklist"> <section> <h4><txp:text item="links" /></h4> <!-- links by default to form: 'plainlinks.txp' unless you specify a different form --> <txp:linklist wraptag="ul" break="li" /> </section> </txp:evaluate> </aside>
You can shorten
<txp:output_form name="hcard" /> to just
Validating the H-Card
Open up the home page of your Textpattern website in a new tab. You should see your brand new h-card displayed just after the RSS/Atom links:
While everything appears to be working, it’s always good to get a second opinion, so we’ll double-check using the IndieWebify.me h-card validator. Enter your website address into the text field, and click “Validate h-card”. The validator will load your site, parse the HTML, and let you know if your h-card is valid or not.
If you have copy-and-pasted the code from the examples on this page, the validation will be successful, and the validator will suggest adding a couple of extra properties. These are optional, but it’s a good learning exercise to modify what you have done up to now to add them in. If you’d like to know the full range of properties you can add, you can find them listed on the microformats wiki page.
So that’s it! We’ve successfully added a simple h-card to our website, which is the first step to bringing our site into the IndieWeb fold. Along the way we touched on how to edit Form Templates in Textpattern, and how to embed Forms within Forms.