How to add additional gallery thumbnail sizes in WordPress

IMPROVING COOLING, BRAKING PERFORMANCE & INCREASING COMPONENT LONGEVITY

How to add additional gallery thumbnail sizes in Wordpress

Vanja K.
Vanja K. / December 17, 2020 / 453 Views

Create uniquely resized image thumbnails for use in content pages, blog posts, landing pages and galleries, speeding up the loading speed of your WordPress website

For many of us, the standard set of gallery sizes in WordPress aren’t enough and for many, they create their own set of issues. In turn, for any knowledgable WordPress developer, controlling what sizes are being created every time you upload an image is crucial for a proper, fast, and well-performing website. Below you will find a snippet that we’ve created for one of our clients, which you need to add to functions.php in order for it to work. Naturally, if you aren’t adding this prior to developing your website and uploading new media, you will have to regenerate all the thumbnails – easily done by the Regenerate Thumbnails plugin, which you can download & install on your WordPress site for free.

/** Gallery Sizes */

add_image_size('images-medium', 450, 450, array('center', 'center'));
add_image_size('gallery-small', 480, 300, array('center', 'center'));
add_image_size('gallery-medium', 720, 405, array('center', 'center'));
add_image_size('gallery-thumb', 500, 350, true );
add_image_size('woocommerce_single_resized', 1000, 1000, true );

/** Media Gallery Sizes Add-on */

add_filter( 'image_size_names_choose', 'my_custom_sizes' );

function my_custom_sizes( $sizes ) {
return array_merge( $sizes, array(
'gallery-small' => __( 'Gallery Medium Cropped' ),
'gallery-medium' => __( 'Gallery Medium' ),
) );
}

Copy

In this case, we’re adding 5 additional thumbnail sizes that we need for theme placements for our client’s website. These items are catered to a 1440px wide design grid size we’re using, allowing us to fill out the pages perfectly, all without adding too much weight to them. Naturally, it would be a great idea to use the <picture> element within the template’s design or ACF (Advanced Custom Forms). This will give you more leeway in terms of loading image sizes that fit each screen, allowing you to load smaller and less heavy imagery. In turn, this will undoubtedly speed up your site, as it stops loading large thumbnail sizes, albeit filling out the content area real estate perfectly. Below you will find an example of what is done on EV Car Scene, one of the websites we manage & develop.

EV Car Scene - Custom Sized Thumbnails For Use In Content Pages
EV Car Scene – Custom Sized Thumbnails For Use In Content Pages

 

DISCLAIMER:

Please use the code, advice, and information presented on this website with caution. Nucleus J.D.O.O, or any of its employees, cannot be held responsible for any damages that this code might cause. We always try to update the code shown on our website, but we cannot guarantee its functionality with various themes, templates, or coding. Please ensure that you test each code thoroughly in order to use it safely.

Need some of our services?
Get in
touch and we'll
send you a free cost estimate for your project!

    Contact Form Image
    MORE BLOGS
    We got more related posts, check them out!
    How to remove “Home” from WooCommerce Breadcrumbs
    An easy-to-add snippet of code that will clean up your single product pages and single blog posts This was a simple request, but a rather impactful request by one of our clients. Their eCommerce store, made in WooCommerce by our team displays breadcrumbs on top of their page. It’s a great way of showing the […]
    Vanja K.
    CEO & CTO
    Read More
    How To Add Your Company Logo To The WordPress Login Page
    We get asked this a lot: how to add your company’s logo to the backend login page for WordPress. It makes the whole thing look more prefessional, and in turn, makes the whole thing a lot more appealing to a lot of our clients who have more than one admin or shop manager. The procedure […]
    Vanja K.
    CEO & CTO
    Read More
    Limit Search Results to WooCommerce Products
    Make sure your customers see only WooCommerce products when searching for items on your online store, giving them a better showcase of your offerings Running a WooCommerce website requires some pretty straightforward tasks at hand each and every day. However, there are also some custom tweaks that some eCommerce admins would like to have for […]
    Vanja K.
    CEO & CTO
    Read More
    Newsletter
    Stay up to date. It's worth it.
    Newsletter Background Image