Add new image sizes and call the different sizes in the template loops.
http://codex.wordpress.org/User:Esmi/add_image_size()
David
Thread Starter
tlw22
(@tlw22)
Great, thanks! Do you know how I could then apply this to the latest post div?
Here, you will see something like this <a href="<?php the_permalink() ?>" rel="bookmark"><img src="<?php echo get_post_meta($post->ID, "thumbnail", true); ?>" alt="<?php the_title(); ?>"
simply add width="100" (change to whatever) after that part. Just find the thumbnail code, and add width=”100″ or whatever you want instead!
My code looks like this:
<?php if( get_post_meta($post->ID, "thumbnail", true) ): ?>
<a href="<?php the_permalink() ?>" rel="bookmark"><img src="<?php echo get_post_meta($post->ID, "thumbnail", true); ?>" alt="<?php the_title(); ?>" width="85" border="1" style="float:left;margin:0px 10px 0px 0px;" /></a>
<?php else: ?>
<a href="<?php the_permalink() ?>" rel="bookmark"><img style="float:left;margin:0px 10px 0px 0px;" src="<?php bloginfo('template_url'); ?>/images/thumbnail.png" alt="<?php the_title(); ?>" /></a>
<?php endif; ?>
Just simply add the width like how mine is!
Thread Starter
tlw22
(@tlw22)
Thanks I’ll give both methods a go! Just one more quick question though, how could I then apply these to the latest post? Thanks for all the help
In your index.php search for the code I just told you about.
Then add the width=”100″ function.
This is the easiest method, I would recommend it.
Toms method I think is is using a custom field and mine is using the built in post (“feature”) image.
If I am reading this right you want the first post in the loop to have a larger image that the rest.
The different divs are not really required just use a variable inside the ‘loop’ which would work for both tom’s and my methods.
As you are using twenty ten which uses WordPress post thumbnail support, this would be my solution using the WordPress built in feature where post image support and the default size has already been set.
I would add the ‘first post’ and ‘list-post’ (standard image ratio: 4:3) image sizes in functions.php
if ( function_exists( 'add_image_size' ) ) {
add_image_size( 'first-post', 200, 150 );
add_image_size( 'list-post', 100, 75 );
}
Then in the loop.php (template part) find the content divs (there are two that you may want to update) and inside add the thumbnail support
<?php if(!$fisrtimage) : ?>
<?php $fisrtimage=true; ?>
<?php if ( has_post_thumbnail()) the_post_thumbnail('first-post'); ?>
<?php else: ?>
<?php if ( has_post_thumbnail()) the_post_thumbnail('list-post'); ?>
<?php endif ?>
David
Thread Starter
tlw22
(@tlw22)
Hi David,
I used your code and now it works perfectly! (Just need to reposition the divs around the new sizes). Thanks for all your help and also to tom_taylor
Thread Starter
tlw22
(@tlw22)
Sorry, one last question.
Do you know how I could then add a div to the images so I could further style them? E.g adding a border, etc. Previously I used array("class" => "firstthumbnail") however I’m not overly sure where to put it. (I really need to start learning php!)
Thanks
Two examples with inline styling of the ‘first-post’ image uses a variable, this is untested code.
<?php $imgstyle = ' style="position:relative; float:left; border: solid 1px #ccc; margin: 0 5px 5px 0;"'; ?>
<?php if(!$fisrtimage) : ?>
<?php $fisrtimage=true; ?>
<?php if ( has_post_thumbnail()) : ?>
</div class="post-image" <?php echo $imgstyle; ?> >
<php the_post_thumbnail('first-post'); ?>
</div>
<?php endif; ?>
<?php else: ?>
<?php if ( has_post_thumbnail()) : ?>
</div class="post-image" style="margin: 0 5px 5px 0; position: relative;" >
<?php the_post_thumbnail('list-post'); ?>
<div>
<?php endif; ?>
<?php endif; ?>
David
Thread Starter
tlw22
(@tlw22)
Hi, I just tried it out and it distorted the whole page (It might be something to do with the margins though there might be a mistake in the php?): http://apps.thatrule.com/ Any ideas how to correct it? Cheers
Remove the style elements and add them back one at a time, it is likely the position: relative or float not the margins
David
Thread Starter
tlw22
(@tlw22)
I removed the style properties but it made no difference, however I’m gathering </div class="post-image" should be <div class="post-image" ? That seems to have put the page straight but now I have no thumbnail for my first post
Thread Starter
tlw22
(@tlw22)
Ah! Just found <php and changed it to <?php and now all seems to be good! Edit: I can now style the image however the image is not expanding to the new heights and borders?
Learning fast 🙂
If the thumbnail “feature” images existed before you changed the code they do not resize, as there is little content yet, try uploading a new feature image and have a look then, or re-name to old image to a new name and re-upload it.
David
