Theme The Morning After

The Morning After – Galleries, anyone?

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( '&laquo; Vorheriges Bild' ) ?> - <?php nb_next_image_link( 'Nächstes Bild &raquo;' ) ?></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 &raquo;</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 &#8220;<?php the_title(); ?>&#8221;</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&#228lt <?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.

  1. Thanks for telling us. I’ll give it a try locally on my computer.

  2. Hello,
    It’s me again. I’m very impressed with your gravatar. Will you write tutorial of how to integrate it to your site?

  3. Ubiquit

    Hi Nick, I need some urgent help from you. I tried to do the above process and my WP is gone :( As soon as I copied the image.php and tried to move to the next page, I’m seeing only blank pages. You can see at http://ubiquitense.com/wp-admin. and also, my site doesn’t come up if I type http://ubiquitense.com
    Thanks in advance!

  4. Ubiquit

    well, I solved it myself…jus replaced the functions.php with the original one. phew!!! that was close :)

  5. Ohh!!! Strange error… As you see on my site, I have no problems with the code!

  6. Ubiquit

    Could you please forward me the functions.php to gigatech2006@gmail.com?
    Danke!

  7. You’ve got mail! Let me know if you still have problems..
    I’ll tell you a solution without the functions.php then.
    How do you say „you’re welcome“ in Madras?

  8. Ubiquit

    Hey Nick, I found this http://wordpress.org/extend/plugins/nextgen-gallery/, and ‚ve implemented it. It’s quite cool, and may be you wanna try it.
    You can see it on my site http://ubiquitense.com/ and click on Gallery

  9. Not bad. But I prefer a no further plug-in solution.

  10. Ubiquit

    Does usage of plugins slow down the site? well, I found it attractive because ‚m not good at coding :)

  11. Yes, some plug-ins do slow down the site.
    But this is not the main reason why I say the less plug-ins the merrier.
    My main reason is that I do not want to depend on plug-in authors when I upgrade my WordPress installation.
    For example, NextGen Gallery was not compatible with WP 2.5 when the new version came out.

  12. Ubiquit

    Oh yes, you’re right. Anyways, ‚m quite slow in upgrading to the latest WP versions..I just watch for more than a month and later upgrade when all plugins are ready for the new version :)

  13. Ein weiteres Mal hat mir Deine The-Morning-After-Reihe sehr geholfen. Vielen Dank!

  14. Momment: So wie es aussieht hast du einen Tippfehler in der home.php line:
    img src=“/images/thumbs/
    der slash zwischen dem „?“ und dem „>“ nach dem stylesheet muss weg.

  15. Ein letzte Mal noch (es tut mir leid): Ich schaffs nicht, neuen Kram der Bilder-Kategorie aus den latest_post zu halten. Irgendeine Idee?

  16. @fab:
    I’ve exchanged the code with images… Arrghh… always have problems with displaying code.
    About exlcuding the gallery category from LATEST POSTS, RECENT POSTS and the CATEGORY LIST, you have to:

    • Open home.php and sidebar.php in your visual theme editor.
    • Then you add the following line (cateogry called Gallery) according to the lines for ASIDES and FEATURED:
      php $catid3 = $wpdb->get_var(„SELECT term_ID FROM $wpdb->terms WHERE name=’GALLERY'“);
    • Then, add ,-‚ .$catid3. ‚ to queries of the LATEST and RECENT POST sections and ,‘ .$catid3. ‚ to the exclude part of the wp_list_category function (sidebar.php).

    DONE.

  17. Thank you very much! Problem fixed. I forgot the recent post section…

  18. […] Since version 2.5, WordPress supports built-in galleries. So, I have added a gallery archive, a gallery section on home.php and an image template to my customized version of THE MORNING AFTER. The tutorial can be read here. […]

  19. Nick,
    Thanks for this. I have one question? How do I incorporate the gallery overview php file into a page? Or what do I need to do to set up the gallery overview page? I can’t seem to figure that out.
    Do I create a page that incoporates the .php file?
    Thanks

  20. Nick,
    Thanks for this. One question though? How do I set up the gallery overview page? I see how to create the .php file, but how do I incorporate that into a page? Everything else I can figure out, but that seems to lose me.

  21. Hi Lee!
    Ohh.. Sorry… Forgot to write about this…
    Well, you upload the page template „gallery.php“ into your TMA folder. Then, you „write a page“ (all you need to do is inserting the title and applying the template to the page. click publish) and you are done.

  22. Danke Nick! I learn something new everyday. Sorry about the double comment…didn’t realize the first one went through.

  23. Hello Nick,
    One more question, and I swear I’ll stop bugging you. Do you know how to change the variables to the thumbnails? I’d like them to be proportioned to the actual photo, not perfectly square. Where is the CSS for the actual pic thumbnails?
    Thanks
    Lee

  24. Hi!
    Go to:
    WP Dashboard > Settings > Miscellaneous
    and deactivate „Crop thumbnail to exact dimensions (normally thumbnails are proportional)“
    This change will only effect new uploads.
    cheers

  25. […] the text-based navigation for your the image.php template that I have proposed in this tutorial is not compatible with WordPress […]

  26. Hello Nick
    I love your customizations to the TMA theme and have been working with it to develop my site. I thought I mention that the gallery.php code on this page has an error which forces the galdescription box below the sample image. I found it was caused by an improperly named style – .set when it should be .galset – as shown below
    <!–
    <a href=““>
    ID); ?>
    –>
    Thanks!

  27. Thanks Nick, for sharing your codes and templates! Peace.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.