Category: Wordpress

Figuring out proper values for WordPress image sizes takes a bit of effort, but it’s not rocket science.

Whenever you upload an image to a WordPress site, the software generates several scaled copies of the image. Some are built-in to WordPress, some are defined by the theme used, or by plug-ins, while others can be configured on a per-site basis.

Built-in images sizes

No matter what you configure in the settings, WordPress will generate smaller images that are 768px (the medium-large size), 1536px and 2048px on the longest side.

WordPress doesn’t scaled up images.

If the uploaded image is more than 2560px on the longest side, WordPress will generate a version scaled to 2560px and use that as if that’s the uploaded full size image. WordPress adds the text “-scaled” to the file name.

Other images sizes

Site theme and active plug-ins can add other image sizes.

The easiest way to find out which is to search for add_image_size in the source files of the theme or plug-in.

Most themes will define at least one addition image size for a full-screen image, like for a featured image at the top of a page, to match the theme design.

For example the Twenty Twenty theme adds the size 1980x9999px, which means 1980px wide, and height adjusted to fit.

Default configured sizes

Three images sizes are defined in the Media section of the site settings. They are for thumbnails, medium and large sizes.

WordPress defaults to a thumbnail size of 300x300px cropped square, medium size 600px wide scaled proportionally, and large size at 1024px scaled.

If you want fewer resized files on you site, you can set thumbnail to either 256x256px or 384x384px (⅓ or ½ of the standard medium-large size), the medium 768px and large to 1536px, replicating the sizes WordPress would make anyway.

The result will be few files, less disk usage on your hosting, but more bandwidth spent sending larger files.

Calculating ‘good’ sizes

The default sizes are not wrong, but it makes sense to change the sizes to match the theme’s idea of a large image and your preferred aspect ratio of images.

Images scale better if you use integer factors.

I tend to use an aspect ratio of 4:3 on general sites, but 3:2 on photography oriented sites, and the results can be slightly different.

I also upload photos to my sites at the ‘right’ size for the theme. If a site uses Twenty Twenty I will prepare the photos to be 1980px wide, as that is what the theme requires.

If the desired aspect ratio is 4:3 the images will be 1980x1485px (landscape) or 1980x2640px (portrait).

Factor these numbers into prime factors:

1980 = 2 x 2 x 3 x 3 x 5 x 11
1485 = 3 x 3 x 3 x 5 x 11
2640 = 2 x 2 x 2 x 2 x 3 x 5 x 11

The three numbers share the factors 3 x 5 x 11 = 165.

Based on this I will set thumbnail to 330x330px (downscaling the width by a factor 6 and the height by 4.5 or 8), the medium size to 660x9999px (downscaling by a factor 3) and the large to 1280×9999 (downscale 1.5).

If some sizes comes out very close to the WordPress built-in sizes, choose the same as WordPress.

Aspect ratio 3:2

If the desired aspect ratio is 3:2 the images will be 1980x1320px (landscape) or 1980x2970px (portrait).

Factor these numbers into prime factors:

1980 = 2 x 2 x 3 x 3 x 5 x 11
1320 = 2 x 2 x 2 x 3 x 5 x 11
2970 = 2 x 3 x 3 x 3 x 5 x 11

The three numbers share the factors 2 x 3 x 5 x 11 = 330.

I have a bunch of sites running on a Debian multi-site setup. Managing it is normally simple.

However, one day I activated automatic WordPress updates. Big mistake.

The next minor WordPress update failed miserably, due to lack of permissions, and all the sites carried the message:

There was no way of getting rid of the message.

In the end, after much digging, I discovered that WP had set an option “auto_core_update_failed” on the sites. Removing that the message disappeared.

The issue is here on the WordPress Developer site.

The WordPress CLI command is your friend for these things.

I’ve got several site running on the brilliant minimalistic Hamilton theme for WordPress. It is a free theme created by Anders Norén.

The only thing I found missing was to be able to display posts and pages easily in the same way they appear on the blog posts page.

After bit of experimenting, I came up with code for a WordPress shortcode that’ll do the trick. There’s a download link below.

With this shortcode you can do things like:

display_posts type="page" category="front-page" orderby="manual" order="ASC" class="alignwide"

or:

display_posts type="post" orderby="date" order="DESC" limit="3" class="alignwide three-columns-grid"

Both examples are used on the front page of my Venice Street Photography site.

On another site Sei Sola?, the plugin is also used, like here to show posts by a specific author:

display_posts author="martina" class="alignwide"

The possible arguments are:

• author=”author-slug“
• category=”category-slug“
• tag=”tag-slug“
• parent=”page-id“
• type=”post” or type=”page”
• limit=”NN” (number of posts/pages to retrieve)
• order=”ASC” or order=”DESC”
• orderby=”date|menu|title|id”
• class=”additional classes“

The code is kept simple on purpose, because I made this just for myself and I don’t need more than what it currently does.

The file below can be used as a WordPress plugin. Create a folder “hamilton-display-posts” in your WordPress plugin folder, and copy the code below into a file “hamilton-display-posts.php” in that folder. Then you’ll find it the plugin list where it can be activated.

The code

<?php /**
 * Plugin Name: Hamilton display_posts
 * Plugin URI: https://www.venicestreetphotography.com/
 * Description: A display_posts shortcode for theme Hamilton
 * Version: 1.0
 * Author: René Seindal
 * Author URI: https://rene.seindal.dk/
 * License: GNU General Public License version 2.0
 * License URI: http://www.gnu.org/licenses/gpl-2.0.html
 */

// Lists of posts

function hamilton_display_posts_shortcode($atts = [], $content = null, $tag = '') {
    // normalize attribute keys, lowercase
    $atts = array_change_key_case((array)$atts, CASE_LOWER);
 
    // override default attributes with user attributes
    $atts = shortcode_atts([
        'author' => NULL,
        'category' => NULL,
        'tag' => NULL,
        'parent' => NULL,
        'type' => 'post',
        'limit' => 12,
        'order' => 'DESC',
        'orderby' => 'date',
        'class' => NULL,
    ], $atts, $tag);

    if ($atts['orderby'] == 'menu' or $atts['orderby'] == 'manual') { $atts['orderby'] = 'menu_order'; }

    $query_args = array(
        'post_status' 		=> 'publish',
        'post_type'			=> $atts['type'],
        'orderby' 			=> $atts['orderby'],
        'order'				=> $atts['order'],
        'posts_per_page' 	=> $atts['limit'],
    );

    if (!empty($atts['author'])) {
        $query_args['author_name'] = $atts['author'];
    }
    if (!empty($atts['category'])) {
        $query_args['category_name'] = $atts['category'];
    }
    if (!empty($atts['tag'])) {
        $query_args['tag'] = $atts['tag'];
    }
    if (!empty($atts['parent'])) {
        $query_args['post_parent'] = $atts['parent'];
    }

    ob_start();
    $posts = get_posts( $query_args );
    if ( $posts ) {
        global $post;
        foreach( $posts as $post ) {
            setup_postdata( $post );
            get_template_part( 'content' );
        }
        wp_reset_postdata();
    }
    $output = ob_get_clean();
    
    $class = '';
    if (!empty($atts['class'])) {
        $class = ' ' . esc_attr($atts['class']);
    }

    return '<div class="posts' . $class . '" id="posts">' . $output . '</div><!-- .posts -->';
}

add_action('init', function () {
    add_shortcode('display_posts', 'hamilton_display_posts_shortcode');
});