@jzetterbergbass Hehe, något sånt ja... :)
Follow me on twitter →

Jens Filipsson - saxophone player

Oh yes, that's how I look! You already know the Jens Filipsson and saxophone player part, but let me also add that I live in Stockholm, Sweden, where I play jazz & other beautiful music in many different constellations. My own band is a modern jazz quintet named Usual Suspects, which you can make friends with on the music page.

Latest news about me and my music can always be found in my blog. If you like reading it, please subscribe to my rss feed. You're more than welcome to leave a comment, makes me happy and I always answer them. You can also follow me on twitter for some extra spicy, daily action.

Make sure you check the concerts page to find out where to mark your calendar, you wouldn't wanna miss some of the goodies in there.

I also build web pages. Check the web design page for info about that. Feel free to contact me for whatever reason you might have to get in touch. I like to talk so don't be shy. Hope you enjoy your visit, come back soon to keep me company.

Wordpress Photo Galleries

- Matt Mullenweg style

Tuesday, December 9, 2008

Wordpress, the platform I have built this page in, comes since a few versions back with a built in gallery feature. The problem is that it without any customization doesn’t provide a good way of gathering all your galleries in a nice way.

I began looking for better solutions, and found that the page of Matt Mullenweg, author of Wordpress, revealed the perfect solution!

Unfortunately I couldn’t figure out how to make my galleries look the way Matt’s does, 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.

I know from my own search for the answer that many people out there are interested in a solution, and I can really recommend Steve’s guide. Easy to follow and implement in your own design!

Take a look at my photo albums page for the result of my efforts!

Read more?
If you enjoyed reading this, the post "Blog with your mobile phone in Wordpress" might be something for you.
Comment

Thought about something while reading this post? I'd love to hear it!
Subscribe

If you liked this post, make sure you subscribe to my rss feed to be sure not to miss future goodies!

24 comments so far

February 2nd, 2009 at 2:12 PM

I have looking for that information for ages! Thank you very much!!!

February 2nd, 2009 at 2:29 PM

You’re very welcome, glad I could help you, although it’s Steve who really deserves the credit!

April 28th, 2009 at 5:42 PM

Great post!

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

April 28th, 2009 at 9:40 PM

Thanks Phil!
I’m not sure how the search function at matt’s work, but for me this works! Maybe it’s possible to integrate the search function? Or maybe it’s just that you have to make pages search able or something for that to work? Pages search are off on my site. The tagging part I don’t find very appealing, for me that doesn’t really fill a function!

May 10th, 2009 at 5:45 PM

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

Regards, Phil

May 13th, 2009 at 12:57 PM

You’re welcome Phil! I’m not much of a php-coder myself, so unfortunately I can’t help you with your problem, for me it isn’t that important to be able to search for the descriptions, but talk to Steve, maybe he can help you!
Take care!
// Jens.

May 14th, 2009 at 2:30 PM

THX – I will get in contact with him and keep you update!

May 15th, 2009 at 9:27 AM

That’s great Phil, I’m looking forward to it!

Guru

August 13th, 2009 at 10:22 PM

What about the main gallery page. I mean http://jensfilipsson.com/category/photo-album/

Do you use a custom category template. I think that part was missing in the original post.

Could you help me with this?

Thanks.

August 14th, 2009 at 7:54 PM

Hey Guru!
Yes, I did a category template for this! Mine is called category-191.php where 191 is the id of my photo albums category, so this you have to change to whatever your category id is of course. That file you save in your themes folder. It looks like this:

<?php get_header(); ?>
<div id="content" class="narrowcolumn">
<?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(); ?>">
<h2><a href="<?php the_permalink() ? rel="nofollow">" rel="bookmark" title="Permanent link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
<div class="datum"><?php the_time('l, F j, Y') ?> <!– by <?php the_author() ?> –> | <span class="commentsnumber"><?php comments_popup_link('No comments »', '1 comment »', '% comments »'); ?></span></div>
<div class="gallery-post">
<a href="<?php the_permalink() ? rel="nofollow">" 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 contains <strong><?php echo $num_pics ?> photos</strong>.
</div>
</div>
<hr />
<div class="underinlagg"><p><strong>Posted in:</strong> <?php the_category(', ') ?><?php edit_post_link('| Edit','',''); ?>
<?php the_tags(' | <strong>Other posts about:</strong> ',', ',''); ?></p></div>
<?php endwhile; ?>
<?php else : ?>
Sorry, there are no galleries to view.
<?php endif; ?>

</div>
<?php get_sidebar(); ?>

</div>
<?php get_footer(); ?>

August 14th, 2009 at 7:58 PM

By the way, of course you have to make it fit into your theme, but all the functions that I use are in there, so you just have to tweak it to fit your theme.

Of course you also have to add this to your index.php file to make your blog home page display your photo album posts the same way as the photo album category template! This is done with:

<?php if (in_category(191) && !is_single() ) :?>

Hope you get it to work!

Guru

August 14th, 2009 at 11:02 PM

Hi, thanks wfor the replay. Yes I got it to work, well almost :)

I change <?php the_content('',FALSE,''); ?> to <?php the_excerpt(); ?> since I may add longer text. Besides, with that code it shows the all images not only one thumbnail.

Other than that I couldnt figure it out how to add this code <?php if (in_category(191) && !is_single() ) :?>

Can you explain to me how to and where to add this code in index.php.

Thanks again.

August 14th, 2009 at 11:11 PM

I think you shouldn't change <?php the_content('',FALSE,''); ?> to <?php the_excerpt(); ?>, instead you choose how much of the text you want to show when you publish your post:

First you write your description, as long as you want. This is my photos from bla bla bla…
Then you put the more tag:
<!–more–>
And then the gallery tag:
[gallery]

Now it should work!

For the index.php file, here's what I have done:

<?php get_header(); ?>
<div id="content" class="narrowcolumn">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>

<?php if (in_category(191) && !is_single() ) :?>
<div class="post" id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
<div class="datum"><?php the_time('l, F j, Y') ?> <!– by <?php the_author() ?> –> | <span class="commentsnumber"><?php comments_popup_link('No comments »', '1 comment »', '% comments »'); ?></span></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,''); ?>
<p>This album contains <strong><?php echo $num_pics ?> photos</strong>.</p>
</div>
</div>
<hr />
<div class="underinlagg"><p><strong>Posted in:</strong> <?php the_category(', ') ?><?php edit_post_link('| Edit','',''); ?>
<?php the_tags(' | <strong>Other posts about:</strong> ',', ',''); ?></p></div>

<?php else: ?>

<div class="post" id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
<div class="datum"><?php the_time('l, F j, Y') ?> <!– by <?php the_author() ?> –> | <span class="commentsnumber"><?php comments_popup_link('No comments »', '1 comment »', '% comments »'); ?></span></div>

<div class="entry">
<?php the_content('Continue reading this post »'); ?>
</div>

<div class="underinlagg"><p><strong>Posted in:</strong> <?php the_category(', ') ?><?php edit_post_link('| Edit','',''); ?>
<?php the_tags(' | <strong>Other posts about:</strong> ',', ',''); ?></p></div>
</div>
<?php endif; ?>

<?php endwhile; ?>
<p align="center"><?php posts_nav_link(' – ','« newer posts','older posts »') ?></p>
<?php else : ?>
<h2 class="center">Not Found</h2>
<?php include (TEMPLATEPATH . '/searchform.php'); ?>
<?php endif; ?>
</div>
<?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>

There you have all of it, hope you can get it to work!

// Jens.

August 14th, 2009 at 11:14 PM

And by the way, from <?php else: ?> is how my original index.php file looked. So the first part tells what to output if the post is published in category 191, and the rest, after <?php else: ?> is the output all other posts.

Guru

August 14th, 2009 at 11:57 PM

Thank you very much for your help.

I did it.

August 15th, 2009 at 12:00 AM

I'm glad it worked! Would be fun to see how it looks, send me your address if you feel like it!
// Jens.

Guru

August 15th, 2009 at 12:06 AM

I am working on a blog (and design) which will be launched around next month. Sure I'll write the address when it is ready.

Thanks again!

August 15th, 2009 at 12:07 AM

Cool man, looking forward to it!

November 4th, 2009 at 5:38 PM

i think the tutorial is no longer available. can you create a post showing how you did it? that will be very helpful. thanks.

November 4th, 2009 at 5:47 PM

Hey iRonnie!
The guide seems to work fine when I look at it, maybe it was a temporary problem? Did you check this link? http://www.phase2.net/2008/07/23/wordpress-gallery-tutorial/

November 5th, 2009 at 5:11 AM

Hi Jens.

That is really weird. I checked the site last night when I received your reply, checked it again just now and still no page. It says server not found. :(

November 5th, 2009 at 11:06 PM

He must have a problem with his server or something, it still works for me! I think you should be able to get it to work with the code pieces I have been posting in previous comments though. Don't hesitate to ask if you have any questions!
//Jens.

November 6th, 2009 at 4:12 AM

Hi Jens!

i think i can follow the coding from the comment. i was just wondering if you also added a css element? i see that the code has a number of div ids.

November 7th, 2009 at 1:50 PM

Yes, everything is styled with css, but the divs are just made for my layout, those are not important for the gallery to work. You can easily tweak it to fit your layout and to your liking. Check my css file to see how I styled it!