Tag Archives: snapshots

Shall I turn them off?

Note

Since I wrote this, WordPress have switched to using a different version of the popups. They now ignore the settings I was using for turning them on and off for individual links, and personally I find the new ones ugly and annoying, so I’ve now turned them off for the entire blog.

Snapshots (snap previews)

I’m still debating whether to turn off the so-called snapshots on my blog, now that I’ve discovered how to customize them a bit. Some people like them, some hate them, and I like them when I want them and not when I don’t.

As a tryout, here are two versions of my blogroll. One has the snapshots which pop up when you hover over a link, and the other has hover text (for the links where I’ve written any). Please try out the behaviour and then vote in the poll. It would be really helpful to have as many people’s feedback on this as possible.

Hover over these links

WITH

WITHOUT

Give your feedback

I can either have snapshots pop up for all links, none, or selected ones. Some of these options are harder work than others.

If you think snapshots should pop up just for some links, then please tell me which ones (tick as many as you like, and add more in “Other” if you want):

By the way, the reason you can’t view the results of the second poll isn’t that I don’t want you to see them, but that they drop off the bottom of the background image and end up as white text on a white background and I don’t want to go through the other 18 appearance styles offered by Polldaddy looking for the one that behaves itself. If people do vote, I’ll let you know the result in a future post.

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.