the second phase » Galleries http://www.phase2.net confessions of a geek Wed, 04 Aug 2010 07:11:44 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 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.

Main Page – Gallery Posts

So when I created a gallery, I wanted them to show up on the main page. But I wanted them to just have an image from the gallery, a short snippet of text, how many images were in the gallery and a link to all my other galleries, which is alot different to how all the other posts are displayed. This meant I would be modifying the main index.php page.

Before I did this, however, I went into my admin panel and created a category called ‘Galleries’ and then figured out the corresponding number for my category ( in my case, 25 ).

The reason I did this is because in the index.php, I created a small bit of logic that if a post was in category 25, display it differently. Not too complicated! So without further ado, here’s the index.php from my site. ( Again, sorry for any ‘bad’ code )

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

<?php get_header(); ?>
<div id="con_pad">
  <div id="content">
 
  <?php if (have_posts()) : ?>
  <?php
    function stupid_hack($str) {
      return preg_replace("|</ul>s*<ul class='asides'>|", '', $str);
    }
    ob_start('stupid_hack');
    while (have_posts()) : the_post(); ?>
        <?php if (in_category(27) && !is_single() ) :?>
          <ul class='asides'>
            <li id="p<?php the_id(); ?>"><?php echo wptexturize($post->post_content); ?>
            <a href="<?php the_permalink(); ?>" title="Permalink: <?php echo wptexturize(strip_tags(stripslashes($post->post_title), '')); ?>" rel="bookmark">
            <span><?php comments_number('(0 comments)', '(1 comment)','(% comments)')?></span></a>
            <span><?php edit_post_link('(e)'); ?></span></li>
          </ul>
        <?php elseif (in_category(25) && !is_single() ) :?>
          <div class="post" id="post-<?php the_ID(); ?>">
                <div class="post-date"><span class="post-month"><?php the_time('M') ?></span> <span class="post-day"><?php the_time('d') ?></span></div>
                <div class="post-title">
                  <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
                </div>
                <div class='gallery-post'>
                <?php
                  $attachments = array_values(get_children(array('post_parent' => $post->ID, 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => 'ASC, ID ASC', 'orderby' => 'menu_order') ) );
                  $num_pics = sizeof($attachments);
                ?>
                <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php echo wp_get_attachment_image( $attachments[0]->ID, 'thumbnail' ); ?></a>
                </div>
                <div class='gallery-post-text'>
                  <?php the_content('',FALSE,''); ?>
                  This album has <strong><?php echo $num_pics ?> items</strong>.<br/>  Check out my <a href="/category/galleries">other albums</a>.
                </div>
          </div>
        <?php else: ?>
 
    <div class="post" id="post-<?php the_ID(); ?>">
          <div class="post-date"><span class="post-month"><?php the_time('M') ?></span> <span class="post-day"><?php the_time('d') ?></span></div>
          <div class="post-title">
          <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
                <span class="post-cat"><?php the_category(', ') ?></span> <span class="post-comments"><?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></span>
          </div>
          <div class="entry">
                <?php the_content('Read the rest of this entry &raquo;'); ?>
          </div>
        </div><!--/post -->
        <?php endif; ?>
      <?php endwhile; ?>
 
        <div class="navigation">
          <span class="previous-entries"><?php next_posts_link('Previous Entries') ?></span> <span class="next-entries"><?php previous_posts_link('Next Entries') ?></span>
        </div>
 
    <?php else: ?>
 
        <h2>Not Found</h2>
        <p>Sorry, but you are looking for something that isn't here.</p>
 
  <?php endif; ?>
 
  </div><!--/content -->
<?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>

So let’s start. First, we’ve just got some miscellaneous stuff that’s not too important. I call the header and there is a hack in here for an issue with my asides.

1
2
3
4
5
6
7
8
9
10

<?php get_header(); ?>
<div id="con_pad">
  <div id="content">
 
  <?php if (have_posts()) : ?>
  <?php
    function stupid_hack($str) {
      return preg_replace("|</ul>s*<ul class='asides'>|", '', $str);
    }
    ob_start('stupid_hack');

Here’s where it gets interesting. While I have posts to post ( heh ), I check the category the post is in. Because I use the ‘asides’ modification, I check for category 27. I also want to make sure that I’m not currently displaying a single post, because if I were, I’d want it to look differently. This assures that this style will only occur when a user is displaying all the posts on the page.

11
12
13
14
15
16
17
18

    while (have_posts()) : the_post(); ?>
        <?php if (in_category(27) && !is_single() ) :?>
          <ul class='asides'>
            <li id="p<?php the_id(); ?>"><?php echo wptexturize($post->post_content); ?>
            <a href="<?php the_permalink(); ?>" title="Permalink: <?php echo wptexturize(strip_tags(stripslashes($post->post_title), '')); ?>" rel="bookmark">
            <span><?php comments_number('(0 comments)', '(1 comment)','(% comments)')?></span></a>
            <span><?php edit_post_link('(e)'); ?></span></li>
          </ul>

This isn’t a tutorial on asides, so let’s get to the next part in that code – when I check for category 25 and make sure that it’s not a single post viewing.

19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

        <?php elseif (in_category(25) && !is_single() ) :?>
          <div class="post" id="post-<?php the_ID(); ?>">
                <div class="post-date"><span class="post-month"><?php the_time('M') ?></span> <span class="post-day"><?php the_time('d') ?></span></div>
                <div class="post-title">
                  <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
                </div>
                <div class='gallery-post'>
                <?php
                  $attachments = array_values(get_children(array('post_parent' => $post->ID, 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => 'ASC, ID ASC', 'orderby' => 'menu_order') ) );
                  $num_pics = sizeof($attachments);
                ?>
                <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php echo wp_get_attachment_image( $attachments[0]->ID, 'thumbnail' ); ?></a>
                </div>
                <div class='gallery-post-text'>
                  <?php the_content('',FALSE,''); ?>
                  This album has <strong><?php echo $num_pics ?> items</strong>.<br/>  Check out my <a href="/category/galleries">other albums</a>.
                </div>
          </div>

If I find a post and it is in category 25, I create a nice little div ( I mostly copied from the regular posts code at the bottom for the first bit of design ). The changes really come about when I create the ‘gallery-post’ div.

My first bit of code is to grap all the attachments from the post, which I do by just telling it to grab all the children of my current post. Then I get a quick sum of the amount of pictures collected.

25
26
27
28
29

                <div class='gallery-post'>
                <?php
                  $attachments = array_values(get_children(array('post_parent' => $post->ID, 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => 'ASC, ID ASC', 'orderby' => 'menu_order') ) );
                  $num_pics = sizeof($attachments);
                ?>

Next, I display the image and close out my div.

30
31

                <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php echo wp_get_attachment_image( $attachments[0]->ID, 'thumbnail' ); ?></a>
                </div>

I now create another div that will contain my text and here’s a small detail that is important. I call the_content() with some arguments. These arguments are important because I insert a <!–more–> tag into the post between the snippet and description. I didn’t want WordPress inserting its ‘Read the rest of this entry’ crap, so that’s why the first argument is nulled out.

32
33

                <div class='gallery-post-text'>
                  <?php the_content('',FALSE,''); ?>

I also set a style in my css style sheet that makes it display properly, but I don’t really want to go into the ‘design’ factors right now.

After all that, I display the number of pictures in the gallery and my link to a category page, which is a wordpress ability to display all pages from a certain category.

34
35

                  This album has <strong><?php echo $num_pics ?> items</strong>.<br/>  Check out my <a href="/category/galleries">other albums</a>.
                </div>

Then, if my post is not in category 25 or in category 27, I then display it as a normal post -

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

        <?php else: ?>
 
    <div class="post" id="post-<?php the_ID(); ?>">
          <div class="post-date"><span class="post-month"><?php the_time('M') ?></span> <span class="post-day"><?php the_time('d') ?></span></div>
          <div class="post-title">
          <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
                <span class="post-cat"><?php the_category(', ') ?></span> <span class="post-comments"><?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></span>
          </div>
          <div class="entry">
                <?php the_content('Read the rest of this entry &raquo;'); ?>
          </div>
        </div><!--/post -->
        <?php endif; ?>
      <?php endwhile; ?>
 
        <div class="navigation">
          <span class="previous-entries"><?php next_posts_link('Previous Entries') ?></span> <span class="next-entries"><?php previous_posts_link('Next Entries') ?></span>
        </div>
 
    <?php else : ?>
 
        <h2>Not Found</h2>
        <p>Sorry, but you are looking for something that isn't here.</p>
 
  <?php endif; ?>
 
  </div><!--/content -->
 
<?php get_sidebar(); ?>
</div>

I had some problems with the design of the gallery div and getting the text right, but it just took some mucking around with the css to get it right.

Now onto the listing of galleries!

List of Galleries

My next item of business was to create a way to list all of my galleries. This is relatively easy because WordPress, the great tool that it is, already has a way to quickly display all posts that fall into a certain category. The problem I had was that when it happens, the posts were not displaying how they had on the main page. Instead, they were just displaying short snippets of text. Like the image.php, WordPress has a way for you to create certain pages that will be called when displaying a specific category. In order to do this, you create a page called ‘category-#.php’, where the # corresponds to your category number. So I created a ‘category-25.php’ file and got to editing. This is what it ended up looking like.

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

<?php get_header(); ?>
<div id="con_pad">
  <div id="content">
 
        <?php if (have_posts()) : ?>
          <?php while (have_posts()) : the_post(); ?>
 
                <?php
                  $attachments = array_values(get_children(array('post_parent' => $post->ID, 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => 'ASC, ID ASC', 'orderby' => 'menu_order') ) );
                  $num_pics = sizeof($attachments);
                ?>
          <div class="post" id="post-<?php the_ID(); ?>">
                <div class="post-date"><span class="post-month"><?php the_time('M') ?></span> <span class="post-day"><?php the_time('d') ?></span></div>
                <div class="post-title">
                  <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
                  <span class="post-cat"><?php the_category(', ') ?></span> <span class="post-comments"><?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></span>
                </div>
                <div class='gallery-post'>
                <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php echo wp_get_attachment_image( $attachments[0]->ID, 'thumbnail' ); ?></a>
                </div>
                <div class='gallery-post-text'>
                <?php the_content('','FALSE',''); ?>
                This album has <strong><?php echo $num_pics ?> items</strong>.
                </div>
          </div>
          <?php endwhile; ?>
        <?php else : ?>
          Sorry, there are no galleries to view.
        <?php endif; ?>
 
  </div>
<?php get_sidebar(); ?>
 
</div>
<?php get_footer(); ?>

If you’ll notice, most of this code is the exact same from the category 25 code on the main page, because really, I wanted my gallery posts to look the same here as they did on the main page! In fact, the only difference is that I don’t need the logic statements to check if these posts are in category 25 – Wordpress is already doing that for me. Other then that, the code is the exact same code! So really, I’ll skip the explanation here.

The actual post

I need to mention that I didn’t actually code anything special at all for the actual display of the gallery itself. That is all done via the Wordpress gallery shortcode. The only thing I have to make sure to do is to use the <!–more–>

code between the short snippet of text and the actual description. After the description, I simply put the gallery shortcode in and did a little css style sheet magic.

The last thing I had to do is to make sure to assign the post to my 'Galleries' category. After that, nothing else was needed.

I hope people found this informative and I'm sorry it took so long to get out. If you'd like a tarball of my theme so you can poke around with it, please just send me an email at hajducko at gmail.com and as always, comments welcome!

]]> http://www.phase2.net/2008/07/23/wordpress-gallery-tutorial/feed/ 15 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/ 0 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/ 0