Dynamically Resize WordPress Images On-the-Fly

Creating multiple image sizes in WordPress is quite easy when the image is attached to a post or page. Theme.fm has an excellent write up on how to do this with the add_image_size function. The problem with this method is that it creates a lot of bloat because for every image uploaded it’s sized to this new size even if you’re not going to use it. Also getting the different available sizes from just a url is a pain.

To side step this issue Theme and Plugin developers have resorted to using scripts like TimThumb , which recently have a major vulnerability discovered. Another script that can generate images on the fly is called vt_resized. This script is nice because it uses native WordPress functions to generate the new image. The only is issue is that it does not support WordPress Multisite. Here’s a modified version of the script with crude multisite support.

If you find a bug let me know. Hopefully WordPress will provide a similar function in the WP core in the future.

On Github

Moving johndturner.com to Posterous

Updated: Back on WordPress as of 4/18/11

Posterous is a super easy way to post anything to the web. I’ve heard it described as a life streaming app, but I think it’s much more than that.

I signed up for Posterous back when it 1st came onto the scene. Back then it was most noted for the ability to post to multiple site like Facebook, Twitter, and Flickr, which was super cool but that’s about all it did.

I recently checked it out again a couple of weeks ago and noticed they had added tons of new features such as domain mapping, google analytics and feedburner integration, and the ability to create custom themes!

I have been a long time WordPress guru and I still am. The majority of my time is spent developing for WordPress and I even run a site builder for Bands using WordPress . But just because I’m a WordPress developer does not make me a hardcore blogger.  Developers usually spend more time coding than the do blogging. Which brings me to why I switched from WordPress to Posterous for my personal site.

I love how super easy it is to post to Posterous. I can open up gmail, attach some images, video, url, map, text or whatever and Posterous deals with it. Posterous will post it correctly and it will go out to my other sites. I can even tag from email. It handles syntax highlighting. They also have a smart bookmarklet that I can use to comment and post things from the Internet I find.

This is perfect for me because I usually don’t write long thought out post. They are usually done on the fly and less formal. And now with the theming feature I can customize the look and feel and even some of the functionality. As you can see on mine I using the excerpt tag which is listed as experimental. I’ve also hacked it a bit to created faux pages with the help of iframes and the {tagsascss} theme tag.

I have posted more in the last couple of weeks than I did the last 1 years using WordPress for johndturner.com and it’s sort of fun. Don’t get me wrong though, I think WordPress is definitely the leader in full featured blogging platforms, but as I said earlier I just don’t need all of that for my personal site. I also like fast and light weight nature of Posterous.

I’m looking forward to seeing what Posterous will come out with next. They have been cranking through some feature request. I personally would like to see the ability to us JavaScript in themes and a sitemap.xml auto generated, but I’m sure what ever they do next will be cool.

WordPress The Loop Shortcode

I went searching the other night for a WordPress loop shortcode. I was surprised to find that there were none out there, so I made one. Use this shortcode below to create a loop on a page , post , or sidebar (with some tweaks). Insert in your functions.php or you can create a plugin for it. I have a plugin where I put all my shortcodes and that works quite well.

Using CSS Frameworks with Thematic

Out of the box the WordPress Thematic Theme Framework has several bullet proof css layouts. Sometimes though a project requires a different layout or css.   I recently had a project where I needed to use the YUI CSS Framework. I was able to shove all my code in via Thematic hooks without touching Thematic’s source code. Some people might say this is divitis to the max , which is true, but for the project the benefits out weighed the extra weight of the page. Using this method below you can easily add 960 Grids, Blueprint, or whatever CSS framework you’d like. First in the your child theme’s style.css import you theme’s css framework like you would the out of the box layout styles.

[css] /* Reset browser defaults and Grids*/ @import url(‘http://yui.yahooapis.com/combo?2.7.0/build/reset-fonts-grids/reset-fonts-grids.css’); [/css]

Next we start diving into Thematic’s source code to find the hooks and where we need insert code. So as you can see below I start adding code into these hooks on our child theme’s functions.php file. I don’t recommend using my function naming convention , but I got lazy :) . So with my example all I have to do is change the class on line 3 and I can easily change my layout. Depending on which CSS Framework you use and your layout will depend on which hooks you use. Just start going through the source code and figure out how to start wrapping current elements with your css framework. Also you can use the add_action priority and remove action to do anything you want. If you want to use YUI feel free to use the code below. View my source code on this theme to see it in action. 

Controlling Sidebars in Thematic

I started using Thematic a couple of weeks ago and have absolutely fallen in love it with. Mucho hooks and filters, which is key to customizing just like WordPress.

I needed a way to control the primary and secondary sidebar and which pages they would show up on without a plugin [Widget Logic] . After digging through the Thematic code and finding this awesome breakdown of Thematic. I discovered that I could shove some logic code in the Thematic hook ‘thematic_abovemainasides’. In fact you can shove the code in other Thematic hooks to control any Thematic widgetized area.

The code below shows the secondary sidebar only on the blog page and single pages, all other pages show the primary sidebar.

Twordder

Description


Twordder is a Twitter inspired WordPress theme. My current theme is an example. Features Include:

  • Custom Background, Sidebar, Text, Links,and  Sidebar Border Colors
  • Automatically pull color palettes from ColourLovers.com
  • Custom Background Image
  • Custom Logo
  • Custom Page Width
  • Left or Right Sidebar
  • Customize Sidebar Width
  • Rounded Corners in Firefox, Safari, and iPhone
  • Drop Down Menu Support
  • Facebook Connect Support
  • Threaded Comments
  • Gravatar Support
  • Microformats
  • Sticky-Post Class Support

Download


Version 1.4 – Download

My First WordPress Plugin – WP YUI Menu

Today I’m releasing my first WordPress plugin, WP YUI Menu. This plugin will allow you to easily add a YUI Menu to your WordPress theme.

YUI is Yahoo’s JavaScript library, and it’s an awesome one I must say. I have used it quite extensively and have been very impressed with it. In fact my site uses YUI’s Css Framework and the  YUI Menu Plugin

Get WP YUI Menu!