Signifying the WayBack Links

I cannot give enough thanks for the Internet Archive WayBack Machine. I should give money, but instead I offer a blog post.

And that’s a thing when I am looking to use or refer to an old post here- more often than not, many to most if not all the links are broken. Some days I just shrug, but others I modify the dead links with ones to their remnants in the Wayback machine.

A few browser extensions come in handy.

Broken Link Checker can identify the hyper-corpses.
WayBack Machine replaces the useless (link not found) with one to a remnant in the WayBack machine

I was doing this cleanup to a post from 2003 (older than dust) and was thinking it would be nice to have a indicator that the link from my site was to the WayBack Machine.

On some past projects I have used some CSS to add an icon to links that point to a pdf, this is possible with selectors available for choosing links based on the href= attribute — see https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

I made a quick icon based on the avatar for the Internet Archive twitter account (inverting the colors) that for quick and dirty purposes I stuffed in a directory on my site. This is the CSS I added (after a bit of fiddling on the href selector) to my theme (this could be tossed into any WordPress site via the Customizer:

a[href*="web.archive.org/web"] {
    padding: 0px 0 0px 22px;
    background: transparent url(https://cogdogblog.com/images/social/archive.png) 
      no-repeat center left;
}

a[href*="web.archive.org/web"] {

padding: 0px 0 0px 22px;

background: transparent url(https://cogdogblog.com/images/social/archive.png)

no-repeat center left;

}

My image is 20px by 20px, so what it does is add padding on the left to allow for the image to be displayed. The [href*="web.archive.org/web"] selector will apply this to any hypertext links to a Wayback Machine url.

This was the old post you can see it in action on (I also end up adding featured images when I dig into past posts… because I can)