10 years ago…

[sImage imgid=”1674″ class=”center bigframe”]

that’s a real receipt. i remember getting off the bus. there may have been snow. that store is still there. can’t remember where i went for new years that year. 10 years later. new domain. same psuedonym. life, it continues…

back then, times were stupid wild.

Audio clip: Adobe Flash Player (version 9 or above) is required to play this audio clip. Download the latest version here. You also need to have JavaScript enabled in your browser.

notes:
– gucci mane is stil abhorrent.
– i remain a sucker for idiotic bangladesh beats.

wordpress gallery shortcode update.

some history: since shortly after the release of the [gallery] shortcode, I’ve been using a custom field called “useGallery” to conditionally show every thumbnail image attached to a particular post. i first did this after noticing in my log stats that users would bounce back and forth to get a look at all of the images included in a [gallery] posting. i thought it made more sense to have all of the thumbnail images available at once so users didn’t have to waste clicks. after using that bit of code for awhile, i made a modest upgrade that changed the border color of the active image being viewed using conditional logic and some simple css additions to my stylesheet.

For the geeks – here’s a look at the code that did it.

$useGallery = $wpdb->get_var("SELECT meta_value useGallery FROM $wpdb->postmeta WHERE meta_key = 'useGallery' and post_id = $post->post_parent");

if ($useGallery == 1) {

$oImages = $wpdb->get_results("SELECT i.id aID, i.post_excerpt altTitle, i.post_content, i.post_name iName
FROM wp_posts p 
join wp_posts i on p.id = i.post_parent 
join wp_postmeta m on i.id = m.post_id and m.meta_key = '_wp_attachment_metadata'
where i.post_parent = $post->post_parent
order by i.menu_order");

$rowcount = $wpdb->num_rows;

echo '
<h3>other images (' . $rowcount . ')</h3>';

$i = 0;
foreach($oImages as $oImage) : 
	$i = $i + 1;
	$imgText = get_image_tag($oImage->aID,$oImage->altTitle,$oImage->altTitle,'','thumbnail'); 
    $iref = get_permalink($post->post_parent) .  $oImage->iName;

    if(($i % 3) == 1){echo '<div class=\'gallery\'>';}

    if ($oImage->aID == $id) { echo('<dl class=\'gallery-current gallery-columns-3\'><dt class=\'gallery-icon\'>' . $imgText . '</dt></dl>'); } else {
echo'<dl class=\'gallery-item gallery-columns-3\'><dt class=\'gallery-icon\'><a href=' . $iref .'>' . $imgText . '</a></dt></dl>'; }

    if(($i % 3) == 0 || ($i == $rowcount)){echo '</div>';}
endforeach;

echo '<br style=\'clear: both;\' />';
}

For you nongeeks – this is what’s happening in “plain” english: first check to see if useGallery is set, then get all images from the post that this image we are currently looking at is attached to, count how many you have, loop over those images and display a thumbnail. while displaying a thumbnail, determine if the one you are currently looking at up top is the thumbnail you are displaying and give that a different css class so that you can shade it’s border a different color. also, check to see if you’re a multiple of 3, or, if you’re at the end of the images. basically, my goal was to mimic the function of wp’s built in gallery shortcode with, admittedly, a very simple tweak.

the problem: after the big change to the site, i realized i would have to make a change to every post that used the shortcode gallery. my new, slimmer, trimmer 420px column on the frontpage did not play well w/galleries that had more than 2 columns and used thumbnail images with a width of 200px. now, that meant that i’d have to hunt down every post that i used the gallery shortcode in or make a global change to the code that runs the gallery shortcode. because those lovely people over at WP left a comment in their code i was able to go right to the source and make an edit to change the default columns to 2 and that took care of my initial problem. while poking around in there, i noticed a commented line which read, “// Allow plugins/themes to override the default gallery template.

There’s more than one way to skin a cat, but, if you’re skinning said cat somewhere close to a factory that creates cat-skinning lasers, you may want to put down your trusty swiss army knife.

i figured, if they wanted you to override the gallery template, they’d probably have some way to do it, so off i went to the codex to find out the best way to do so. the fourth example on that page had almost everything i wasted XX number of lines writing above, and more, a means of using the underlying code that would mean i only needed to update in one place.

 <?php
    $gallery_shortcode = '[ gallery id="' . intval( $post->post_parent ) . '"]';
    print apply_filters( 'the_content', $gallery_shortcode );
 ?>

in geek, this is clearly a RTFM issue. in non-geek, that says, “you should have read the fn manual.” this was great, i would be able to replace my custom code with the actual gallery shortcode that WP uses. after a tiny tweak i’d be able to take care of my 3 column issue at the slight cost that I would need to change it every time i upgraded WP. or, at least i thought i would until i came across this bit of genius from esmi which could easily solve my problem.

remove_shortcode('gallery');
add_shortcode('gallery', 'theme_gallery_shortcode');

simple enough to geeks and non-geeks: screw their shortcode, use your own!

the revised gallery shortcode sits below

function h_gallery_shortcode($attr) {
	global $post;

	static $instance = 0;
	$instance++;

	// Allow plugins/themes to override the default gallery template.
	$output = apply_filters('post_gallery', '', $attr);
	if ( $output != '' )
		return $output;

	// We're trusting author input, so let's at least make sure it looks like a valid orderby statement
	if ( isset( $attr['orderby'] ) ) {
		$attr['orderby'] = sanitize_sql_orderby( $attr['orderby'] );
		if ( !$attr['orderby'] )
			unset( $attr['orderby'] );
	}

	extract(shortcode_atts(array(
		'order'      => 'ASC',
		'orderby'    => 'menu_order ID',
		'id'         => $post->ID,
		'itemtag'    => 'dl',
		'icontag'    => 'dt',
		'captiontag' => 'dd',
		'columns'    => 2,
		'size'       => 'thumbnail',
		'currentid'  => '0'
	), $attr));

	$id = intval($id);
	$attachments = get_children( array('post_parent' => $id, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );

	if ( empty($attachments) )
		return '';

	if ( is_feed() ) {
		$output = "\n";
		foreach ( $attachments as $att_id => $attachment )
			$output .= wp_get_attachment_link($att_id, $size, true) . "\n";
		return $output;
	}

	$itemtag = tag_escape($itemtag);
	$captiontag = tag_escape($captiontag);
	$columns = intval($columns);
	$itemwidth = $columns > 0 ? floor(100/$columns) : 100;

	$selector = "gallery-{$instance}";

	$output = apply_filters('gallery_style', "
		<style type='text/css'>
			#{$selector} {
				margin: auto;
			}
			#{$selector} .gallery-item {
				float: left;
				margin-top: 10px;
				text-align: center;
				width: {$itemwidth}%;
			}
		</style>
		<div id='$selector' class='gallery galleryid-{$id}'>");

	$i = 0;
	foreach ( $attachments as $id => $attachment ) {
		$link = isset($attr['link']) && 'file' == $attr['link'] ? wp_get_attachment_link($id, $size, false, false) : wp_get_attachment_link($id, $size, true, false);
		$currentclass = ($id == $currentid) ? 'gallery-current' : 'gallery-item';

		$output .= "<{$itemtag} class='$currentclass'>";
		$output .= "
			<{$icontag} class='gallery-icon'>
				$link
			</{$icontag}>";
		if ( $captiontag && trim($attachment->post_excerpt) ) {
			$output .= "
				<{$captiontag} class='gallery-caption'>
				" . wptexturize($attachment->post_excerpt) . "
				</{$captiontag}>";
		}
		$output .= "</{$itemtag}>";
		if ( $columns > 0 && ++$i % $columns == 0 )
			$output .= '<br style="clear: both" />';
	}

	$output .= "
			<br style='clear: both;' />
		</div>\n";

	return $output;
}

i’ve trimmed the css and added the “currentid” attribute. the highlighted lines show the code used to add the “currentid” attribute. my huge chunk of code from the beginning now appears as 9 simple lines.

$useGallery = $wpdb->get_var("SELECT meta_value useGallery FROM $wpdb->postmeta WHERE meta_key = 'useGallery' and post_id = $post->post_parent");

if ($useGallery == 1) {

echo '<h3>other images</h3>';

    $gallery_shortcode = '[ gallery columns="3" currentid="' . intval($id) . '" id="' . intval( $post->post_parent ) . '"]';
    print apply_filters( 'the_content', $gallery_shortcode );
}

overall, this was a huge success. i was able to eliminate my duplicate code, i was able to fix the 3 column default issue w/out worrying about it being overwritten in an upgrade and i (re)learned one of life’s most important lessons — RTFM. the biggest thing that i took away from this experience is that you can rewrite a bunch of the “core” functions/tags/etc that are available in WP. one guy even created a plugin that turns template tags into shortcodes. this lets me know that before i go off and try to rewrite history, a little more time on teh googz can stop me from having to cut ~30 lines of code down to five. now all i’ll need is someone to draw me a picture of a cat skinning laser factory and this might be a perfect post.

wordpress shortcode: smarterImage.

The issue: New layout had a 440px main column that restricted the overall size of images that could be shown. Previous theme had images uploaded at a much larger size, so they were being smushed and pixelated because new theme used max-width: 100%; markup to constrain their overall size.

The goals: Resize images to proper width and expand the main column on single pages so that they could take advantage of the larger images. Decided to create a shortcode that could take a unique identifier and return the medium sized or large sized image to take full advantage of the size of the layout. Also, dynamically pull the alt/title tag information from the db and allow that to be overridden by an inline param.

The code:

function smarterImage($atts, $content = null) {
   global $wpdb;
   extract( shortcode_atts( array(
      'imgid' => '0',
      'imgsize' => 'medium',
      'class' => '',
      'alt' => ''
      ), $atts ) );

   if (is_single()) { $imgsize = 'large'; }
   $imgclass = $class;
   $imgstring = wp_get_attachment_image($imgid, $imgsize, false);
   $imgsource = wp_get_attachment_image_src($imgid, $imgsize, false);
   $imgtitleqs = "select post_title, post_excerpt from wp_posts where id = $imgid";
   $imgtitleq = $wpdb->get_row($imgtitleqs);

   if (strlen($alt) > 0 ) {
		$imgtitle = $alt;
   } elseif (strlen($imgtitleq->post_excerpt) > 0 ) {
		$imgtitle = $imgtitleq->post_excerpt;
   } else {
		$imgtitle = $imgtitleq->post_title;
   }

   return '<img width="'. $imgsource[1] .'" height="'. $imgsource[2] .'" src="'. $imgsource[0] .'" class="attachment-'. $imgsize .' '. $imgclass .'" alt="" title="'. $imgtitleo .'" />';
}
add_shortcode("sImage", "smarterImage");

Usage:
[sImage imgid=”1467″ class=”” alt=””]

The imgid is required, all other attributes are optional.

Additional Notes: As with all other redesigns, I used the great Regenerate Thumbnails to create the new medium and large sized images. I also learned a good deal about shortcodes from Smashing’s piece on Mastering Shortcodes.

The best way to see how the shortcode works is to view the front page, or one of the previous pages and compare it to how a single page looks. take a look at how the post dynamically substitutes a max-width 420px image for a max-width 720px image. It’s easiest to see it with a post from the on repeat category.

new look, added search and full archives.

the title pretty much says it all. i’ve added a full archive, so even if you don’t find what you want by using the search bar at the top, you should be able to browse via monthly archives or to one of your favorite tags/categories.

if you’ve been here in the past month, you’ve seen the updated theme on.hiatus based off of the fantastic simplr.  i wanted something clean that prominently displayed twitter, last.fm & my google reader suggestions. mostly because i update those places way more than this one.

i will prolly update the front page so that i show more than just my latest on: repeat song, but, truthfully, i’m interested in how people navigate the site when traditional blog methods aren’t available.  so far, i’ve realized, they don’t.

no matter – coming soon: top 5 street fighter dbags, top 5 silfs & a song or two that’s stuck in my head.

jj abrams on the mystery box.

i don’t watch lost.  or heroes.  & i hate the hell out of most reality competition shows.  i am a huge fan of getting in on the ground floor, w/out that, i feel lost and that i don’t fully understand what’s going on. however, i am a huge fuckin’ fan of ambiguity.  that something can be anything, as long as you don’t open the box…

i got the link from sleevage {src}, which is a great site in and of itself.

the greatest inspiration for this site has always been technology.  from the first post (using audioplayer) to this latest one (a discussion of how to use high and low tech to achieve a goal) it’s always been “that new thing” which inspires the posts. even the hoesinthesameclothes post was an excuse to use the new gallery tag.

i suppose that’s a way of explaining the dearth of posts recently, and, to announce, tech will reverse that.