From IndieWeb
Jump to navigation Jump to search

The sparkline template is used to display an inline photo with an optional class attached, e.g. to make a u-photo microformat. It is commonly used to create templates for users to sign their name on event RSVPs or other wiki pages.

Blank Template

Copy, paste, and fill in URL of the photo:

{{sparkline| http://example.com/profile.jpg}}

If you want to add a class, add a class= parameter:

{{sparkline| http://example.com/profile.jpg|class=u-photo}}


This template accepts one unnamed parameter, which should be the URL of the photo, and a named parameter class for class(es) to add to the <img> tag.

How to make a small h-card template

To make a small h-card template that allows you to easily add your name, link, and photo to a wiki page:

  • On any wiki page, add: {{yourname}}
    • Replace "yourname" with your name or screen name
  • Click the resulting link to edit the template.
  • Copy, paste, and edit with your information (note that you do not edit the word sparkline):
<span class="h-card" style="white-space:nowrap">{{sparkline| http://example.com/your-profile-image.jpg}} [[User:Example.com|Your Display Name]]</span>

How to include your h-card in your wiki signature

After creating your h-card template, open the Special:Preferences page and scroll to the "Signature" section. In the "New Signature" field, add {{subst:yourname}}. Check the box for "Treat signature as wikitext (without an automatic link)" and click "Save."

You will now be able to sign your comments on the wiki with your h-card, using three tildes: ~~~

To sign with your h-card + current datetime, use four tildes: ~~~~

How to edit a sparkline

If you want to change an existing sparkline – for example, to update the user image – you can find the template at:


(where "sparkline" is your sparkline title e.g. "aaronpk")



{{sparkline| http://tantek.com/logo.jpg}}

Will generate:

small h-card template using sparkline: (see: Template:t)

<span class="h-card">{{sparkline|https://twitter.com/t/profile_image}}[[User:Tantek.com|Tantek Çelik]]</span>

Will generate: Tantek Çelik