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
(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.
Like this:
Like Loading...
The Other Blog Without A Name 