How wordpress handle upload images and how to use them in the code

Question

When I upload images via the standard media uploader I notice that it upload the original images with the same name but creates other cropped copies of the original one and rename them with originalname-150x150 or -340-120 and so on. I double checked the Media tab in the admin panel, but there are only dimensions for small, medium and large images and aren't the same which wordpress rename the files! And in the most of the case they are more than 3! So, how to configure this? I think that the problem was the custom theme that I'm using but it's not, I changed to default one.

Another question, If wordpress makes all this cropping with my uploaded images...how to use them in the php code? There are any function that I can call for getting all this images in different sizes? Thanks

Answer 1

WordPress crops the image proportional to the uploaded images dimensions, unless for the thumbnail size you specify to crop the thumbnail ( option provided only for thumbnails ). Hence the images being created are renamed to the size they are being cropped to.

By default WordPress creates 4 images or less depending on the size of image you upload. One would be the original image, large, medium, thumbnail. Incase the uploaded image is smaller than the size mentioned for thumbnail, then no extra image would be created. More images size can be created when an images is uploaded by using this function.

$crop = true; //if you want the image to stay proportional set this to false
add_image_size( 'extra', 135, 135, $crop);

Coming to how you can use the different sizes, they can be used using the following codes in a Loop.

the_post_thumbnail( 'thumbnail' );
the_post_thumbnail( 'medium' );
the_post_thumbnail( 'large' );
the_post_thumbnail( 'full' ); //this will output the whole image as was uploaded
the_post_thumbnail( 'extra' ); //if using the above add_image_size code.

Answer 2

Each time that you upload an image WordPress save the original image and creates another sizes like thumbnail, large or medium, the dimensions by each sub image size are calculated by a proportion relationship between the dimensions specificated in dashboard->settings->media settings and the original image dimensions, you can add new sizes if you want with:

<?php add_image_size(); ?>

I did not understand well this part:

I double checked the Media tab in the admin panel, but there there are only dimensions for small, medium and large images and aren't the same which wordpress rename the files!

With respect to list all post images you can use:

function list_post_image_sizes() {
        global $post;

        $post_images = '';

        $image_sizes = get_intermediate_image_sizes();

        $image_sizes[] = 'full';

        $available_images = array_keys(
        get_children(
            array(
                'post_parent' => $post->ID,
                'post_type' => 'attachment',
                'post_mime_type' => 'image',
                'orderby' => 'menu_order',
                'order' => 'ASC'
            )
        )
    );


        if(!empty($available_images))

        foreach($available_images as $image_id) :

    foreach ($image_sizes as $size) :

        $post_images .= wp_get_attachment_image($image_id, $size);  

    endforeach; 

        endforeach;

        echo $post_images;


}