Beautiful post snippets and auto resized images in WordPress

Beautiful post displays

I’m going to show you how to create a really nice post display page that automatically brings in your posts AND takes the first image, resizes it and pops it at the side of a ‘teaser’ of your article. This is a very neat approach and builds on the work you have already done in creating the post, then automates a slick output of your work. More importantly, you don’t have to create a thumbnail image as resizing is done ‘on the fly’.

First off, we need to add a small function to functions.php. Open it up and at the very end add this:

function pcrmbimagegrab() { // //Grabs the first image from the post global $post, $posts; $first_img = ''; ob_start(); ob_end_clean(); $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches); $first_img = $matches [1] [0]; //Get default image instead if(empty($first_img)){ $first_img = "/images/default.png"; }return $first_img;}

Make sure this is within a php call, ie

Now we need to create a category, eg “Articles”

Now go into the WP admin area and open the categories from the WP sidebar menu (under ‘Posts’). Hover your mouse over the new category and you’ll see the category number at the end of the link shown in Firefox/IE etc (at the bottom left of the browser window). This is what we need for our special new php page that we’ll create now.

Create a new page and call it category-15.php (where 15 is the number of your category above – modify accordingly!). Into this copy and paste the following:

<?php get_header(); ?> <div class="post-box"> <h1> <?php single_cat_title(); ?> </h1> <hr>	<?php get_template_part('loop', 'dvccategory'); ?>

Now open up your archive.php file and see where the differences lie. Your header may be different, your div ids will be too, but make this new category file look like archive.php in terms of header, footer, content divs etc. I have added a class of pcrmbcategory. Ensure this is a div class and not a div id as it is repeated for each post.

Go to your template’s stylesheet, normally style.css, and insert our new div class:

/* Fix category view by */ .pcrmbcategory { float: left; width: 590px; margin: 0px; padding: 10px; display: inline; } .pcrmbcategory img { border: none; margin: 0px; height: 130px; }

Note, I have fixed just the height of the image to keep the aspect ratios proportionate. You can set a width but this won’t maintain the aspect ratio and some images may appear stretched. Fixing height and limiting the content maintains a nice even spacing on article posts. I have added a dotted line to separate posts but be creative, sky’s the limit here!

The 590px width is ideal for many single sidebar themes but experiment with this and validate your code. Test it in several browsers too. Don’t forget to create a default image to display when you don’t have one in your post. Drop this into the folder. You can make this any size but ideally make it to the same height that is referenced in the code for quicker page loads. Good luck and give me some feedback if it works for you!

3 thoughts on “Beautiful post snippets and auto resized images in WordPress

  1. Just what I was looking for. Elegant and simple solution with minimal code. Has saved me lots of manual typing (in the box below the post) of the pathname to get to a thumbnail.

    Donation on its way!!

  2. OMG you are a life saver!

    I have been looking for a simple way of automating image thumbnails (i.e. without manually adding a resized image) and your tutorial has been all the instruction I needed. This is an excellent feature and no wordpress user should be without it!

    Cheers pcrepairman!

  3. Wow, that’s slick. Didn’t know you could do this. It has saved me from creating a new thumbnail image on each post and with 5 to 10 posts a day across a few sites that’s a lot of time! Category view looks much neater too rather than listing all posts in that category.
    Just found your donation link in your about page, so I dropped you a beer from me. It’s not much but I appreciate you taking the time to do this, it saved me a good weekend of work.


Leave a Reply

Your email address will not be published. Required fields are marked *