I recently had to do this for a project and want to post it here as a resource for myself. For this example you pass the url to the image in through the URL, i.e.

http://www.example.com/?imgurl=/image.png

You can download the php file if you want to see it in your own editor.

<?php
	// Set the path to the image (I'm using a WordPress theme)
	$themepath = dirname(__FILE__);
	$rootpath = $themepath . '/../../..';
	$imgpath = $rootpath . $_GET['imgurl'];

	// Get the mimetype for the file
	$finfo = finfo_open(FILEINFO_MIME_TYPE);  // return mime type ala mimetype extension
    $mime_type = finfo_file($finfo, $imgpath);
	finfo_close($finfo);

	switch ($mime_type){
		case "image/jpeg":
			// Set the content type header - in this case image/jpg
			header('Content-Type: image/jpeg');

			// Get image from file
			$img = imagecreatefromjpeg($imgpath);

			// Output the image
			imagejpeg($img);

			break;
	    case "image/png":
			// Set the content type header - in this case image/png
			header('Content-Type: image/png');

			// Get image from file
			$img = imagecreatefrompng($imgpath);

	        // integer representation of the color black (rgb: 0,0,0)
	        $background = imagecolorallocate($img, 0, 0, 0);

	        // removing the black from the placeholder
	        imagecolortransparent($img, $background);

	        // turning off alpha blending (to ensure alpha channel information
	        // is preserved, rather than removed (blending with the rest of the
	        // image in the form of black))
	        imagealphablending($img, false);

	        // turning on alpha channel information saving (to ensure the full range
	        // of transparency is preserved)
	        imagesavealpha($img, true);

			// Output the image
			imagepng($img);

	        break;
		case "image/gif":
			// Set the content type header - in this case image/gif
			header('Content-Type: image/gif');

			// Get image from file
			$img = imagecreatefromgif($imgpath);

	        // integer representation of the color black (rgb: 0,0,0)
	        $background = imagecolorallocate($img, 0, 0, 0);

	        // removing the black from the placeholder
	        imagecolortransparent($img, $background);

			// Output the image
			imagegif($img);

			break;
	}

	// Free up memory
	imagedestroy($img);
?>

MaxImage 2.0 is the first fullscreen background slideshow plugin that utilizes jQuery Cycle Plugin and all it’s transitions / options.  Check out the original post.

I have been testing MaxImage 2.0 beta before it’s public launch and the tests have been extremely hopeful.  I have successfully tested it in Firefox 3.6+ (Mac & PC), Safari, Chrome, Opera and even IE back to IE7.  All of the options I have tested work as expected.  All of the 28 transitions that cycle supports have been tested and work as expected.

Here is the coolest part though… I have set up the plugin in jsFiddle so that anyone can play with it and see how sweet it is.

JSFiddle with it at http://jsfiddle.net/akv292/sLEyE/.

Check out the beta release documentation and demo.

Introducing the first fullscreen background slideshow plugin that utilizes jQuery Cycle Plugin and all it’s transitions / options.

November 10, 2011 UPDATE: MaxImage 2.0 beta 2 has been released

This 2.0 release has been in the works for a while and I am happy to say that I think it is ready for beta launch. Please note… It is absolutely going to have a lot of bugs, but if you feel like testing it and letting me know how it goes that would be fantastic.

Contents

• What’s New
• Demo
• Installation
• Download
• Feedback

What’s New

There have been a number of changes since 1.0 but here are some of the biggest:

• MaxImage 2.0 uses the slideshow power from jQuery Cycle Plugin and allows you to utilize all of the options from Cycle but now for a background slideshow.
• MaxImage 2.0 determines whether your browser can use CSS3′s background-size:cover. If it can, it uses it as to limit the amount of heavy lifting that jQuery has to do. That means the majority of your users will have a slim and smooth experience. That is so important with large image animations as it is. (still working on optimizing) If CSS3 is not available it falls back to the old way of sizing and centering background images.
• MaxImage 1.0 made the mistake of assuming certain things about your design. I have tried to limit the amount of styling that MaxImage 2.0 does to give you the maximum amount of control. I’ve even pulled styles that were originally being set by JS into an external CSS.
• MaxImage 2.0 has been completely rewritten to comply with current best practices

Demo

Check out a demo.
I am working on official documentation to release with the plugin when it is ready for a full release.

Installation

Step 1

Download jQuery MaxImage 2.0 CSS, upload it to your server with FTP, and include it in your <head> tag:

<link rel="stylesheet" href="styles/jquery.maximage.css" type="text/css" media="screen" title="CSS" charset="utf-8" />

Step 2

Link to jQuery Library, download jQuery Cycle Plugin, jQuery Easing plugin (optional) and MaxImage JS and include them in your <head> tag or right before the </body> tag.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.js"></script>
<script src="js/jquery.cycle.all.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.easing.1.3.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.maximage.js" type="text/javascript" charset="utf-8"></script>

Step 3

Call maximage and pass cycle your options (these are options used for the demo):

<script type="text/javascript" charset="utf-8">
$(function(){
    $('#maximage').maximage({
        cycleOptions: {
            fx:'scrollHorz',
            speed: 800,
            timeout: 8000,
            prev: '#arrow_left',
            next: '#arrow_right'
        },
        onFirstImageLoaded: function(){
            jQuery('#cycle-loader').hide();
            jQuery('#maximage').fadeIn('fast');
        }
    });
});
</script>

Download

You can download Maximage2.0-beta1 at the jQuery plugin repository.

You can also get the css and JS from the demo site:
Cycle – http://jquery.malsup.com/cycle/download.html
Maximage CSS – http://www.aaronvanderzwan.com/maximage/2.0/lib/css/jquery.maximage.css
Maximage JS – http://www.aaronvanderzwan.com/maximage/2.0/lib/js/jquery.maximage.js.

Feedback

As usual… let me know what you think and if you have any suggestions. I’d love to know if you encounter any bugs… as that is what I am testing right now. Along with create a forum / trac I have it in my notes to get this up to GitHub and allow people to fork / help me make this work even better.

Cheers.

First you have to add them:
add_filter('manage_posts_columns', 'add_new_columns');
function add_new_columns($columns) {
$columns['thumb'] = __('Thumb');
return $columns;
}

…etc.

Then you populate them (in my case, add post type to any column named ‘thumb’):
add_action( 'manage_posts_custom_column', 'manage_columns' );
function manage_columns($column_name, $post_id) {
switch ($column_name) {
case 'thumb':
if(has_post_thumbnail($post_id)){
echo get_the_post_thumbnail($post_id,array(50,50));
}else{
echo 'No Featured Image';
}
break;
default:
break;
}
}

This is what got me

If your post types are hierarchical, then WordPress considers them ‘pages’. If that is the case you have to use:

add_action( 'manage_pages_custom_column', 'manage_columns' );

This will add the action to all hierarchical post types (pages) instead of all non-hierarchical post types (posts). If you want to target your custom post types only, hierarchical or not, you can do so using:

add_action( 'manage_{custom-post-type}_posts_custom_column', 'manage_columns' );

I know we are moving fast, so… a quick rundown:

Global non-hierarchical post types (posts) use:
add_action( 'manage_posts_custom_column', 'manage_columns' );

Global hierarchical post types (pages) use:
add_action( 'manage_pages_custom_column', 'manage_columns' );

Specific post types hierarchical or non-hierarchical (custom post types) use:
add_action( 'manage_{custom-post-type}_posts_custom_column', 'manage_columns' );

Hope that saves someone a few minutes.

To CHMOD only directories to 755:

find . -type d -exec chmod 755 {} \;

To CHMOD only php files to 644:

find . -type f -name '*.php' -exec chmod 644 {} \;

This worked well to figure out permissions for my local WordPress install. I did have to specficially give my uploads directory write access, but it cleaned up all of the other files and folders.

In terminal:

sudo mate /private/etc/apache2/httpd.conf

Find “<Directory />” block. Make sure it looks like this:

Options FollowSymLinks
AllowOverride All
Order allow,deny
Allow from all

Find “LoadModule rewrite_module libexec/apache2/mod_rewrite.so”
Make sure there isn’t a # in front of it. (If libexec/apache2/mod_rewrite.so is different in your httpd.conf, don’t change it to mine. Apparently this differs across different OS X installs.)

Finally, and this was what took me so long to figure out…
Add the following to the first line of your .htaccess file:

Options +FollowSymLinks

or

In my case, I had a conf file written to /etc/apache2/users/ automatically, so when I found it did:

sudo mate /etc/apache2/users/username.conf

This file for me looks like:

username/Sites/">
Options Indexes FollowSymLinks MultiViews
AllowOverride All
Order allow,deny
Allow from all


Note: Remember to change username to your actual username.

<script type=”text/javascript” charset=”utf-8″>
$(function(){
  jQuery(window).resize(function(){
    jQuery(‘body’).children().each(function(){
      var $this = jQuery(this);
      var $prev = jQuery(this).prevAll().not(‘.skip’).first();
      if($prev.length > 0){
          var newTop = $prev.outerHeight(true) + parseFloat($prev.css(‘top’));
          jQuery(this).css({top:newTop+’px’});
      }
    });
  });
  jQuery(window).trigger(‘resize’);
});
</script>

Check out the demo:
http://www.aaronvanderzwan.com/playground/dynamic_absolutes/index.html

<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>

I have been working lately… and have proof. Besides the indentation in my office chair [insert Steelcase shout-out here], I have some ‘artifacts’ worth sharing. Here are a few of the websites I’ve worked on that have recently gone live.

Whats Your Art?

View Site

Sebago

View Site

Bates Footwear

View Site

Don’t do it! (yet)

With getting a new Google Wave account, I wanted to forward my Gmail emails to my Google Wave account. I saw that my Google Wave account was [username]@googlewave.com so I figured I could do it. I went into Gmail. Followed Settings > Forward and set up Gmail to pass all of my emails on to google wave.

I left it on for a day or so, and maybe that was my big mistake. I have been getting emails every 20-30 minutes that have been telling me they cannot send my emails to Google Wave, and that they will retry for the next 2 days. They have a subject line of ‘Delivery Status Notification (Failure)’. Obviously I turned off my forwarding, however now, 3 days later, they are still coming in every 20-30 minutes telling me that the email failed.

So moral of the story. Don’t automatically forward your emails to Google Wave (yet!) and also, don’t leave that forward on any longer than you have to. Google Wave is not ready for it yet and it will get REALLY annoying.

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.

Update – November-04-2011: MaxImage 2.0, an update that finally utilizes jQuery Cycle Plugin to create dramatic background images is finally in beta. Please take a look and help me test it. I’d love to hear what everyone thinks.

maxImage is a jquery plugin that I wrote a few months ago that automatically scales images based on how much room they have in the browser window. The image will always fill your browser window. I have built a basic demo mini site for the plugin.

Note: For some reason I have lost the post that originally contained the release of my plugin. I would like a place for users of the plugin to contact me and let me know how use of the plugin is going. Please use this space, the comment area to let me know how using maxImage is going, what you would like to see added or changed.

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:






id="$field_id"
label="$name"
hint="$description"
shown="$show_field"
show_hint="$show_hint"
required="$required">






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_”.

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):







id="$field_id"
label="$name"
hint="$description"
shown="$show_field"
show_hint="$show_hint"
required="$required">







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

Deprec automatically creates the deploy group as part of it’s recipes.¬† I was stunned.¬† Upon looking for an hour or two I came across a ‘grep’ that deprec runs.¬† It runs “sudo -p ‘sudo password: ‘ grep ‘deploy:’ /etc/group || sudo /usr/sbin/groupadd deploy”.¬† This grep checks the /etc/group file for any occurances of ‘deploy’. My deploy user was named pd_deploy.¬† Users live in the /etc/group file under their group following the following convention:

group: user1,user2,user3

My /etc/group file contained the following:

admin:root,pd_deploy

Deprec found ‘deploy’ in my user, pd_’deploy’, and thought that the group already existed.¬† It therefore failed to create a new one and blew up when it was trying to change a group that did not exist.

To save yourself a lot of hassle, don’t have ‘deploy’ anywhere in your /etc/group file, meaning, don’t have a user with ‘deploy’ anywhere in the name.¬† So no ‘deployuser’ or ‘user_deploy’.