<style>
.copy, .reg {font-size:xx-small;vertical-align:text-top;}
</style>

<script>
$(function(){
var copy = new RegExp(‘\u00a9′,’g');
var reg = new RegExp(‘\u00ae’,'g’);
var newBody = $(‘body’).html().replace(copy, ‘<span class=”copy”>&copy;</span>’).replace(reg, ‘<span class=”reg”>&reg;</span>’);
$(‘body’).html(newBody);
});
</script>

1. A normal form field watermark that empties on focus and refills on blur.
2. A value that is set by the server trumps anything that the plugin does. (Note: this way, if a user has to fill out the form again because one of the fields didn’t validate, the server can send values so that the user doesn’t have to refill the whole form)
3. There may be a time when you want to ignore the plugin and keep your label visible. Just add a ‘ignore’ class to your label and the plugin doesn’t touch it.
4. This is an extra couple of lines written so that validation works correctly. What it does is it empties the fields that have not been touched by the user on submit. That way, we can run our validation against those fields, and we don’t submit our label.

This solution focuses on accessibility as it does not remove the label, just moves it off the viewport. This way, if a user does not have Javascript, CSS, or uses a screen reader, they will still get normal labels.

View a demo
Download plugin (link to jQuery plugins)

Please let me know what you think about it, or if there is anything I should do to improve.

The website that I am building allows for users to signup/create usernames/login/post entries/etc. The goal was to require a user, when signing up, to add what company they worked for. This is not one of the standard fields that come with Movable Type’s sign up form (we purchased the Community Solution). What is baked in to Movable Type is the ability to create custom fields on the user object. This is good. It means that we can add as many fields as we want, and associate the data to a specific user, (i.e. Company, Job Title, Birthday, etc.). MT has some documentation on allowing a user to update this custom information on their profile page (http://www.movabletype.org/documentation/community/user-profiles.html). Here is the code they suggest:

<mt:loop name="field_loop">
<mt:if name="__first__">
<input type="hidden" name="customfield_beacon" value="1" id="customfield_beacon" />
</mt:if>

<mtapp:setting
id="$field_id"
label="$name"
hint="$description"
shown="$show_field"
show_hint="$show_hint"
required="$required">
<mt:var name="field_html">
</mtapp:setting>

</mt:loop><br />

This is great if you want a user to be able to enter all of the created custom field data at once because it just loops through all of your custom fields and creates input fields for each of them. We had about 10 custom fields on the user object and only wanted the person signing up to enter the ‘Company’ information on signup (as to not make them feel overwhelmed with so much information to input).

How I accomplished only writing one field is to throw an MT if statement in there based on what the $field_id is. In other words what your custom field’s basename is preceded by “customfield_”.

<mt:if name="field_id" eq="customfield_company">
</mt:if>

With “company” my field’s basename, that made the field_id I was looking for, customfield_company.

My final code to display only the company custom field on the user signup form (with MT4.2):

<mt:loop name="field_loop">
<mt:if name="__first__">
<input type="hidden" name="customfield_beacon" value="1" id="customfield_beacon" />
</mt:if>

<mt:if name="field_id" eq="customfield_company">
<mtapp:setting
id="$field_id"
label="$name"
hint="$description"
shown="$show_field"
show_hint="$show_hint"
required="$required">
<mt:var name="field_html">
</mtapp:setting>
</mt:if>

</mt:loop><br />

Note: This is only possible on the user registration page after the release of MovableType 4.2. Before that, I think this could only be done on the profile page.

I will update this if I learn any discrepancies in what I said. If you find any, please let me know.

I know that there are a lot of dependencies that go along with installing RMagick from source on Leopard.  For this reason, I was very interested in the idea of packing all of the commands into a script and just letting it run.  If you are like me, your past with scripts has been grey at best; i.e. there always seems to be some sort of problem that kills your script. Then you have to search through it to find where it broke and you spend a lot of time aligning yourself with something that might not even work.

The reason most of these scripts will fail is that references are now broken or code deprecated. If it fails, I then have to make sure that http://whatever.com still exists and is hosting the file and version that I need. I got to thinking… so often I would like (at least) the option of using something that is a bit older, but can be run smoothly.

The ‘Dependencies’/Libraries

This script uses Ruby to install ImageMagick and RMagick, with the necessary dependencies for gif, jpg, png, freetype, tiff, libwmf (?), littlecms (?), and ghostscript (?).  It rely’s on these libraries:

JPEG:
ftp://ftp.uu.net/graphics/jpeg/jpegsrc.v6b.tar.gz

PNG:
http://superb-west.dl.sourceforge.net/sourceforge/libpng/libpng-1.2.22.tar.bz2

Freetype:
http://download.savannah.gnu.org/releases/freetype/freetype-2.3.5.tar.gz

TIFF:
ftp://ftp.remotesensing.org/libtiff/tiff-3.8.2.tar.gz

http://jaist.dl.sourceforge.net/sourceforge/wvware/libwmf-0.2.8.4.tar.gz

LittleCMS:
http://www.littlecms.com/lcms-1.17.tar.gz

Ghostscript:
ftp://mirror.cs.wisc.edu/pub/mirrors/ghost/GPL/gs860/ghostscript-8.60.tar.gz

Ghostscript Fonts:
ftp://mirror.cs.wisc.edu/pub/mirrors/ghost/GPL/current/ghostscript-fonts-std-8.11.tar.gz

ImageMagick:
ftp://ftp.imagemagick.org/pub/ImageMagick/ImageMagick-6.3.8-11.tar.gz

When I found this script these URLs were built in so that if one of the URLs didn’t work, it would break. That is fine, but it is not built to find the newest and greatest, or make sure that the newest still works with everything else. So why not just package all of those url’s libraries together and make that downloadable here. I may be breaking a law or something… (if I am let me know) but I think these are all open-source.

The Instructions

So here is how it is done.

– Download the zip (39.5 MB)
– Unpack it
– Open Terminal.app

cd /to/inside/the/unzipped/dir
ruby setup.rb

Now just let it run. (You may have to put in your password every once in a while because of the ‘sudo’s).

I should also note that I had X11 (Applications > Utilities > X11) and Xcode 3.0 (Macintosh HD > Developer > Applications > Xcode) installed when I ran this script.  I am not sure how much this helped/effected the script running, but I do have these installed and runnable.

The Original

Again, a special thanks to Solomon White who originally posted this script at his blog.

Here are some other references for this technique.

John Ford:
http://www.aldenta.com/2007/11/26/installing-imagemagickrmagick-on-leopard/

Ben Reubenstein:
http://www.benr75.com/articles/2008/03/16/install-rmagick-on-mac-os-x-leopard-from-source

Here is what I found at Solomon’s website.

#!/bin/sh
curl -O http://download.savannah.gnu.org/releases/freetype/freetype-2.3.5.tar.gz
tar xzvf freetype-2.3.5.tar.gz
cd freetype-2.3.5
./configure --prefix=/usr/local
make
sudo make install
cd ..

curl -O http://superb-west.dl.sourceforge.net/sourceforge/libpng/libpng-1.2.22.tar.bz2
tar jxvf libpng-1.2.22.tar.bz2
cd libpng-1.2.22
./configure --prefix=/usr/local
make
sudo make install
cd ..

curl -O ftp://ftp.uu.net/graphics/jpeg/jpegsrc.v6b.tar.gz
tar xzvf jpegsrc.v6b.tar.gz
cd jpeg-6b
ln -s `which glibtool` ./libtool
export MACOSX_DEPLOYMENT_TARGET=10.5
./configure --enable-shared --prefix=/usr/local
make
sudo make install
cd ..

curl -O ftp://ftp.remotesensing.org/libtiff/tiff-3.8.2.tar.gz
tar xzvf tiff-3.8.2.tar.gz
cd tiff-3.8.2
./configure --prefix=/usr/local
make
sudo make install
cd ..

curl -O http://jaist.dl.sourceforge.net/sourceforge/wvware/libwmf-0.2.8.4.tar.gz
tar xzvf libwmf-0.2.8.4.tar.gz
cd libwmf-0.2.8.4
make clean
./configure
make
sudo make install
cd ..

curl -O http://www.littlecms.com/lcms-1.17.tar.gz
tar xzvf lcms-1.17.tar.gz
cd lcms-1.17
make clean
./configure
make
sudo make install
cd ..

curl -O ftp://mirror.cs.wisc.edu/pub/mirrors/ghost/GPL/gs860/ghostscript-8.60.tar.gz
tar zxvf ghostscript-8.60.tar.gz
cd ghostscript-8.60/
./configure --prefix=/usr/local
make
sudo make install
cd ..

curl -O ftp://mirror.cs.wisc.edu/pub/mirrors/ghost/GPL/current/ghostscript-fonts-std-8.11.tar.gz
tar zxvf ghostscript-fonts-std-8.11.tar.gz
sudo mv fonts /usr/local/share/ghostscript

curl -O ftp://ftp.imagemagick.org/pub/ImageMagick/ImageMagick-6.3.8-11.tar.gz
tar -xzvf ImageMagick-6.3.8-11.tar.gz
cd ImageMagick-6.3.8
export CPPFLAGS=-I/usr/local/include
export LDFLAGS=-L/usr/local/lib
./configure --prefix=/usr/local --disable-static --with-modules --without-perl --without-magick-plus-plus --with-quantum-depth=8 --with-gs-font-dir=/usr/local/share/ghostscript/fonts
make
sudo make install
cd ..

sudo gem install rmagick