Title: How to change the size of my blog post images??
Last modified: August 20, 2016

---

# How to change the size of my blog post images??

 *  [henballs](https://wordpress.org/support/users/henballs/)
 * (@henballs)
 * [13 years ago](https://wordpress.org/support/topic/adding-html-attributes-to-elements-inside-wordpress-loop/)
 * How do I customize the size of the blog images on my main blog page? I want the
   first three images to be large and the rest to be small. How is this done?
 * Here’s the code
 *     ```
       <?php get_header(); ?>
   
       <div class="container">
           <div class="main-content">
             <?php if (have_posts()) : ?>
             <?php while (have_posts()) : the_post(); ?>
               <div <?php post_class() ?>>
                 <h2>
                   <a href="<?php the_permalink() ?>">
                     <?php the_title(); ?>
                   </a>
                 </h2>
                 <?php the_content(''); ?>
               </div>
             <?php endwhile; ?>
             <?php endif; ?>
           </div>
       </div>
       ```
   

Viewing 1 replies (of 1 total)

 *  [graphical_force](https://wordpress.org/support/users/graphical_force/)
 * (@graphical_force)
 * [13 years ago](https://wordpress.org/support/topic/adding-html-attributes-to-elements-inside-wordpress-loop/#post-3603557)
 * You need to add some image sizes in your functions.php file [http://codex.wordpress.org/Function_Reference/add_image_size](http://codex.wordpress.org/Function_Reference/add_image_size)
 * Once done, you can do something like this:
 *     ```
       <?php get_header(); ?>
   
       <?php $postCounter = 0; ?>
       <div class="container">
           <div class="main-content">
             <?php if (have_posts()) : ?>
             <?php while (have_posts()) : the_post(); ?>
               <?php if ($postCounter < 3) { ?>
               <div <?php post_class() ?>>
                 <h2>
                   <a href="<?php the_permalink() ?>">
                     <?php the_title(); ?>
                   </a>
                 </h2>
                 <?php the_post_thumbnail('LARGE_THUMB_NAME'); ?>
                 <?php the_content(''); ?>
                 <?php $postCounter = $postCounter + 1; ?>
               </div>
       } else {
               <div <?php post_class() ?>>
                 <h2>
                   <a href="<?php the_permalink() ?>">
                     <?php the_title(); ?>
                   </a>
                 </h2>
                 <?php the_post_thumbnail('SMALL_THUMB_NAME'); ?>
                 <?php the_content(''); ?>
       <?php $postCounter = 1; ?>
               </div>
       <?php } ?>
             <?php endwhile; ?>
             <?php endif; ?>
           </div>
       </div>
       ```
   

Viewing 1 replies (of 1 total)

The topic ‘How to change the size of my blog post images??’ is closed to new replies.

## Tags

 * [image](https://wordpress.org/support/topic-tag/image/)
 * [loop](https://wordpress.org/support/topic-tag/loop/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 1 reply
 * 2 participants
 * Last reply from: [graphical_force](https://wordpress.org/support/users/graphical_force/)
 * Last activity: [13 years ago](https://wordpress.org/support/topic/adding-html-attributes-to-elements-inside-wordpress-loop/#post-3603557)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics