Taming the snapshots

Snapshots

Snapshots in WordPress are popups which appear when you hover over a link. They’re meant to preview a site so you can decide whether to visit.

Sometimes they’re useful: I use them to check which blogs in my blogroll have been updated, so I can visit just the ones with new material. At other times they’re downright annoying: for example when one pops up over a picture I’m viewing.

At least for the theme I’m using, WordPress settings only let you turn all snapshots on or off. There isn’t a setting, say, to turns them off just for pictures, or show them only for external links.

Mine are currently turned on. So I can demonstrate, with a link to the brilliant comic xkcd. Hover over the link below and you’ll see that

• this is what happens.

(It took me a while to realise that you’re then supposed to click the link in the snapshot, not the one in the text; I was trying to chase the snapshot out of the way in order to get at the link in the text and click that.)

But

• what if you’re rather it did this
• or even just this?

Gaining some control

Opera 9.6 has some nice features to analyse displayed web pages and see what’s going on. A rummage through a page of my blog revealed the existence of some likely-looking classes (categories which can be applied to HTML tags) with names like snap_preview and snap_noshots. So I tried these out in some test posts and now have what I think is the solution. It works for my blog, at least. (I suspect there may be some variation depending which WordPress theme you’re using; mine is Cutline with some changes I’ve made to the appearance.)

This is what I found:

Turn off all snapshots throughout the blog, overriding any settings made in individual posts

Go to Appearance ⇒ Extras and untick the box.

If you want any snapshots at all

Leave the box in Appearance ⇒ Extras ticked.

Turn off snapshots for an individual link

Include class="snap_noshots" in its tag.
Example: <a href="http://xkcd.com/" class="snap_noshots">

Turn off snapshots for a section of a post

Put <div class="snap_noshots"></div> around the section concerned.
Caution: it’s tempting to do this for the More tag. But this doesn’t work properly, since when the post’s introduction is displayed alone, it has the opening <div> tag but no closing </div> tag. Similarly, if you decide to put <div class="snap_noshots"></div> around the entire post, you’ll have to avoid using the More tag in it.

Override this to turn snapshots on for an individual link

Include <class="snap_preview"> in the link’s tag.
Example: <a href="http://xkcd.com/" class="snap_preview">

Turn snapshots back on for part of a section where they’re turned off

put <div class="snap_preview"></div> around the part where you want them.

Add hover text to a link

Include title="the text you want" in the tag.
Example: <a href="http://xkcd.com" class="snap_noshots" title="Link to a web comic I  enjoy">

Notes

• I’ve been cautious in those instructions and only used  <a> and <div> tags. That’s because those are the only ones I’ve tried. Presumably you could add the class= settings to other tags  too, e.g. <ul class="snap_noshots"> to remove snapshots from a list of links. But I’ve not checked.
• I’m not sure how universal it is for browsers to turn title="sometext" into hover text; all I can say is that Internet Explorer and Opera 9.6 both do it. If you know what other  browsers do please tell me, and I’ll add the information to this post.
• There appear to be circumstances where turning snapshots off in Appearance ⇒ Extras only turns some of them off. I suspect it might vary from theme to theme. Any more information on that welcome too.