Blog

jQuery Plugin

A while ago now I created a Flash text cypher for a job I was working on. This seemed a bit out dated, as no one ever used Flash unless you're making a game or a horrible web banner, so I thought I'd update it to use JavaScript rather than ActionScript.

As the functionality seemed pretty generic, I thought rather than just flatly copy the layout of code from the previous version, why not make a jQuery plugin that can have options and be reused, how hard could it be? A couple of tutorials and a couple of hours later I was all done.

Its called djave_cypher, and you call it like any other plugin, so:
$("div#target").djave_cypher();

It will just work, but also accepts the following options:


	// The phrase to cypher (defaults to node's contents)
'cypher_text' : this.text(),
// How many times to cypher before the first solve
'start' : 10,
// How many cyphers between the letters solving
'offset' : 5,
// How frequently (milliseconds) the numbers change
'frequency' : 60,
// which div to act on
'target' : this,
// If set to true, will output to console on complete
'console_log' : false

I also figured it would be a great opportunity to use github, which has always (quite frankly) scared me a bit, but I think I'm gradually starting to get the hang of it. So, if you want to grab the plugin, why not head over to github:

https://github.com/sheepysheep60/Cypher/

Get an image caption using just the src attribute.

I use the types plugin with Wordpress to create user friendly fields which my clients can update.

I recently came across the problem that if I used a custom image field, then the image URL is stored but none of the caption information, as happens with a normal post. Googling ensued.

I have two main issues

  1. I don't have a reference to the image's data
  2. Once I've got that, I need to display the correct bit

After a while of searching I found two great functions:

function get_attachment_id_from_src ($image_src) {
	global $wpdb;
	$query = "SELECT ID FROM {$wpdb->posts} WHERE guid='$image_src'";
	$id = $wpdb->get_var($query);
	return $id;
}

function wp_get_attachment( $attachment_id ) {

	$attachment = get_post( $attachment_id );
	return array(
		'alt' => get_post_meta( $attachment->ID, '_wp_attachment_image_alt', true ),
		'caption' => $attachment->post_excerpt,
		'description' => $attachment->post_content,
		'href' => get_permalink( $attachment->ID ),
		'src' => $attachment->guid,
		'title' => $attachment->post_title
	);
}

Now all I need to do is this, :

$landscape_images = get_post_custom_values('wpcf-cs-landscape-img', $post->ID);
foreach ( $landscape_images as $key => $image_url ) {
	$img_id = get_attachment_id_from_src($image_url); 
	$img_info =  wp_get_attachment( $img_id );
	echo $img_info['caption'];
}


Ends:

Parabolic Lines

This is a tutorial about how to create an effect I call parabolic lines, which basically looks like the patterns you used to make in maths on graph paper by joining the highest point on the Y axis to the first square on the X axis, then the second highest to the second square on the X axis, forever until you ended up with a pretty neat looking curve made of straight lines.

The background

It all starts with a letterbox shaped art board in Illustrator, and I fill it with a red rectangle.

Select the rectangle and then CMD + C to copy and CMD + F to paste it in place on top of the previous one. Its filled with the standard black and white gradient, set to radial.

Next I set the transparency of this layer to multiply.

I use these two separate layers because I just find it a bit easier to manipulate the colours. I can just select the layer underneath to change the colour of the fill, and select the gradient layer if I want to adjust the transparency/heaviness. I can also use multiple rectangles with multiplying gradients for a bit more depth if I want to.

Select the layers and lock them, the background is pretty much finished!

Parabolic lines

First things first, hold shift and just draw a straight line down the page. Press R to select the rotation tool, then hit ENTER to manually enter the rotation amounts.

Feel free to experiment, but I get pretty good results at this point using an angle of 1 degree. Very important: hit "Copy" when you're ready, not "OK".

You should notice you have 2 lines. Next, hold CMD + D to repeat the action until you have a right angle of white space in the corner.

The lines.

Next, select all the lines, and align them:

Aligned left...

Aligned bottom!

I made all my lines a light orange colour.

And changed their opacity to multiply.

I then put them in the bottom left corner, then duplicated them and rotated them 180 degrees to go into the top right corner.

Next I wrote some text, I went with Myriad Pro - I never use it and it's Illustrator's default font. It seems to look OK in this situation.

Enlarge it to fit as you like.

I then went absolutely huge on the kerning to suit the mega widescreen layout of the art board.

Next, I clicked Effect > Stylize > Outer Glow to make the text fit in a little nicer

And there you go, Parabolic Lines!