Yeah… a techie post… apologies to my photography-only visitors.
For those of you who may start reading and think “Oh WPTouch” I know about that… or those who prefer a different mobile plugin I’d suggest you hang around for a few minutes as I’ve added a killer hack to WPTouch (or any other mobile plugin) which will undoubtedly make the experience MUCH better for your iPhone (and other mobile device users).
So… if you have a WordPress blog … and display a lot of large images … and you’re either plagued by a pathetically slow host (yeah that would be me), or you simply want to help out the clients who pay based on bandwidth usage, and give them a much faster user experience… this post is for you.
In the remainder of this post I will presume that you will be using WPTouch but as I mention at the end you can use this with any other appropriate plugin/theme.
What you need to get
WordPress Plugin: WPTouch – don’t let their “deliver an incredibly fast … experience” claim fool you… you’ll still want to do my hack 🙂
Install it as they recommend, configure it to your taste, and test it out either on a mobile device, or in firefox you can somewhat simulate it by getting the Firefox Plugin: User Agent Switcher and then once it’s installed under the tools menu choose iPhone 3.0 as the user agent and then browse your site.
Ok. Once you’ve done this, you will already feel the need to add a follow link to my site (yes that would be nice if you found this useful – please link to http://www.disciascio.com with a link text of South Florida Wedding Photographer) …
Why is it still not perfect
Well, once you install WPtouch your blog interface will be significantly simplified and iPhone-ified in terms of it’s looks… however any images you show on your blog will be downloaded in their full multi-hundred-k size and then resized to fit your iPhone screen.
So why should YOU care?
- Your blog load times will be much longer than they need to be. Think about it… your viewers will be downloading 900×600 (or whatever size you size your blog images are) images but only seeing at most 300×440 or so images
- Many mobile plans aren’t unlimited… so you’re basically costing your clients money
- At least on the iPhone and iPod touch when some unknown magical point is reached in terms of page size and/or page load time, the browser gives up and your clients will see tiny little blue question marks. Yeah… your glorious images, replaced by tiny question marks.
Do I have your attention yet? If not, then maybe you didn’t read point 3 above 🙂
In an Ideal World…
When the client browses the site with their gloriously large desktop they would be served nicely sized large images to enjoy in all their glory.
When the client browses on their iPhone the site would serve much smaller images, sized appropriatelly for the user’s screen.
You would think there would be a WordPress Plugin to do this. But no. Don’t even waste your time… at least as of today there just isn’t.
Well.. kinda … I guess there is now! (ok it’s a hack on top of WPTouch ’cause I’m too lazy to write my own agent-detection code… but for all intents and purposes it’s as if there were a plugin)
How to Hack your WPtouch and be your iPhone Clients’ best friend!
Ok, the hack is a two part thing. Part one is a slight change in your workflow:
When you generate your 900×600 (or whatever) images for the blog, also generate a smaller size set using the identical filenames. I recommend a size of 300×440 meaning that you let horizontal images get no wider than 300 and the verticals no taller than 440… not saying you should use a weird 300×440 aspect ratio LOL) … experiment with your compression settings to achieve the smallest possible sizes that still look great at 100% magnification.
when you upload your images, you’ll want to upload them in two separate folders. One folder will be Images/Full and the other Images/Mobile.
You have complete freedom in terms of how you want to structure the overall path to the folders… so for intance:
http://yourdomain.com/blog/images/full
http://yourdomain.com/blog/images/mobile
is fine
http://yourdomain.com/blog/images/2010/Weddings/JackAndJill/images/full
http://yourdomain.com/blog/images/2010/Weddings/JackAndJill/images/mobile
is fine too
The key is that you have a folder called images which has the two subfolders, full and mobile and that identically named files are in the two folders.
Then when you write your post you simply reference the images in the FULL folder without worrying about the ones in the mobile folder.
…
This all took a bunch of lines to explain… but it’s super-easy… especially if you use a decent ftp client to do your image uploading and if you use Lightroom’s Export presets to automatically generate the differently sized images and place them in appropriate folders ready for FTP upload.
Part two is a one time hack of one of the WPTouch files (ok… one time for every time you update WPTouch… the hack would most likely be removed by an update… unless we can get them to implement this as part of the plugin).
you’re going to have to find your plugin directory with your ftp client. If you named your wordpress root folder blog then you would find it under:
blog/wp-content/plugins
ok, once in the plugins folder you’ll want to find the WPTouch/Themes/Default folder
In that folder look for a file called functions.php
Copy functions.php to your destktop and feel free to make a copy of it for safekeeping.
Open functions.php with a text editor.
Go all the way to the end of the file where it says:
?>
add the following code before that line:
function MobileImages($content) {
$content=str_ireplace(‘/images/full/’,’/images/mobile/’,$content);
return $content;
}add_filter(‘the_content’,’MobileImages’);
And then copy this edited functions.php file back to the blog/wp-content/plugins/WPTouch/Themes/Default folder and overwrite the old one.
That’s it. Now whenever a device is using the WPTouch plugin the function you added will look for the text “/images/full/” and replace it with “/images/mobile/” … causing the browser to load the smaller, faster to load images.
Once again… if you find this useful and think that it will indeed be a benefit for your clients I would really appreciate it if you would add a link to my site from yours. The final function and workflow may not look like much but It took a full two days of research and work to solve this problem… often enough the work is not in the actual code, but figuring out WHAT CODE to write. Please use the following html for the link:
Many Many Moments photography by Alessandro Di Sciascio <a href=”http://www.disciascio.com>South Florida Wedding Photographer</a>
if you add a link please send me a quick note at my email address so that I may thank you.
Two last things:
1. Think outside the box.
Read this page on both a desktop computer and a mobile device with WPTouch… and you’ll see what I mean 🙂
2. You don’t have to use WPTouch if you prefer a different mobile plugin/theme. You can add the code I wrote to any other theme THAT HAS Agent Verification code built in (basically that is only served to a mobile device) and it will work without any issue… just add it to the functions.php in that plugin’s theme.