the second phase http://www.phase2.net confessions of a geek Thu, 21 Aug 2008 02:57:36 +0000 http://wordpress.org/?v=2.6 en Wordpress Gallery tutorial http://www.phase2.net/2008/07/23/wordpress-gallery-tutorial/ http://www.phase2.net/2008/07/23/wordpress-gallery-tutorial/#comments Thu, 24 Jul 2008 03:15:51 +0000 steve http://www.phase2.net/?p=458 With the release of Wordpress 2.5 awhile back, they introduced the ‘gallery’ shortcode.  The gallery shortcode takes all the media attachments and creates a nicely laid out gallery, thumbnails and all.  The problem with it is that it doesn’t do much more then that, unless of course your theme supports it.  It shows the attachment and that’s basically it.  No navigation, no special listing of galleries, nada.

One of the problems I’ve found with Wordpress is that it’s somewhat difficult to really implement good galleries that stick with the theme.  I’ve tried Gallery2/WPG and some others and I’ve even gone the route of trying to have a completely separate gallery or photo blog.  Nothing really made me that happy.  I like the theme I have currently, so I wasn’t looking forward to finding a new one or actually hacking a new theme together to support the galleries better.  So last weekend I sat down and got my hands dirty.

There were a couple goals I had for this project.

  • Better navigation when you were viewing a photo in the gallery
  • EXIF data on the image page
  • A special format for any gallery type post
  • A listing of all the galleries

I first started off with what I thought was the easiest - better navigation in the galleries.  When WP displays the gallery page, it looks for a couple templates, the first being image.php, then attachment.php and then some others.  I went into my theme and created a image.php file.  I also brought up the Default theme’s image.php to get somewhat of an idea of what I needed.

Basically, the image.php is the same as a single page, it’s just displaying different content.  First I’ll post the entire image.php and then explain what I was doing.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109

<?php get_header(); ?>
  <div id="content_gallery">
  <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
 
    <div class="post" id="post-<?php the_ID(); ?>">
      <h2><a href="<?php echo get_permalink($post->post_parent); ?>" rev="attachment"><?php echo get_the_title($post->post_parent); ?></a> </h2>
      <div class="gallery_entry">
      <?php
        $parent = $post->post_parent;
        $attachments = array_values(get_children(array('post_parent' => $post->post_parent, 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => 'ASC', 'orderby' => 'ID') ) );
 
        foreach ( $attachments as $k => $attachment )
        if ( $attachment->ID == $post->ID )
          break;
 
        $next = $k+1;
        $prev = $k-1;
        $next_link = "";
        $prev_link = "";
 
        if ( isset($attachments[$next]) )
        {
          $next_exists = 1;
          $next_link = "<a href='" . get_attachment_link( $attachments[$next]->ID ) . "'> next image >></a>";
          $img_link = "<a href='" . get_attachment_link( $attachments[$next]->ID ) . "'>";
        }
 
        if ( isset($attachments[$prev]) )
        {
          $prev_exists = 1;
          $prev_link = "<a href='" . get_attachment_link( $attachments[$prev]->ID ) . "'> << previous image</a>";
          if  (!$next_exists)
          {
            $img_link = "<a href='" . get_attachment_link( $attachments[$prev]->ID ) . "'>";
          }
        }
 
        if (!$next_exists and !$prev_exists)
        {
          $img_link = "<a href='" . get_attachment_link( $attachments[$k]->ID ) . "'>";
        }
 
        $img_url = wp_get_attachment_url( $attachments[$k]->ID );
        preg_match("/.*(/wp-content/uploads/S+.S+)/", $img_url, $matches);
        if (sizeof($matches) > 1)
        {
          $fn = "/home/phasenet/public_html" . $matches[1];
          $exif_data = read_exif_data($fn);
        }
 
      ?>
        <p class="attachment"><?php echo $img_link; echo wp_get_attachment_image( $post->ID, 'medium' ); ?></a></p>
        <div class="caption"><?php if ( !empty($post->post_excerpt) ) the_excerpt(); ?></div>
 
        <?php the_content('<p class="serif">Read the rest of this entry &raquo;</p>'); ?>
        <table id='photo-details'>
          <tr>
            <th> Original Image: </th>
            <td> <a href="<?php echo $img_url ?>"><?php print $exif_data['COMPUTED']['Width'] . "x" . $exif_data['COMPUTED']['Height']; ?></a>, <?php echo exif_filesize($exif_data['FileSize']); ?></td>
          </tr>
          <tr>
            <th> Camera: </th>
            <td> <?php print $exif_data['Model'] ?> </td>
          </tr>
          <tr>
            <th> Focal Length: </th>
            <td> <?php if ($exif_data['FocalLength'])
                    print exif_divide($exif_data['FocalLength']);
                   else
                    print "Not available" ?>
            </td>
          </tr>
          <tr>
            <th> Aperture: </th>
            <td> <?php print $exif_data['COMPUTED']['ApertureFNumber'] ?> </td>
          </tr>
          <tr>
            <th> Shutter: </th>
            <td> <?php if ($exif_data['ExposureTime'])
                    print $exif_data['ExposureTime'];
                   else
                    print "Not available"; ?>
            </td>
          </tr>
          <tr>
            <th> ISO: </th>
            <td> <?php if ($exif_data['ImageInfo'][2])
                  print $exif_data['ImageInfo'][2];
                   else
                  print "Not available"; ?>
             </td>
          </tr>
        </table>
 
        <div class="navigation">
          <div class="alignleft"><?php echo $prev_link ?></div>
          <div class="alignright"><?php echo $next_link ?></div>
        </div>
        <br class="clear" />
 
      </div>
    </div>
 
  <?php comments_template(); ?>
  <?php endwhile; else: ?>
    <p>Sorry, no attachments matched your criteria.</p>
<?php endif; ?>
  </div>
<?php get_footer(); ?>

No apologies for my code syntax or style. :P In any case, we can start stepping through it. As I said earlier, the image.php acts like single.php in that we’re actually getting the_post. However, one thing that we need is the parent of this post ( ie - the gallery main page ), in order to get the children so we can create the navigation links. We do this via the following:

9
10

$parent = $post->post_parent;
$attachments = array_values(get_children(array('post_parent' => $post->post_parent, 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => 'ASC', 'orderby' => 'ID') ) );

Now that we have all of the children posts ( or really, the other pictures in the gallery ), we have to figure out where in that list our current page is so that we can determine who is next and who was before us. We’ll do this via a simple loop:

12
13
14
15
16
17

foreach ( $attachments as $k => $attachment )
  if ( $attachment->ID == $post->ID )
    break;
 
$next = $k+1;
$prev = $k-1;

Pretty simple. We loop until the ID in the list matches our current ID and then break out. Add one, subtract one and we got our next and previous photos. Now, the next code has to deal with some navigation quirks. In my gallery, I wanted the user to be sent to the next photo if they actually clicked on the photo being displayed. However, once they get to the end, it needs to send them back a photo since there is nowhere else to go. The following code does just that.

21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

if ( isset($attachments[$next]) )
{
  $next_exists = 1;
  $next_link = "<a href='" . get_attachment_link( $attachments[$next]->ID ) . "'> next image >></a>";
  $img_link = "<a href='" . get_attachment_link( $attachments[$next]->ID ) . "'>";
}
 
if ( isset($attachments[$prev]) )
{
  $prev_exists = 1;
  $prev_link = "<a href='" . get_attachment_link( $attachments[$prev]->ID ) . "'> << previous image</a>";
  if (!$next_exists)
  {
    $img_link = "<a href='" . get_attachment_link( $attachments[$prev]->ID ) . "'>";
  }
}
 
if (!$next_exists and !$prev_exists)
{
  $img_link = "<a href='" . get_attachment_link( $attachments[$k]->ID ) . "'>";
}

Basically, we test to make sure there is another item after us in the list. If there is, we set the image to shoot us to the next link, as well as create the link for our ‘next’ navigation button and lastly, set a flag that there is a ‘next’ photo. We then test if there is a ‘previous’ photo in the list and if there is, we set the ‘previous’ navigation link and a flag gets turned on. Then we test the state of the ‘next’ flag, because if there isn’t another photo in the list to go to, we have to set the image’s link somewhere else. In this case, we set it to the previous image if there is no next image.

Lastly, we check if either of the flags are set. If neither of them were turned on, that means there is no next or previous photo to go to so we just set the image’s link to reference itself.

The last step of the main bulk of our php code is to get some EXIF data, which is basically data that some cameras embed into the photo. PHP supports this if it’s compiled in so your web hosting vendor may or may not have this. Mine does ( yay! ) so I was able to support this. Here’s the code again:

43
44
45
46
47
48
49

$img_url = wp_get_attachment_url( $attachments[$k]->ID );
preg_match("/.*(/wp-content/uploads/S+.S+)/", $img_url, $matches);
if (sizeof($matches) > 1)
{
  $fn = "/home/phasenet/public_html" . $matches[1];
  $exif_data = read_exif_data($fn);
}

The read_exif_data function requires an actual filename and does not work with a URL unfortunately. Because of this, I have to figure out where on the web host my file actually resides. I do this by getting the URL from the attachment, then doing a small sanity check just to make sure that it matches the upload directory that Wordpress uses. I then test the size of the result to make sure it’s more than 1. preg_match basically returns the item matched against and then any matches that were captured. If I receive a match, I create the filename and then just read in the exif data.

The last part of this is really just output. I display my image and link it to the URL we created earlier. You actually get the image via the wp_get_attachment_image function. After that, I just create a table and display the data from my *$exif_data* array.

52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93

        <p class="attachment"><?php echo $img_link; echo wp_get_attachment_image( $post->ID, 'medium' ); ?></a></p>
        <div class="caption"><?php if ( !empty($post->post_excerpt) ) the_excerpt(); ?></div>
 
        <?php the_content('<p class="serif">Read the rest of this entry &raquo;</p>'); ?>
        <table id='photo-details'>
          <tr>
            <th> Original Image: </th>
            <td> <a href="<?php echo $img_url ?>"><?php print $exif_data['COMPUTED']['Width'] . "x" . $exif_data['COMPUTED']['Height']; ?></a>, <?php echo exif_filesize($exif_data['FileSize']); ?></td>
          </tr>
          <tr>
            <th> Camera: </th>
            <td> <?php print $exif_data['Model'] ?> </td>
          </tr>
          <tr>
            <th> Focal Length: </th>
            <td> <?php if ($exif_data['FocalLength'])
                    print exif_divide($exif_data['FocalLength']);
                   else
                    print "Not available" ?>
            </td>
          </tr>
          <tr>
            <th> Aperture: </th>
            <td> <?php print $exif_data['COMPUTED']['ApertureFNumber'] ?> </td>
          </tr>
          <tr>
            <th> Shutter: </th>
            <td> <?php if ($exif_data['ExposureTime'])
                    print $exif_data['ExposureTime'];
                   else
                    print "Not available"; ?>
            </td>
          </tr>
          <tr>
            <th> ISO: </th>
            <td> <?php if ($exif_data['ImageInfo'][2])
                  print $exif_data['ImageInfo'][2];
                   else
                  print "Not available"; ?>
             </td>
          </tr>
        </table>

And last, but not least, I create the navigation links, print out the comments template and the footer of the page.

95
96
97
98
99
100
101
102
103
104
105
106
107
108
109

        <div class="navigation">
          <div class="alignleft"><?php echo $prev_link ?></div>
          <div class="alignright"><?php echo $next_link ?></div>
        </div>
        <br class="clear" />
 
      </div>
    </div>
 
  <?php comments_template(); ?>
  <?php endwhile; else: ?>
    <p>Sorry, no attachments matched your criteria.</p>
<?php endif; ?>
  </div>
<?php get_footer(); ?>

Next up is how I modified the gallery main page.

]]> http://www.phase2.net/2008/07/23/wordpress-gallery-tutorial/feed/ Perfection? http://www.phase2.net/2008/07/21/perfection/ http://www.phase2.net/2008/07/21/perfection/#comments Mon, 21 Jul 2008 17:13:48 +0000 steve http://www.phase2.net/?p=456 I think so.

]]> http://www.phase2.net/2008/07/21/perfection/feed/ Galleries are done! http://www.phase2.net/2008/07/20/galleries-are-done/ http://www.phase2.net/2008/07/20/galleries-are-done/#comments Mon, 21 Jul 2008 06:00:40 +0000 steve http://www.phase2.net/?p=451 What I thought was going to turn into a crazy weekend of hacking through the theme’s CSS and PHP and going back and forth between the wordpress codex and my terminal windows turned out to be alot easier than I had anticipated.  I’ll post something up tomorrow night about what was required and hopefully I can transfer some of my old galleries over to the new format.

]]> http://www.phase2.net/2008/07/20/galleries-are-done/feed/ Wine Wonderland http://www.phase2.net/2008/07/20/wine-wonderland/ http://www.phase2.net/2008/07/20/wine-wonderland/#comments Mon, 21 Jul 2008 05:57:43 +0000 steve http://www.phase2.net/?p=420 Jen and Garett hosted a wine party for Jen’s 30th birthday.

These are some older photos that I’m posting up now that I’ve got some decent galleries going.  

]]> http://www.phase2.net/2008/07/20/wine-wonderland/feed/ 3rd of July http://www.phase2.net/2008/07/20/3rd-of-july/ http://www.phase2.net/2008/07/20/3rd-of-july/#comments Mon, 21 Jul 2008 05:01:12 +0000 steve http://www.phase2.net/?p=347 A pre-celebration of the 4th.

My brother and his family go to a local park in Moorpark that celebrates the 4th of July one day early for those of us who are working that day.  So this year I tagged along and snagged a few pics with my crappy point and shoot camera.

]]> http://www.phase2.net/2008/07/20/3rd-of-july/feed/ Excuses http://www.phase2.net/2008/07/19/excuses/ http://www.phase2.net/2008/07/19/excuses/#comments Sun, 20 Jul 2008 07:21:39 +0000 steve http://www.phase2.net/?p=337 Excuse the mess on the image pages, I’m messing around with printing out the exif data.

]]> http://www.phase2.net/2008/07/19/excuses/feed/ Gallery EXIF data http://www.phase2.net/2008/07/19/gallery-exif-data/ http://www.phase2.net/2008/07/19/gallery-exif-data/#comments Sat, 19 Jul 2008 08:26:24 +0000 steve http://www.phase2.net/?p=333 I noticed that some of the gallery pics are a bit tiny - I’ll be updating the individual pages to display EXIF data for the photo as well as a link where you can download the original image.  Too tired to do that right now.

]]> http://www.phase2.net/2008/07/19/gallery-exif-data/feed/ Galleries http://www.phase2.net/2008/07/19/galleries/ http://www.phase2.net/2008/07/19/galleries/#comments Sat, 19 Jul 2008 08:02:14 +0000 steve http://www.phase2.net/?p=319 So I finally got the galleries going and I think I’ve gotten them to integrate into the site well enough.  I had contemplated messing with some of the flickr additions but I’m not sure I want to bother with that.

I’ll try and write up a few paragraphs about what I had to do to accomplish it but it’s 1 in the morning and I gotta go golfing tomorrow morning!

]]> http://www.phase2.net/2008/07/19/galleries/feed/ My dog wants to be a teletubbie. http://www.phase2.net/2008/07/18/my-dogs-are-aliens/ http://www.phase2.net/2008/07/18/my-dogs-are-aliens/#comments Sat, 19 Jul 2008 07:55:50 +0000 steve http://www.phase2.net/?p=259

Man, I’m so mean to my dogs.

]]> http://www.phase2.net/2008/07/18/my-dogs-are-aliens/feed/ It happened again http://www.phase2.net/2008/07/17/it-happened-again/ http://www.phase2.net/2008/07/17/it-happened-again/#comments Fri, 18 Jul 2008 05:17:45 +0000 steve http://www.phase2.net/?p=207 So yeah, it happened again - I failed to update my blog for a few months as things got pretty crazy around here.   Most of this craziness was centered around moving to a new house as our rent expired on our old house.  The ironic thing being that we moved all of a fourth of a mile.  We’re literally one street over from where we used to live.  That, combined with stuff at work finally picking up and life in general has made for a hectic time.

I hate it when I don’t update for this long because there are so many things I’d love to talk about but I don’t want to write 10 pages worth of stuff.  Unfortunately, this means that I don’t dedicate enough time to those things.  A horrible dilemma. :)

So, to that end, I’ve decided I’ll break this post up into many individual posts over the next few days about all the things that have been going on, what I’ve been up to, what new tech stuff I’m involved in and the like.

I’ll also try and go back to some old posts that I promised would come and never did ( like that cooking software review.. ).

So please, stay tuned for alot of updates in the next few days.

]]> http://www.phase2.net/2008/07/17/it-happened-again/feed/