Title: Enlarge Thumbnail Size?
Last modified: August 19, 2016

---

# Enlarge Thumbnail Size?

 *  Resolved [tlw22](https://wordpress.org/support/users/tlw22/)
 * (@tlw22)
 * [15 years, 9 months ago](https://wordpress.org/support/topic/enlarge-thumbnail-size/)
 * Hi there,
 * Does anyone know how to enlarge the image thumbnail size for just the latest 
   post? I’m currently using the default 2010 theme (modified). I’ve named any latest
   posts as: `.firstpost` and the thumbnail div is: `post_thumbnail`. So my question
   is how can i connect the two divs so I can change the size of `post_thumbnail`
   but for just `.firstpost`.
 * Hopefully this makes sense
 * Thanks in advance
 * Link: [http://apps.thatrule.com](http://apps.thatrule.com)

Viewing 15 replies - 1 through 15 (of 22 total)

1 [2](https://wordpress.org/support/topic/enlarge-thumbnail-size/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/enlarge-thumbnail-size/page/2/?output_format=md)

 *  Thread Starter [tlw22](https://wordpress.org/support/users/tlw22/)
 * (@tlw22)
 * [15 years, 9 months ago](https://wordpress.org/support/topic/enlarge-thumbnail-size/#post-1623608)
 * Bump?
 *  [Digital Raindrops](https://wordpress.org/support/users/adeptris/)
 * (@adeptris)
 * [15 years, 9 months ago](https://wordpress.org/support/topic/enlarge-thumbnail-size/#post-1623614)
 * Add new image sizes and call the different sizes in the template loops.
 * [http://codex.wordpress.org/User:Esmi/add_image_size()](http://codex.wordpress.org/User:Esmi/add_image_size())
 * David
 *  Thread Starter [tlw22](https://wordpress.org/support/users/tlw22/)
 * (@tlw22)
 * [15 years, 9 months ago](https://wordpress.org/support/topic/enlarge-thumbnail-size/#post-1623617)
 * Great, thanks! Do you know how I could then apply this to the latest post div?
 *  [tom_taylor_85](https://wordpress.org/support/users/tom_taylor_85/)
 * (@tom_taylor_85)
 * [15 years, 9 months ago](https://wordpress.org/support/topic/enlarge-thumbnail-size/#post-1623618)
 * 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](https://wordpress.org/support/users/tlw22/)
 * (@tlw22)
 * [15 years, 9 months ago](https://wordpress.org/support/topic/enlarge-thumbnail-size/#post-1623620)
 * 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
 *  [tom_taylor_85](https://wordpress.org/support/users/tom_taylor_85/)
 * (@tom_taylor_85)
 * [15 years, 9 months ago](https://wordpress.org/support/topic/enlarge-thumbnail-size/#post-1623621)
 * 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.
 *  [Digital Raindrops](https://wordpress.org/support/users/adeptris/)
 * (@adeptris)
 * [15 years, 9 months ago](https://wordpress.org/support/topic/enlarge-thumbnail-size/#post-1623660)
 * 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](https://wordpress.org/support/users/tlw22/)
 * (@tlw22)
 * [15 years, 9 months ago](https://wordpress.org/support/topic/enlarge-thumbnail-size/#post-1623663)
 * 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](https://wordpress.org/support/users/tlw22/)
 * (@tlw22)
 * [15 years, 9 months ago](https://wordpress.org/support/topic/enlarge-thumbnail-size/#post-1623665)
 * 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
 *  [Digital Raindrops](https://wordpress.org/support/users/adeptris/)
 * (@adeptris)
 * [15 years, 9 months ago](https://wordpress.org/support/topic/enlarge-thumbnail-size/#post-1623670)
 * 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](https://wordpress.org/support/users/tlw22/)
 * (@tlw22)
 * [15 years, 9 months ago](https://wordpress.org/support/topic/enlarge-thumbnail-size/#post-1623671)
 * 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/](http://apps.thatrule.com/)
   Any ideas how to correct it? Cheers
 *  [Digital Raindrops](https://wordpress.org/support/users/adeptris/)
 * (@adeptris)
 * [15 years, 9 months ago](https://wordpress.org/support/topic/enlarge-thumbnail-size/#post-1623674)
 * 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](https://wordpress.org/support/users/tlw22/)
 * (@tlw22)
 * [15 years, 9 months ago](https://wordpress.org/support/topic/enlarge-thumbnail-size/#post-1623675)
 * 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](https://wordpress.org/support/users/tlw22/)
 * (@tlw22)
 * [15 years, 9 months ago](https://wordpress.org/support/topic/enlarge-thumbnail-size/#post-1623676)
 * 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?
 *  [Digital Raindrops](https://wordpress.org/support/users/adeptris/)
 * (@adeptris)
 * [15 years, 9 months ago](https://wordpress.org/support/topic/enlarge-thumbnail-size/#post-1623684)
 * 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

Viewing 15 replies - 1 through 15 (of 22 total)

1 [2](https://wordpress.org/support/topic/enlarge-thumbnail-size/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/enlarge-thumbnail-size/page/2/?output_format=md)

The topic ‘Enlarge Thumbnail Size?’ is closed to new replies.

## Tags

 * [post thumbnail size](https://wordpress.org/support/topic-tag/post-thumbnail-size/)

 * 22 replies
 * 3 participants
 * Last reply from: [tlw22](https://wordpress.org/support/users/tlw22/)
 * Last activity: [15 years, 9 months ago](https://wordpress.org/support/topic/enlarge-thumbnail-size/page/2/#post-1623718)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics