• 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

WordPress has a media uploader, which many people believe has a lot of room for improvement. There are many things that you can’t do when uploading and displaying images on a WordPress powered website. Uploading and displaying images can be made much better by using some built in functions and additional plugins. In this post we will look at some functions, code snippets and plugins to improve the display and management of image files in WordPress.

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:

In these options you can also choose to proportionally crop your images with same dimensions instead of allowing WordPress to crop images for you.

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.

if ( function_exists( 'add_theme_support' ) ) { 
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()

if ( function_exists( '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' );
	 } ?>

Cropping Images 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 go to gallery and click on the image you want to edit and then click on Edit Image button.
Alternately you can go to Media, upload your image, if you have already uploaded your image click on the Edit link. This image editor is a very basic but handy tool to quickly resize your images.

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.

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');

Creating Image Galleries With Nifty Zoom in

If you upload multiple images to a post, there is a gallery feature in your Media Uploader screen which you can use to create instant image galleries inside your post or pages. When some clicks on the image they are taken to attachment page where the image is displayed. Now the problem is that this is slower and takes user away from the actual post. What we would like to do is that user can view the images right there without leaving the page.

NextGen Image Gallery Plugin

NextGen Image gallery plugin is one of the most popular WordPress image gallery plugins around. It allows you to do various things with your images. You can create galleries, tag images, display slideshows, nifty javascript based image zoom in, watermark your images and even add effects to your images. In the past we have added a nice tutorial about how to use NextGen plugin to create image galleries on your site.

There are many more nice and premium plugins which allow you to display your images, some of them are:

Conclusion

WordPress is popular because it is easy to extend. Every aspect of your WordPress can be extended to have additional functionality with the help of these awesome plugins. In case of displaying media particularly images, there are some awesome free and premium plugins that can provide you with any extra functionality you can think of. Play around a little, and if a picture is worth a thousand words make sure those thousand words are used effectively.


Post Tags

Noumaan is a blogger and social media expert. He loves Quora, Facebook, Wordpress, OpenSource Software and The Sims.

Leave Yours +

30 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. Konstantin

    Sweet overview. One note though: don’t use function_exists with these function calls, they’ve been around since like 2.9 or something, which is four major versions ago, so you shouldn’t be supporting it anyway.

    ~ Konstantin

    • @8585b20b69e8ff4b0ba737accfdbb31b:disqus thanks for the tip :) so you recommend we use these calls like this

      add_image_size( ‘tag-thumb’, 200,200 );

      instead of :

      if ( function_exists( ‘add_image_size’ ) ) {
      add_image_size( ‘tag-thumb’, 200,200 );
      }

  4. 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

  5. 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…

  6. Brandon Fennell

    You should take part in a contest for one of the best blogs on the web. I will recommend this blog!

  7. Brandon Fennell

    An interesting discussion is worth comment. I think that you should write more on this topic, it might not be a taboo subject but generally people are not enough to speak on such topics. To the next. Cheers

  8. Brandon Fennell

    Hello! I just would like to give a huge thumbs up for the great info you have here on this post. I will be coming back to your blog for more soon.

  9. Brandon Fennell

    you have a great blog here! would you like to make some invite posts on my blog?

  10. Brandon Fennell

    When I originally commented I clicked the -Notify me when new comments are added- checkbox and now each time a comment is added I get four emails with the same comment. Is there any way you can remove me from that service? Thanks!

  11. 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 :)

  12. 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.

  13. 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.

  14. I am developing my website http://www.geekgsm.com and using one theme , this theme support zoom popup while clicking over the image, but I dont know why that effect is not working for me, If anyone one has any idea about it, just let me know

  15. Jetpack @WP 3.5 now has Tiled Galleries and a Carousel viewer.

    NextGen is great – images are separate from WP “Media” uploads, and NextGen tags are separate too (you can create tag pages for them.) Load a few images to Media for featured images because NextGen images are not available in the Media picker.

    Thanks for answering where the image sizes are hardcoded inside your theme’s functions.php. The tip about “set all image sizes to 0″ is brilliant.

    Is there any “problem” with having, in my case, SIX different sizes of the same image?

  16. Geez good post! You’ve undoubtedly helped with a great deal of my worries thanks a lot! Sniperspy Review

  17. 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!

  18. 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).

  19. Greetings! Very helpful advice within this article!
    It’s the little changes which will make the largest changes.
    Thanks a lot for sharing!

  20. ‘Let’s visit the car dealers but instead of intending to buy a
    car, let’s just have fun. The carburetor has pipes with valves that push
    air and fuel mixture into the cylinder. Nonetheless the figures with
    the most validity slow down traffic to advance street safety for kids.

Leave a Reply

* Required Fields.
Your email will not be published.

Search

Our Sponsors