Wordpress Gallery tutorial

Wednesday, July 23rd, 2008

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!

Tags: , , ,

Posted in Coding, Unix, Website, Work

15 Comments

  1. Jens Filipsson says:
    December 8, 2008 at 3:32 pm

    Hello my friend!
    Now I am finally done with my own galleries, or actually they have been done locally for a while, but after having some problems with my webhost, I haven’t been able to upload the new stuff until now.

    The guide worked out perfectly for me, accept for one little thing. I had a problem with this line:

    preg_match("/.*(/wp-content/uploads/S+.S+)/", $img_url, $matches);

    which I had to replace with:
    preg_match("#.*(/wp-content/uploads/S+.S+)#", $img_url, $matches);

    Since it otherwise interpreted the next / wrong. Don’t ask me why, I found the solution by googling, but I guess maybe you know the answer anyway… :)

    I also have a request:
    The images on the “show full (medium) image-page” links to the next image when you click it. So far perfect! The problem is, when you come to the last image, it would be great if it could start from the beginning again, instead of just jumping to the previous image. This maybe isn’t such a big problem, but if you manually change the order the photos should be displayed, so that the last attached image (highest attachment id) maybe ends up somewhere in the middle, it doesn’t work anymore, since you won’t come to the next photo from there. I hope you understand what I mean!

    Anyway, if you want to check out the result, go to jensfilipsson.com/category/photo-album/

    Thanks for your help, a great guide this, a great guide indeed!

    // Jens.

  2. Jens Filipsson » Blog Archive » Wordpress Photo Galleries, Matt Mullenweg style says:
    December 9, 2008 at 12:31 pm

    [...] Unfortunately I couldn’t figure out how to make my galleries look that way, and after hours and hours of searching I almost gave up the idea of implementing a gallery on the page. Then, almost by accident, I found a nice guy called Steve with a site named the second phase. He had managed to build galleries just like Matts, and best of it all, he provided a guide for doing so. [...]

  3. Vii says:
    January 4, 2009 at 4:37 pm

    Thank you – this was an amazing and very useful guide!

  4. hd-J says:
    February 2, 2009 at 5:25 am

    I have been trying to do that for days! Thank you so much for your help! Now I can give it a try on my next project!

  5. Administrator says:
    February 25, 2009 at 12:12 am

    Hey guys, thanks for the comments. Sorry it took me so long to approve your comments, I’ve been lacking on the site administration! :)

  6. Drew Johnston says:
    March 16, 2009 at 4:59 am

    Hello, I am trying to implement this photo gallery style into my blog, however it’s not going to work without a fight… None of the Exif data works, and the image is showing the very large original… I was wondering if you could help me. I’ll send you my website link upon your reply, thanks.

  7. steve says:
    March 16, 2009 at 8:08 am

    Drew,

    I’m sorry to hear you’re having trouble – please feel free to send me your website address and I’ll take a look.

  8. Drew Johnston says:
    March 25, 2009 at 4:59 pm

    Hello, Just notice your site was back online and decided to tackle this gallery again, I have like hundreds of images from years past of events, bikes, crowds and things for a client. The actual website the gallery needs to work on is http://www.wharfratrally.ca, however my test site is http://www.crazy-drew.com/wordpress/, This is where I need to get the gallery working before I move it to the other site. I have created the files needed, but something just isn’t working right. I can create an account for you on both website which would have access to modify things. I hope your willing, trustworthy..lol and able to help me! Many thanks in advanced!

  9. Phil v. Sassen says:
    April 28, 2009 at 8:44 am

    Thank you for your post!

    Unfortunately the galleries as well as the pictures are not integrated into the search and the tagging function Matt uses is not implemented …

  10. steve says:
    April 29, 2009 at 9:15 am

    Hey Phil,

    Yeah, this tutorial was created almost a year ago when the gallery feature came out – back then Matt didn’t have the tagging stuff up on his site. It’d be a fun project to add that though! I’m not sure what you mean when you say the galleries aren’t implemented into the search – I can search for certain words and if the gallery post has that information – it comes up. Unless I actually had tagging information like Matt’s site, I’m not sure what information there is to search on.

  11. Phil v. Sassen says:
    May 10, 2009 at 8:46 am

    THX for your feedback! The search seems to work for the gallery description. The descriptions of single images are not searchable.

    Regards, Phil

  12. Phil v. Sassen says:
    May 10, 2009 at 8:48 am

    BTW: I put the link to your solutions Matt’s blog: http://ma.tt/2009/03/new-spring-design-2/

  13. How to make a gallery in Wordpress « Onigoetz.ch says:
    August 25, 2009 at 11:06 am

    [...] http://www.phase2.net/2008/07/23/wordpress-gallery-tutorial/ [...]

  14. chandan says:
    October 13, 2009 at 12:38 am

    excellent :)

  15. wp-popular.com » Blog Archive » Wordpress Gallery tutorial | the second phase says:
    March 8, 2010 at 12:15 am

    [...] original post here: Wordpress Gallery tutorial | the second phase Tags: gallery, [...]

Leave a Comment

Recent Posts

 

Chrome on Windows

March 9th, 2010

 

Thoughts on configuration management

March 5th, 2010

 

New theme

March 4th, 2010

 

Opsware Custom Attributes and You.

March 3rd, 2010

 

Back to work! Opsware and other things.

March 2nd, 2010

 

More Opsware joys and headaches

June 23rd, 2009

Thoughts

  • Chrome on Windows >

    Seems like Chrome on Windows Vista doesn't like to display the font-face used in this theme - going to have to figure out an alternative!

  • Formatting changes complete >

    So the formatting changes are complete - the pre code looks alot nicer now!

  • Busy busy busy >

    Been really busy at work moving forward with Opsware and trying to reach our milestones. Hopefully I'll have some updates in a bit about what's been going on and some more info on our progress with the tool.

  • Updated Goals and Wishlist >

    I updated my goals and set the new year to 40 years old ( 10 years to go! ) - also updated my wishlist since the big 3 - 0 is coming.

  • Gotta love WP >

    An upgrade in less than 5 minutes - it's no wonder WP is the choice of bloggers everywhere.

Categories