Chief Alchemist - Business Consulting For The 21st Century Via A Holistic & Intelligent Approach
Share ChiefAlchemist.com. RSS 2.0 feed for ChiefAlchemist.com. Sign up for the mailing list. Follow Chief Alchemist on Twitter. 'Like' the Chief Alchemist's page on Facebook. See what Chief Alchemist has been Q&A'ing on Quora. Chief Alchemist bookmarks & highlights on Diigo.com. Follow the Chief Alchemist on Digg.com. Chief Alchemist channel on Last.fm. Chief Alchemist on Flickr. Mark 'Chief Alchemist' Simchock on LinkedIn. Free Initial Consultation. Email Chief Alchemist. Phone Chief Alchemist.
  • Mark ‘Chief Alchemist’ Simchock
  • 'Email me.Email => ca .at. ChiefAlchemist .dot. com
  • 'Phone me.Alchemy United => 732 997-0028
  •  
  • Free initial consultation.Free => Initial Consultation
  • Please be sure to subscribe to your communication channels of choice.
  • Click To Close => The small green (consultation), red (email) or blue (phone) icons in the top upper right.
CURRENT “TOP 10” TOPICS TOOLS CLIENTS & PROJECTS SOURCES SEARCH HIDE
Business Consulting For The 21st Century Via A Holistic & Intelligent Approach

Primer: WordPress and working with images

FYI => One of the reasons I’m developing the WordPress theme AU_Community is to push my own envelope a bit. Often the most interesting and most challenging projects are the ones I give myself. Here is a synopsis on what I’ve absorbed in the last couple weeks with regards to WordPress and images.

It started with looking for any easy way to add thumbnail images to a post.

http://justintadlock.com/archives/2009/11/16/everything-you-need-to-know-about-wordpress-2-9s-post-image-feature

The good news was, I added functionality to AU_WPing to use the Feature Image when pushing out social media updates. The not so good news was WordPress’ default functionality in this area seemed (read: maybe there’s something I’m missing) somewhat limited. For example, it was easy to get the image URL but not the alt= value.

Soon after, the WordPress gods decided to shine on me. Smashing Magazine published this:

http://coding.smashingmagazine.com/2011/05/26/better-image-management-practices-with-wordpress

In between Justin and Smashing I did some digging around and among other  things discovered that WordPress stores “attachments” in the same table as posts. The type is different but the fields are the same for both types. This gives new meaning to these reference pages in the WordPress codex:

http://codex.wordpress.org/Function_Reference/get_post_thumbnail_id

http://codex.wordpress.org/Function_Reference/get_post

http://codex.wordpress.org/Function_Reference/get_post_custom

http://codex.wordpress.org/Function_Reference/wp_get_attachment_metadata

To make things a bit easier, here’s a snippet you can paste within the WordPress loop and it will use the functions above to spit out various attachment attributes. From there you can figure out what you need, where it is, and how to get it.

//WordPress treats attachments like posts. By using the image "post" ID, get_post
//will return the values. FYI the alt is in the post meta data.
//
$attachment_id = get_post_thumbnail_id();
echo "-- get_post --";
print_r (get_post( $attachment_id, ARRAY_A ));
//
// I prefer to use ARRAY_A because it's closer to self-documenting.
// See the codex for other options.
// Your output should look something like this:
//Output = --> Array ( [ID] => 107 [post_author] => 1 [post_date] => 2011-05-26 23:37:05 [post_date_gmt] => 2011-05-26 23:37:05 [post_content] => MY DESCRIPTION [post_title] => 1-firefox-4 [post_excerpt] => MY CAPTION [post_status] => inherit [comment_status] => open [ping_status] => open [post_password] => [post_name] => 1-firefox-4 [to_ping] => [pinged] => [post_modified] => 2011-05-26 23:37:05 [post_modified_gmt] => 2011-05-26 23:37:05 [post_content_filtered] => [post_parent] => 90 [guid] => http://localhost:2626/wp-content/uploads/2011/04/1-firefox-4.jpg [menu_order] => 0 [post_type] => attachment [post_mime_type] => image/jpeg [comment_count] => 0 [ancestors] => Array ( [0] => 90 ) [filter] => raw )
//
echo "-- get_post_custom --";
print_r ( get_post_custom ( $attachment_id ) );
//
// Your output should look something like this:
//Output => Array ( [_wp_attached_file] => Array ( [0] => 2011/04/1-firefox-4.jpg ) [_wp_attachment_metadata] => Array ( [0] => a:6:{s:5:"width";s:3:"400";s:6:"height";s:3:"377";s:14:"hwstring_small";s:23:"height='96' width='101'";s:4:"file";s:23:"2011/04/1-firefox-4.jpg";s:5:"sizes";a:2:{s:9:"thumbnail";a:3:{s:4:"file";s:23:"1-firefox-4-150x150.jpg";s:5:"width";s:3:"150";s:6:"height";s:3:"150";}s:6:"medium";a:3:{s:4:"file";s:23:"1-firefox-4-300x282.jpg";s:5:"width";s:3:"300";s:6:"height";s:3:"282";}}s:10:"image_meta";a:10:{s:8:"aperture";s:1:"0";s:6:"credit";s:0:"";s:6:"camera";s:0:"";s:7:"caption";s:0:"";s:17:"created_timestamp";s:1:"0";s:9:"copyright";s:0:"";s:12:"focal_length";s:1:"0";s:3:"iso";s:1:"0";s:13:"shutter_speed";s:1:"0";s:5:"title";s:0:"";}} ) [_wp_attachment_image_alt] => Array ( [0] => MY ALT TEXT ) )
//
echo "-- wp_get_attachment_metadata --";
$attachmeta = wp_get_attachment_metadata( $attachment_id );
print_r ( $attachmeta );
//
// Your output should look something like this:
//Output => Array ( [width] => 400 [height] => 377 [hwstring_small] => height='96' width='101' [file] => 2011/04/1-firefox-4.jpg [sizes] => Array ( [thumbnail] => Array ( [file] => 1-firefox-4-150x150.jpg [width] => 150 [height] => 150 ) [medium] => Array ( [file] => 1-firefox-4-300x282.jpg [width] => 300 [height] => 282 ) ) [image_meta] => Array ( [aperture] => 0 [credit] => [camera] => => [created_timestamp] => 0 [copyright] => [focal_length] => 0 [iso] => 0 [shutter_speed] => 0 [title] => ) )
//
echo "-- wp_get_attachment_metadata - sizes --";
print_r ( $attachmeta["sizes"]);
//
// By specifying ["sizes"] you can display/access the sizes elements of the array
// Your output should look something like this:
//Output => Array ( [thumbnail] => Array ( [file] => 1-firefox-4-150x150.jpg [width] => 150 [height] => 150 ) [medium] => Array ( [file] => 1-firefox-4-300x282.jpg [width] => 300 [height] => 282 ) )
//
echo "<-- wp_get_attachment_metadata - sizes => thumbnail --";
print_r ( $attachmeta["sizes"]["thumbnail" ]);
//
// By specifying ["sizes"]["thumbnail"] you can display/access an even smaller piece of the the array
// Your output should look something like this:
//Output => Array ( [file] => 1-firefox-4-150x150.jpg [width] => 150 [height] => 150 )
//
echo "-- wp_get_attachment_metadata - sizes => thumbnail [file] --";
print_r ( $attachmeta["sizes"]["thumbnail" ]["file"]);
//
// By specifying ["sizes"]["thumbnail"]["file"] you can display/access the specific file name from the array returned by wp_get_attachment_metadata
// Your output should look something like this:
//Output => 1-firefox-4-150x150.jpg

Please pardon the appearance of this blurb/snippet of code. I’m having some issues with the SyntaxHighlighter plugin at the moment. Regardless, this post is intended to be quick, dirty and strictly informational. The best things to do is strip the comments out of the snippet and run it yourself. Save that as a reference. I wish I had time to discuss this further. I have to get back to squeezing in some cycles on AU_Community.

Required.
Will not be published. Required.
Please include http://