Since version 2.5, WordPress offers built-in galleries. I want to use this new functionality for:
- adding galleries to posts
- having a gallery overview page.
- having a latest gallery section on home.php
Therefore, I have to do some modifications to Arun’s The Morning After theme (that I am using here
image.php
For using the new gallery functionality of WordPress 2.5, the theme needs a a new template file. This template file is called image.php. Due to the fact that The Morning After does not include the image.php template (yet), I have to create it by myself. I have copied image.php of the standard WordPress theme into the directory of The Morning After and modified it so that it matches TMA.The code that has to be copied into the image.php is:
<?php get_header(); ?>
<div id="home_content" class="column span-14"> <!-- start home_content -->
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="column span-11 first">
<h2 class="post_cat"><?php $cat = get_the_category(); $cat = $cat[0]; echo $cat->cat_name; ?></h2>
<h2 class="post_name"><a href="<?php echo get_permalink($post->post_parent); ?>" rev="attachment"><?php echo get_the_title($post->post_parent); ?></a></h2>
<p></p>
<p><?php nb_previous_image_link( '« Vorheriges Bild' ) ?> - <?php nb_next_image_link( 'Nächstes Bild »' ) ?></p>
<p></p>
<div class="captionfull"><?php echo wp_get_attachment_image( $post->ID, 'medium' ); ?><?php if ( !empty($post->post_excerpt) ) the_excerpt(); // this is the "caption" ?></div>
<?php the_content('<p class="serif">Read the rest of this entry »</p>'); ?>
<?php edit_post_link('Edit this entry.','<p>','</p>'); ?>
<div id="comments"> <!-- start comments -->
<div id="commenthead">
<h2 class="post_comm">Diskussion</h2>
<?php if (('open' == $post-> comment_status) && ('open' == $post->ping_status)) {
// Both Comments and Pings are open ?>
<h3 class="mast"><?php comments_number('Keine Kommentare', 'Ein Kommentar', '% Kommentare'); ?> für “<?php the_title(); ?>”</h3>
<?php } else {
// Neither Comments, nor Pings are open ?>
<h3 class="mast5">Die Kommentarfunktion ist für diesen Artikel deaktiviert.</h3>
<?php } ?>
</div>
<?php comments_template(); ?>
</div> <!-- end comments -->
</div>
<?php endwhile; else: ?>
<p>Sorry, no attachments matched your criteria.</p>
<?php endif; ?>
<?php include ('sidebar.php'); ?>
</div> <!-- start home_content -->
<?php get_footer(); ?>
functions.php
Thanks to Michael Fields, I was able to substitute the large thumbnails by text links. The text links nb_previous_image_link( ‚« Vorheriges Bild‘ ) and nb_next_image_link( ‚Nächstes Bild »‘ ) require the following code in your functions.php:
function nb_previous_image_link( $link_text ) {
print nb_adjacent_image_link( $link_text, true );
}
function nb_next_image_link( $link_text ) {
print nb_adjacent_image_link( $link_text, false );
}
function nb_adjacent_image_link( $link_text, $prev = true ) {
global $post;
$post = get_post($post);
$attachments = array_values(get_children("post_parent=$post->post_parent&post_type=attachment&post_mime_type=image&orderby=\"menu_order ASC, ID ASC\""));
foreach ( $attachments as $k => $attachment )
if ( $attachment->ID == $post->ID )
break;
$k = $prev ? $k - 1 : $k + 1;
if ( isset($attachments[$k]) )
return '<a href="' . get_attachment_link( $attachments[$k]->ID ) . '">' . $link_text . '</a>';
else
return false;
};
home.php
For the „Latest Galleries“ section on the starting page of this weblog, I am using the following code:
<h3 class="mast">Latest Galleries</h3>
<?php $the_query = new WP_Query('category_name=bilder&showposts=4&orderby=post_date&order=desc');
while ($the_query->have_posts()) : $the_query->the_post();
$do_not_duplicate = $post->ID; ?>
<div class="home_recent_post">
<?php if ( get_post_meta($post->ID, 'thumb_home_img', true) ) { ?>
<div class="home_recent_thumb">
<a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/thumbs/<?php echo get_post_meta($post->ID, "thumb_home_img", $single = true); ?>" alt="<?php the_title(); ?>" /></a>
</div>
<?php } ?>
<div class="home_recent_title" id="post-<?php the_ID(); ?>">
<a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a>
</div>
<div class="home_recent_date">
<?php echo strip_tags(get_the_excerpt(), '<a><strong><p>'); ?>
</div>
</div>
<?php endwhile; ?>
gallery.php
And for the gallery archive, I wrote the following page template:
<?php
/*
Template Name: gallery
*/
?>
<?php get_header(); ?>
<div id="home_content" class="column span-14"> <!-- start home_content -->
<div id="home_left" class="column span-11 first">
<h2 class="archive_name"><?php the_title(); ?></h2>
<?php add_filter('gallery_style',create_function('$a','return "";')) ?>
<?php $the_query = new WP_Query('category_name=bilder');
while ($the_query->have_posts()) : $the_query->the_post();
$do_not_duplicate = $post->ID; ?>
<div class="galoverview">
<?php $attachments = get_children(array('post_parent' => get_the_ID(), 'post_type' => 'attachment', 'post_mime_type' => 'image', 'orderby' => 'menu_order'));
if ( ! is_array($attachments) ) continue;
$count = count($attachments);
$first_attachment = array_shift($attachments); ?>
<div class="set">
<a href="<?php the_permalink() ?>">
<?php echo wp_get_attachment_image($first_attachment->ID); ?>
</a>
</div>
<div class="galdescription">
<h3 class="archive_title"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
<?php the_excerpt() ?>
<p>Diese Gallerie enthält <?php echo $count ?> Bilder.</p>
</div>
</div>
<?php endwhile; ?>
</div>
<?php get_sidebar(); ?>
</div> <!-- start home_content -->
<?php get_footer(); ?>
style.css
Then, I have added the following variables to the style.css:
/* Gallery Styles */
.galoverview { height: 130px; padding: 5px; margin-bottom: 5px; border: 1px solid #cccccc; }
.set { padding: 0 10px 0 0; margin: 0 0 0.25em 0; float: left; }
.set img { float: left; padding: 0; margin: 0;}
.set a img { background: #d2d2d2; padding: 2px; margin: 0; border: 0; }
.galdescription { float: left; }
UPDATE! This version of the image.php is not compatible with WordPress 2.6. Please use the basic version without text link navigation or apply the fix that I have posted in the article about upgrading to WordPress 2.6.
Schreibe einen Kommentar