Fix For Herbarium Thumbnails on Talk Page (Firefox Only)

by geckzilla

I've devised a simple fix for the too-long thumbnails on the Talk page. If you have Firefox, there is an addon called Stylish which you can use to edit CSS locally (only for yourself) for any website you view. It can be found here: https://addons.mozilla.org/en-US/firefox/addon/stylish/

After installing the addon and restarting your browser, navigate to the talk page: http://talk.notesfromnature.org/

In the lower left corner there should now be an "S" with a down arrow next to it. (Press Ctrl+/ if you don't see it.) Click the S and select "Write new style > For talk.notesfromnature.org..."

A text entry box will appear and have some code in it like this:

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("talk.notesfromnature.org") {

}

All you need to do is add a single line between the curly braces like so:

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("talk.notesfromnature.org") {

.two-thirds .subject-summary img { max-height: 200px; }

}

Now click "Save" to apply the CSS. This will vertically compress any thumbnail image taller than 200 pixels down to 200 pixels.

edit: Updated CSS slightly

Posted June 18, 2013 5:36 PM

by bumishness admin

Hey geckzilla, could you tell me what browser version/OS combo you use? The subject summaries should already be limited to 200px.

Posted June 20, 2013 4:33 PM

by geckzilla

I've used both Firefox 21 and Chrome 27.0.1453.116 m on Windows 8 and both of them have annoying Herbarium thumbnails until I use the Firefox local CSS edit trick. I have a normal configuration with javascript and plugins enabled, and not a lot of addons. I used Chrome for a while without any addons at all.

Here's what it looks like in Chrome with no changes at all for me: http://geckzilla.com/stuff/nfn_nofix.jpg
And here's my Firefox hack: http://geckzilla.com/stuff/nfn_fixed.jpg

Posted June 21, 2013 2:50 PM

by ghewson in response to geckzilla's comment.

FWIW, I'm using Firefox 21.0 under Kubuntu, and the Recent thumbnails look OK to me. There's just a small problem where "Load more" at the bottom right of the set is partially obscured by the second line of a comment.

ISTR seeing similar to your nofix.jpg from the start of the project until some weeks ago. In fact, looking again, I'm pretty sure. Is there some Javascript caching going on? I'm using Firefox with its own NfN profile and Privacy/History = Never remember history (hi, NSA & GCHQ!).

Posted June 21, 2013 9:13 PM

by geckzilla

Interesting. After further investigation I have discovered that the thumbnails only cover up the comment text when the talk page is viewed with sufficient resolution. My desktop resolution is 1920x1080

Posted June 21, 2013 9:24 PM

by ghewson in response to geckzilla's comment.

My resolution's 1680x1050.

I also seem to recall that the problem I saw until a while ago only affected the top row of portrait-oriented thumbnails, unlike your nofix.jpg. The rows underneath were OK-ish.

Posted June 21, 2013 9:42 PM

by geckzilla

Yeah, if I shrink my screen by only a few hundred pixels, the problem goes away. Still, I imagine there's plenty of people with a 1920 screen since it's a standard HD resolution.

Posted June 22, 2013 3:39 AM

by ghewson in response to geckzilla's comment.

Ah yes, using a 1920x1080 screen I see the same as you. If I resize the Firefox window so it's not full-screen, but narrower, though, I can see the text underneath each thumbnail fine.

I also realise that with full-screen 1680x1050, the author underneath each portrait thumbnail is obscured, on the first two rows of three, anyway.

Posted June 22, 2013 11:23 AM

by bumishness admin

Ah ha! Problem found, fix deployed. "max-height" does the trick.

Many thanks for getting to the bottom of this.

Posted June 24, 2013 4:54 PM

by ghewson in response to bumishness's comment.

It looks much better now, thanks!

Posted June 24, 2013 7:59 PM

by geckzilla

Woo hoo, thanks!

Posted June 25, 2013 8:31 PM