• Blog

    Latest from our Blog

  • Tools

    Our Favourite WP Tools

  • Hosting

    Recommended Web Hosts

  • Coupons

    Get great money off deals

  • Themes

    WordPress Theme Directory

  • Plugins

    WordPress Plugins Directory

  • Promote

    Your WordPress Product

The WordPress media uploader has improved a lot over the years and now provides some powerful tools to manage your images, edit them within WordPress, create galleries and other functions. There are further improvments due to arrive with WordPress 4.0 which will include a better media browser with a sleeker grid-based view.

In this post we are going to cover how to control image sizes in WordPress, how to edit images after uploading them, how to shrink the filesize for faster-loading pages and how to create galleries and enable a stylish full-screen carousel for image galleries.

Controlling The Image Sizes in WordPress

When you upload an image to your website, WordPress automatically creates additional sizes for your image. You can set the sizes of these images in Settings -> Media as shown below:

Media Settings

In these options you can also choose to crop the thumbnail to the exact size you specify or they will be generated proportionally.

Post Thumbnail size settings can be overridden inside your theme’s functions.php file as well. Doing so, changing the thumbnail size in Settings -> Media will have no effect on how WordPress displays post thumbnails. This option is particularly useful for theme developers.

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 150, 150 );

In the above code, we have set the post thumbnail size to 150X150px. Set Post Thumbnail size is a useful little function. It comes with three arguments like this:

<?php set_post_thumbnail_size( $width, $height, $crop ); ?> 

$crop here tells WordPress whether it should crop an image or not, default is false and setting it true will allow WordPress to crop an image.

Choosing Different Thumbnail Sizes for Different Templates

Sometimes you might want to have smaller thumbnails on your main pages and slightly larger thumbnails on archive, category, or single post templates. You can set these image sizes using the function add_image_size()

add_image_size( 'tag-thumb', 200,200 );
add_image_size( 'homepage-thumb', 220, 180 );

To display these thumbnail sizes you will have to add a little code to your template files. In the example above we have created two thumbnail sizes, one for Tags template and one for homepage template. To display the tag thumbnail we add the following code in our tags.php template.

<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail( 'category-thumb' );
	 } ?>

Image Editing in WordPress

WordPress has a built in Image Editor which you can use to crop, scale and flip your images. There are two ways to access the image editor. When uploading an image from post edit page, after the upload on the right hand side you will see an “Edit Image” link.

Edit Image in WordPress

You can also visit the “Media” > “Library” link in your WordPress admin side menu, which will display a list of your latest images and hover over one and again, choose “Edit” there.

Media Library Edit

Click the “Edit Image” button and you have a few options such as cropping the image, rotating it, flipping it, scaling it and you can also edit the alt text, caption , name and description from here.

Image Editing Tools

Stopping WordPress from Creating Multiple copies of Images

It is quite useful that WordPress creates different sizes for your images. You can show a medium sized image inside post, a thumbnail on main and archive pages and full size images when someone clicks on them. However, some people may not want all these images, some people would like to have just the original image. They might have already edited the image in the size the like and want to display it only in that size, or they simply don’t want other sizes. Or they have created a custom image size for their templates and want to use those sizes and nothing else.

There are two ways to do that, first one is simpler, go to Settings -> Media and set all image sizes to 0.

Remove Image Sizes

The second method is to add the following code in your theme’s functions.php

function wplift_remove_image_sizes( $sizes) {
        unset( $sizes['thumbnail']);
        unset( $sizes['medium']);
        unset( $sizes['large']);

        return $sizes;
}
add_filter('intermediate_image_sizes_advanced', 'wplift_remove_image_sizes');

Automatically Compress Images

One more thing you might want to do is automatically optimise images for filesize when you upload them, this will make your posts load quicker which will improve your site’s usability and also will help with search engines as they prefer faster loading pages. There is a free plugin you can install called WP Smush.it which uses the Yahoo Smush.it API, I use it here on WPLift and it works great – the only downside is that when you upload an image it has to communicate with the Smush.it API so images take a little longer to appear after upload, I think the benefit is worth it though.

WP Smush.it

You can also perform a “Bulk Smush.it” if you like where the plugin will go through all your old images and optimize them, this is good if you have a few images on your site but with WPLift it stated it would take 10 hours so I didnt bother!

Bulk Smush.it

Creating Image Galleries

If you would like to add a gallery of images into your post, click the “Add Media” button and then “Create Gallery” where you can upload multiple images or simply go through and tick any images you would like included in the gallery.

http://

Once uploaded you can drag the order of the images to display in the order you would like and also delete any, add more. Once done, you hit the “Insert Gallery” button and it will be added to your post.

Sort Order WordPress Gallery

Your theme will then display the gallery of images in a grid format, and when an image is clicked will take you to a page with the single image.

Image gallery in post

Image Gallery Carousel

If you wish to improve the display of WordPress gallery images, there is a feature in the Jetpack plugin called Carousel. When activated, clicking on a gallery image will launch a full screen gallery with next and previous buttons so people can browse the gallery full-screen. Perfect for portfolio sites and photographers to show off their images. There is even an option to display EXIF data.

Jetpack Carousel

See the Carousel in action on this post at Konstantin Kovshenin’s site.


Author:

Oliver Dale is the founder of Kooc Media, a small internet company based in the UK. Kooc Media runs several high-profile websites including WPLift, ThemeFurnace and DesignersTalk.

Leave Yours +

17 Comments

  1. Daan Kortenbach

    I would suggest to also take a look at WPThumb, that would be an awesome addition to these tips.

  2. Евгений Разумный

    The latest version wordpress has gallery shortcode [gallery]. Now you can create gallery without plugin. Just install jquery-lightbox

  3. Lee Rickler

    If you’re building responsive it’s also a good idea to remove width/ height attributes on all images – something which is included in this snippet – http://pastebin.com/DdPkQ6V8

  4. Twinsen

    Maybe offtopic, but is there a function way to make default option with image upload gallery to “link to a file” instead link to “attachement page”?

    • Josh Hartman

      Yes, two ways. Option 1: Go to /wp-admin/options.php and set the image_default_link_type option to “file” or blank. Option 2: Add update_option(‘image_default_link_type’ , ”); to your theme’s functions.php.

      • Twinsen

        I know the first option – but this doesn’t work for me – after this “update” nothing happen and when i make new post with image gallery the gallery option is still default set to “link to attachment” :-( the second option is new for me – i’ll try it…

  5. Rahe

    You can also download Simple image sizes plugin and dynamically generate new image sizes, regenerate them and add them to the post insertion popup :)

  6. Purple Ninja

    we have the photo flower.jpeg (original size 1693 × 1413)
    and we have set 3 different sizes in our theme

    1. 620×400

    2. 320×180

    4. 100×100

    When we upload it, automatically it will create these 3 sizes for
    the photo. I want to choose manually one or more sizes for every photo
    individually and not automatically in all sizes.

  7. Tim Osborn

    Another fantastic plugin is Scissors Reloaded which allows cropping of individual thumbnail sizes – great when some thumbs are square, others landscape. And I second the recommendation of Simple Image Sizes, which also does selective thumbnail regeneration.

  8. Hi there, ist it possible to somehow have all images in a gallery row have the same height? Regardless of their format (portrait, landscape, square).
    Thanks in advance!

  9. Found the answer myself by just playing around:
    simply leave the height field empty (and use a plugin like “Regenerate Thumbnails”, if you want your old images adapt to your new settings).

  10. The image editor in WordPress is very handy, nice to be able to do basic edits without leaving the WordPress dashboard!

  11. If I set all image sizes to zero, will my responsive theme (Genesis) still give me proper featured and mobile images?

  12. good article the Smush.it plugin is very handy

  13. If you like Smush.it, you should try EWWW Image Optimizer. Depending on your webhost, you can run all the optimizations locally, which would speed up that bulk operation considerably. Even in cloud mode (similar to smush.it, but awesomer), it would be faster than smush.it, and the bulk feature is much more robust.

Leave a Reply

* Required Fields.
Your email will not be published.

Search

Our Sponsors