Blogs look better with nice in-post images, just admit it. Yes, content is king, but pure text without some eye candy is just plain boring. Continually adding images though, from a blogger’s perspective, can be a real pain, from finding them to editing to ensuring fit and finish. To keep things simple, here is my workflow:
1. Find the Image
If you have an expense account and are looking for solid rights to generally high quality images, go over to www.istockphoto.com and search to your heart’s delight. There are some wonderful images for incredibly reasonably prices. However, thanks to Flickr’s fantastic use of Creative Commons, and the Advanced Search feature (check the CC search option towards the bottom), finding legally usable, high quality, and relevant imagery for your everyday blog posts can be fast and easy.
Just *always* remember to check the type of CC license, and ensure you provide proper attribution to give the photography credit for their work.
For screen caps and shots, the easiest tool I’ve found is Grab, which comes with OSX (search for it in Spotlight). Add this handy utility to your Dock.
2. Understand Your Layout
Figure out how wide your main blog column is, so you know the max image width. An easy and fast way to do this is by using the Firebug extension for Firefox. Right click somewhere over some text in one your blog posts, select Inspect Element, and then look at the bottom right window. Select Layout, and look at the first number (e.g. 520 x 190) in the center box. That *should* be the pixel width of your main blog content column. Your mileage may vary.
3. Use ImageWell Templates for fast editing
I highly recommend ImageWell for fast image editing on a Mac (and no, that’s not an affiliate link). It may cost $20 or so, but it’s well worth it and saves you from trying to string something together with iPhoto or firing up that beastly overkill known as PhotoShop. Open ImageWell, drag your saved image into its window, click “edit” and resize/crop the image to your desired width.
If you use full column width images on every post – which makes things much easier by obviating the need for text wrap, IMO – you only need to do this once by hand in ImageWell. Set up the max width, ad a border if you like, then select “Add Template” and name it. From then on, every time you edit a photo in ImageWell, just select “File > Templates > yourtemplatename” and done. Your image will be resized, border applied, etc.
4. Upload and enjoy!
You can either use the handy “Send To” feature in ImageWell to FTP the image directly to your blog’s content folder, or use something like WordPress’ image gallery upload feature to get the image where you need it.
Once you get the hang of it, the longest part of the process will be fretting over which image to actually use. The download/edit/upload process should take mere seconds, and you’re on your way to blogging bliss. Good luck!
Photo within the screen shot is by vernhart on Flickr via CC License. Screenshot itself taken of ImageWell during a sample editing process.
[UPDATE: I still enjoy Thesis, and the premise of this post remains sound, but I’ve since moved off of it and frameworks in general. Mentioning just in case you look around and say “hey, this doesn’t look at all like Thesis!”")
Does your blog have more than a passive resemblance to this? If so, you’re not alone.
You’re a Thesis Theme for WordPress user, which is great. I love Thesis, use it for most of my blogging efforts, including this site. I recommend it often, including for a recent client project. Judging by the thousands of Thesis-based sites that seem to exist and the hefty revenues the creators are generating, so do many other consultants. Its ubiquity attests to its quality and utility, however it also leads to a depressing, and increasing, sameness in blog design.
Why? Because Thesis has several distinctive default design features, which most bloggers don’t see fit to modify. For the most part, you can identify a blog built using Thesis within seconds thanks to these tells: default fonts, menu bar, RSS button, comment brackets, and of course, the famous multimedia box. Spend enough time visiting blogs, and you’re likely to start to thinking some higher blog authority has approved one basic design standard which all bloggers must adhere to.
In a world where content is king and most readers interact with your blog via RSS anyway, is that a bad thing? Yes, because first impressions still matter, and showing you took the time to tweak and customize your blog design, even in small ways starting from a common base, shows pride in your product (your content, personal brand, etc).
So…dare to be different.
Take all the wonderfulness of the Thesis Theme and make it your own. Beyond the standard design suggestions – header graphics, page image/pattern, color changes, and so on – make sure you change in some way, ANY way, these four classic “tells”:
1. Default Fonts
Just change them, to anything really. Go sans serif for the body font, change up the default sizes, live it up, be crazy. I prefer using header graphics, which eliminates the default serif header font, one of the most common “tells” of Thesis fonts, but the in-post headline and body fonts also should be looked at. Also consider changing up the line space in the sidebars for an even bolder departure.
2. Menu Bar
This is perhaps the most distinctive and yet least modified (by users) design element of Thesis. Let’s face it, it looks good and is pretty damn useful, which is why you see it everywhere. Keep the basic functionality, by all means, but change up the design some. Kristarella has a nice tutorial to get you started. Or grab Firebug, hit Inspect Element on this blog or some of the wonderfully designed Thesis menus (such as here, here, here, or here).
3. “Subscribe RSS”
It’s easy and a one-click solution to displaying your RSS feed, again why you’ll see it live on unchanged for so many Thesis-based blogs. At a minimum, try modifying the wording somewhat, or drop it altogether and move your subscription call-to-action to the sidebar or elsewhere. Use the built-in Subscribe widget or all-in-on widgets like Add to Any.
4. The Multimedia Box
The multimedia box is fantastically useful and relatively unique among WordPress themes – the blessing and the curse of this feature. The blessing is in its utility: include a page-specific promo video, a rotating ad series, beautiful photos to liven up your site, or even custom code of your own. The curse is in its ubiquity – it’s so damn useful that huge numbers* of Thesis users keep it, making it an instantly recognizable and hence repetitive design element.
It’s so damn useful, it’s become a bit boring.
So what are your options? You can just drop it by selecting “do not show box” under the Multimedia Box section of Design Options. This leaves you with the standard sidebar(s). Alternatively, make it your own by changing up the CSS and image sizes and using the rotating images option or limit it only to specific pages (for example, where you’d like to promote a particularly relevant video or ad).
*based on my unscientific angst-fueled observations of a bunch of blogs
One relatively new option is trying out a Thesis skin, which are appearing in increasing numbers and quality. This blog uses my own variation on the Fresh Company skin from ThesisThemes.com, which does some interesting things with the header other design elements. Even then, it’s worth taking a few minutes to change up the defaults to give the skin your own personal style.
The beauty of Thesis lies in its flexibility and simplicity for the average blogger – you have a wealth of design options right there with not a line of code in sight. Just consider playing with those defaults, or spending some quality time in the custom.css file to truly make your blog design your own.