Mimicking wordpress.com’s image resize URIs

To follow up from last night’s entry, I was determined to remove the intermediary step of my_resize_script.php.

I’ve acheived this goal in the mod_rewrite rule, file name and query string now get passed on to timthumb.php.

Updated rules:

This will pass both width and height variables into timthumb if they are declared.

Quick breakdown of the rules:

  1. Check that the URI exists as a file.
  2. Check that the URI in question is an image. Expand to other formats as needed.
  3. Check that one or both of width and height are being altered.
  4. Pass the file following to timthumb as variables:
    $1 = filename
    %1 = w or h
    %2 = value of w or h
    %3 = w or h
    %4 = value of w or h

If conditions 1 to 3 all return true, then the rewrite rule in 4 will be executed.

In summary, the URI
http://myrant.net/wp-content/uploads/2010/03/high_res_horsey.png?w=300&h=100

Will be passed on as
http://myrant.net/timtumb.php?src=wp-content/uploads/2010/03/high_res_horsey.png&w=300&h=100

Resize images on the fly without messing with image URLs

[EDIT: I’ve made this simpler with a follow up post: Mimicking wordpress.com’s image resize URIs]

Exporting a wordpress.com site for use on a standalone wordpress.org install is a joy to set up. The export and import system are simple to use and give little or no issues.

What is a problem is the automatic resizing of images that wordpress.com offers.

One can insert an image in the normal way and then append the image URI with some variables such as width (w) and height (h). This is also a d options, I assume this is for depth, but haven’t looked into it yet.

So an image URI might be http://myrant.net/wp-content/uploads/2010/03/high_res_horsey.png?w=300

This URI would display the image resized to 300px wide and retain the aspect ratio.

Currently, wordpress.org do not offer this facility (that I have seen). So I’ve been working on how it might be done:

1st off, we need to set up a mod_rewrite rule to cater for image URIs that have query string variables. This can be added to a vhost config or the site’s .htaccess file. I prefer to use .htaccess

Then we need a script (my_resize_script.php) to make use of the variables.

The output of this script as it is would be:

As you can see, I’m not actually making use of the variables yet. But all of the information that it does extract can be given to a proper resize script, such as TimThumb.

This is all a bit messy right now. I would much rather be able to pass variables directly into a resize script rather than have to use an intermediary one. If anybody wants to give some pointers, please do 🙂

Updating WordPress site URLs for different hosts

Why oh why does WordPress insist on storing the site URLs within the database?
Every other project I can think of either keeps it in a config file or doesn’t bother with one and just works with whatever URL it finds itself on.

This is most irritating when you have:

  • more than one developer working on the same project
  • more than one system for hosting the project (dev, test, live, etc)

One way to cope with this irritation is to have a collection of .sql files to handily update the database from the CLI.

For example, a WP site has the URL www.idophp.co.uk on a live host and uses idophp.iain on a dev host.

We would have 2 .sql files such as live_options.sql and dev_options.sql.

In live_options.sql:

In dev_options.sql:

These settings can be imported over the top of a database without altering anything but the site URLs using:

How to get sfFormExtraPlugin working in Symfony 1.4 using Doctrine

I’m talking about this plugin: http://www.symfony-project.org/plugins/sfFormExtraPlugin

For some reason, getting the plugin to work took a lot of Googling and some trial and error.
So here is how I got it working. Hopefully I did this in the ‘correct’ way…

Edit config/ProjectConfiguration.class.php to add sfFormExtraPlugin as an enabled plugin:

Edit apps/<app_name>/config/view.yml to include the JS and CSS:

Edit lib/form/doctrine/<your_module_name>Form.class.php to make use of the widgets you want. I’m interested in sfWidgetFormJQueryDate:

I have used the calendar.png icon from the famfamfam silk icon set. You can get the set here: http://www.famfamfam.com/lab/icons/silk/

I’ve used the date picker widget for filling in the created_at and updated_at fields. You can replace these values with the fields you need to manipulate in a user friendly way.

[Edit 17/10/2010:]
I’m not going mad, there is an issue with the ‘magic’ fields created_at and updated_at in that they have to be unset to become magic.
Found help here: http://levelx.me/technology/programming/symfony-1-4-doctrine-timestampable-behaviour/
Though the unset lines are better off being added just once to /lib/form/doctrine/BaseFormDoctrine.class.php, rather than each xxxForm.class.php file.

Which Windows applications are used by this web developer?

This list is partly to remind myself what essential apps need to be reinstalled after a system wipe.

But it does have me thinking, what do other web developers use on a daily basis?

Web browsers:

  1. Google Chrome
  2. FireFox
  3. IE
  4. Opera
  5. Safari

FireFox addons:

  1. Adblock Plus
  2. British English Dictionary
  3. ColorZilla
  4. Dummy Lipsum
  5. Firebug
  6. Html Validator
  7. Web Developer
  8. Xmarks

Code editing:

  1. PhpEd
  2. Eclipse PDT
  3. TextPad
  4. vim

Code tools:

  1. SQLyog
  2. WinMerge

System tools:

  1. PuTTY
  2. Vbox
  3. Synergy
  4. TightVNC

File tools:

  1. FileZilla
  2. DropBox
  3. Jungle Disk Workgroup Edition
  4. WinZip
  5. WinRar
  6. 7-Zip

Graphical manipulation:

  1. Paint.NET
  2. Adobe CS
  3. jRuler

“Productivity” apps:

  1. MS Office
  2. Google Apps Sync
  3. Foxit Reader

Communication:

  1. Skype
  2. Zoom phone adapter (use the Vista 64bit driver to get this working on 64bit Windows 7)
  3. X-Chat

CD/DVD tools:

  1. CDex
  2. DeepBurner

Audio/Visual:

  1. Spotify
  2. iTunes
  3. VLC

Dock gadgets:

  1. Digital Clock
  2. GMail Counter

Time off:

  1. Steam

Ace on DHBiT pointed me at http://ninite.com/, how very useful. Will make use of it next time 🙂

Magento: pre filter by multiple option custom attributes

Requirement: pre-filter products by customer group name to product attribute.
I was looking for the “proper” way of filtering items by multiple custom attribute settings, but couldn’t find out how.
So, the following is a brief explanation of how I’ve got this running in Magento 1.4.1.

There are two ways of editing core code in Magento.

  1. Wrong: edit files directly in app/code/core/Mage
  2. Right: extend modules and keep them in app/code/local/MyDevCompany

If you’re in a hurry, you might edit core files directly and then later copy the altered code out into correctly extended module files.
For most of my Magento work, this is the route I have taken: get it working in the core then extend it once I’m sure I’m messing with the correct file/method. Just be sure to copy the code out at some point before upgrading the core!

This is how I have extended _getProductCollection() in app/code/core/Mage/Catalog/Block/Product/List.php – the method which generates the product list when viewing a category.
The extended file would be saved to app/code/local/MyDevCompany/Catalog/Block/Product/List.php

Reason I have used such a long and ugly method: addAttributeToFilter() will only play ball with attribute value IDs.
By fetching possible attribute value text and IDs, flipping the data, we can successfully filter by human readable text.

Further reading on how to set up a module for extension, see http://www.magentocommerce.com/wiki/groups/174/changing_and_customizing_magento_code

White space trim for JavaScript

I originally blogged about this on my other site lazygnome.net but that was simply a quick place to record it.

I present to you a very quick and handy way of replicating PHP’s trim() function in JS:

There it is, simple and usable.

I don’t claim to be original with this code. I’m sure that others have done exactly the same themselves. But it surprises me that JS doesn’t come with such a text manipulation method by default.

http://www.lazygnome.net/diary/594

writeAttribute() example

The documentation on http://prototypejs.org/api/element/writeAttribute is a wee bit scarce. So here’s a quick one on usage.

To add an attribute:

To remove an attribute:

To enable all disabled form elements (in a form with the id ‘container’):

Please, somebody standadise the order of function variables

Finding a needle in a haystack is a wonderful bit of symbolism and I welcome its use in many situations.

It’s just the implementation of that symbolism that needs to be standardised. For forgetting the order in which a function expects variables to be passed in is tedious.

In PHP, for example, there are some very useful functions: in_array() and strpos() to name but two.

Usage is in_array($needle, $haystack) and makes sense as you want to check that the needle is in the haystack.
But, it’s strpos($haystack, $needle) that messes things up. You can’t look for a haystack within a needle!

So, because of strpos() confusing things, it’s quite often that I (and other’s I’m sure) mix the order, no matter which function is in use. Unless I’ve been using the function within the last few hours, I’ll most likely get it wrong.

These are long standing functions in a well established language, so there’s no hope of these ever being corrected.

For new functions, a possible answer would be to pass variables by associative array when the function has more than 1 variable input.

An example of calling such a function would be: myFunction(array(‘needle’ => ‘malteser’, ‘haystack’ => ‘bag_of_revels’));

This way, it wouldn’t matter which order you remembered to pass in the variables. As it happens, this is how I write my own functions.

Apparently, something similar is done in Python. Might get around to learning it sometime…