jDefault - Image resizing for your NetNewsWire style

Posted
12:28 AM 17 August 2007
Updated
8:51 PM 29 May 2011

Some of you love the image resizing feature of my NetNewsWire style Ollicle Reflex, but would rather see it in a different style, perhaps one with your own particular CSS tweaks? If this sounds like familiar I’ve made a new NetNewsWire style package especially for you.

Project page: jDefault - NetNewsWire style JavaScript template

Image resizing in an existing NetNewsWire style in a snap

jDefault is a bare-bones NetNewsWire style that loads my image resizing JavaScript, and the jQuery library it uses, into the default NetNewsWire template. To ‘enable’ any existing style built without a custom template.html file, simply replace the contained stylesheet.css with the corresponding file from your selected style.

jDefault contents

To expose the contents of the package, right (or control) click on jDefault.nnwstyle in the Finder and select ‘Show Package Contents’. Your existing NetNewsWire styles can be found in your user Library directory:

~/Library/Application Support/NetNewsWire/StyleSheets/

Double-click your custom .nnwstyle file and NetNewsWire will install it by making a copy of it into this directory. If you are editing a style that is already installed you may need to restart NetNewsWire for the changes to take effect.

A reminder: if you haven’t already, you need to enable JavaScript for news items in NetNewsWire’s preferences for this style to do anything remotely special:

  • NetNewsWire Preferences
    • Browsing
      • News Items
        • Enable JavaScript

Building your own JavaScript enabled nnwstyle with jDefault

Of course if you are feeling more adventurous, you may wish to go further and use this template as a mere platform for a fresh custom style. Rename the .nnwstyle file to a name that takes your fancy. Replace my details in the contained Info.plist and share it with the world! I’d love to see what you come up with, and while you are in a sharing mood I’m sure Brent would too.

If you are making frequent changes it is worth making a static version of a feed to test in Safari. Right (or control) click in the feed display pane in NetNewsWire and select ‘Copy HTML Source’ is the easiest way to grab the HTML you need. You will need to change the path to the imported stylesheet to suit your set-up.

More on the imageFit jQuery plugin

The contained jquery.imagefit.js is a complete rewrite of the JavaScript used in my previous NNW styles. For general tidiness and simple reuse it is written as a jQuery plugin. In a small way this is a sneak peek at the upcoming version of Ollicle Reflex.

It strikes me with all the web based feed aggregators popping up, this script may have a use on the web itself to keep unruly syndicated images under control. I am yet to test it in non-webkit browsers. In theory at least it ought to work in Firefox - but in it’s current form it won’t work in browsers that don’t support the CSS property max-width. Certainly not IE 6.

Please let me know if you give jquery.imagefit.js a spin elsewhere. If it holds up I’d like to add it at some point to the growing selection of jQuery plugins.

Further thoughts

18 August 2007

Uploaded version 2 of jDefault. The updated package includes a slightly modification to jquery.imagefit.js.

Although I hadn’t seen problems with the previous version in NetNewsWire, the small change fixed an issue in Safari that became clear when I put up the demo page for jquery.imagefit.js earlier today.

18 November 2007

Chris Messina has stepped up and adapted my imageFit plugin for use as a WordPress plugin. WP-Imagefit proportionally resizes images to fit your blog template.

So if you’re not chained to Movable Type like me (rebuilding this blog in MT 4 is hurting…) and are fond of occasionally posting overly wide images to your WordPress driven blog give it a go.

5 May 2010

Created a basic project page for the imagefit jQuery plugin.

Oliver Boermans is a design geek in Adelaide, South Australia: ollicle.com is a place for Ollie to rant, reflect and share. Feed

Previous entry
16 June 2007
Safari 3 fix for Ollicle Reflex
Next entry
23 October 2007
Bigger link: easier clicking with jQuery