When displaying an image that is bigger than the content area, a lot of bloggers use a smaller one linked to the original file, like in this example:
Image linked to original file – Image credit: warnerbros.com
The full size image will display on a blank page, wasting your bandwitch and giving nothing in return.
The (not that) new WordPress gallery function may help you get some profit from your images, just like this:
Image credit: warnerbros.com
or this:
The problem is there’s a lot of themes out there that do not support this function, that needs a special template and some CSS to work.
Ready to get your hands on the dirt?
First, you need to make a copy of your index.php template. Paste it on a text editor, like notepad or something like that.
1. Look for this code, at the beginning of the file:
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
Replace it with this:
<h2><a href="<?php echo get_permalink($post->post_parent); ?>" rev="attachment"><?php echo get_the_title($post->post_parent); ?></a> » <?php the_title(); ?></h2>
If your code makes use of other tag than h2, keep it, with the proper class, if it’s the case.
2. Right below it place these lines:
<div class="navigation"> <div class="alignleft"><?php previous_image_link() ?></div> <div class="alignright"><?php next_image_link() ?></div> </div> <br clear="all"/>
Navigation class establishes the margins for your image links. Alignleft and alignright classes make nothing but floating your image links to left and right, respectively.
I use br clear=”all” after navigation because some browsers “push” your content up after a float, no matter it’s inside another div.
Before you ask, some browsers don’t support clear=”both”.
3. Place the code below right after <?php the_content() ?>:
<p class="attachment"><a href="<?php echo wp_get_attachment_url($post->ID); ?>"><?php echo wp_get_attachment_image( $post->ID, 'medium' ); ?></a></p> <div class="caption"><?php if ( !empty($post->post_excerpt) ) the_excerpt(); // this is the "caption" ?></div>
You need some CSS to get everything working. I have some ready for you, play with it to match the feel and look of your site.
.navigation{display:block;text-align:center;margin-top:30px;margin-bottom:30px;}
.alignright {float:right;}
.alignleft {float:left;}
.attachment {text-align:left;margin:5px 0;}
.smallattachment {text-align:left;width:128px;margin:5px 5px 5px 0;}
.caption {text-align:left;font-weight:normal;}
Save the file as image.php and upload it to your template folder.
After that, go to your WordPress Dashboard > Settings > Miscellaneous, scroll to the bottom of the page and change your images setting. Don’ use any width that is bigger than your content area. Thumbnails usually display OK in 120px width. Uncheck “crop thumbnail…” , press save changes and you are done.
What if I want to display a single image?
To display a single image, you will need a file called attachment.php.
The process is pretty much the same above, with a few differences.
1. Look for this code:
<div class="post" id="post-<?php the_ID(); ?>">
Paste this code right before it.
<div class="navigation"> <div class="alignleft"> </div> <div class="alignright"> </div> </div> <br clear="all" /> <?php $attachment_link = get_the_attachment_link($post->ID, true, array(468, 800)); ?> <?php $_post = &get_post($post->ID); $classname = ($_post->iconsize[0] <= 128 ? 'small' : '') . 'attachment'; ?>
You can change width and height values to suit your needs (in red).
2. Replace your title tag with this:
<h2><a href="<?php echo get_permalink($post->post_parent); ?>" rev="attachment"><?php echo get_the_title($post->post_parent); ?></a> » <a href="<?php echo get_permalink() ?>" rel="bookmark" title="Permanent Link: <?php the_title(); ?>"><?php the_title(); ?></a></h2>
Once again, you can change h tag and class to match your theme’s ones.
Look for <?php the_content() ?> and paste the code below before it.
<p class="<?php echo $classname; ?>"><?php echo $attachment_link; ?><br /><?php echo basename($post->guid); ?></p>
Save the file as attachment.php, upload it to your theme folder and that’s it.
Publish a few images to check the results.
