Beautiful post snippets and auto resized images in WordPress

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() { //https:www.pcrepairmansblog.com //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 https://www.pcrepairmansblog.com */ .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 yourdomain.com/images 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!