banner image
๐ผ
This article is a stub. You can help the IndieWeb wiki by expanding it.
A banner image is a wide image (AKA header image or hero image), typically in an aspect ratio of 2:1 to 4:1, displayed as a backdrop at the top of a profile page or post permalink.
Why
Banner images help give a home page a distinctive, recognizable look, and can also provide a text overlay of the tagline of a site or page.
Topical banner images can be used to give a summary or an evocative context for a blog post on a specific topic.
How to
Embed a banner image near or at the top of a page, optionally stretching it using CSS to fill the full width of the page.
If your banner image has text, please make sure you mark it up alt text for that text at a minimum, and regardless, consider a brief textual description of the image as well.
How to markup
A banner image for a post should be marked up as a u-featured
image inside the post h-entry
. Like any image, please provide alt text for the banner image. See the #IndieWeb_Examples below for real world examples of such markup.
โ๏ธ DO NOT mark up as a u-photo
, because a banner image is decorative content, NOT primary content, unless you are literally posting about the banner image itself (or multiple).
IndieWeb Examples
Add yourself!
Add yourself hereโฆ (see this for more details)
epoch
epoch banner image on homepage marked up as a u-featured
Chris Aldrich
Chris Aldrich on uses u-featured
on an <img> tag on all articles at http://boffosocko.com with WordPress Post Thumbnails/Featured Images (retroactively since 4/25/17); also used selectively on posts since ~2/2017
- Example: 2018-02-08 : A better way to subscribe to or follow sites on the open web (archived)
The Lazarus Corporation
Paul Watson uses u-featured
on an <img> tag inside the h-entry
on the banner images for his blog posts since September 2024:
- Example: 2024-10-15 : Collective joy and collective ownership of ritual
IndieWeb Banners
Thanks to Chris Aldrich for these banners!
General description: artistic looking banners using a beautiful photo background and a pithy IndieWeb-related statement or call to action in white serif text on top, with "indieweb.org" in an IndieWeb logo colored (yellow, orange, red) smaller text somewhere separate from the pithy statement.
Home Page
The IndieWeb is a people-focused alternative to the "corporate web".
Featured on IndieWeb and Getting Started.
Connect
Figure out how you want to fit into the network.
Featured on POSSE.
Control
Control you donโt typically find in social media
Featured in a section in why.
Your Home
Build the internet home youโve always wanted.
Featured on projects.
The home youโve always wanted on the internet.
Featured on homepage.
Creative Freedom
Your words. Your way.
Featured on writing.
The web is your canvas. Donโt let a corporation limit you.
Not featured on any page currently. Suggest one!
The web is your canvas. Which brush will you choose?
Featured on indieweb network.
Principles
Principles and their metaphors.
All our amps go to eleven.
Not featured on any page currently. Suggest one!
Own Your Data
Reap what you sow. Plant your content into the field of your own website.
Featured on own your data.
Who needs a billion dollar typewriter? Type it for your website.
Featured on How to transition from Twitter.
Eat What You Cook
Slow Social
Try eating what you cook on your own website
Rely less on the unhealthy fast food of corporate social media
Featured on eat what you cook.
Independence
Do your own thing.
Featured on different.
Knit your own web identity.
Featured on personal-domain.
Escape Silos
Donโt let your content rot in the dilapidated corporate social media silos.
Featured on silo.
Why are you still posting your content to social media instead of your own website?
Featured on social media.
Not all social media is the same.
Featured on social web.
The bright idea that corporate social media missed.
Featured on how-to-sponsor.
Temporal or Seasonal
Once the haze of 2020 lifts, consider a healthier way to manage your online identity and social media.
Not featured on any page currently. Suggest one!
Happy Newwww.Year!
Featured on newwwyear.
See Also
- logo
- button
- If a banner is purely decorative eye-candy, please set
alt="" role="presentation"
on itstag per https://www.w3.org/WAI/tutorials/images/decorative/#example-4-image-used-for-ambiance-eye-candy
- featured