Webdesign, WordPress

Define your own image sizes

For various scenarios there is the possibility to define own image sizes. For example, you can differentiate preview images for the mobile view and the desktop view. All you have to do is copy a snippet like this into your functions.php of your WordPress theme and adjust it:

/** own image sizes */

add_image_size('jado-mobilethumb', 250, 250);
add_image_size('jado-desktopthumb', 600, 600);

This way the image will be cropped and scaled to these sizes.

If you want to trim the images to these exact sizes you have to enter the following:

/** own image sizes */

add_image_size('jado-mobilethumb', 250, 250, true);
add_image_size('jado-desktopthumb', 600, 600, true);

… and if you still want to determine from WHERE the image is cropped you can do so:

/** own image sizes */

// X = left, center, right // Y = top, center, bottom

add_image_size('jado-mobilethumb', 250, 250, array( 'center', 'top' )); 
add_image_size('jado-desktopthumb', 600, 600, array( 'center', 'top' ));

it is then embedded in the respective template with the following code:

if ( has_post_thumbnail() ) { 
    the_post_thumbnail( 'jado-mobilethumb' ); 
     the_post_thumbnail( 'jado-desktopthumb' );