
Change the aspect ratio of an image using CSS
24/09/2021In this post I'll show you how to change the aspect ratio of an image or element using CSS, and explain why this is important.
WordPress comes with a set of default image and thumbnail sizes. When you upload an image, WordPress optimises it into these sizes and puts the files into your upload folder. But what if you want to create custom image and thumbnail sizes appropriate to your website?
Of course, we could just let the browser scale the images and use the larger sizes that WordPress has to offer; but this isn’t very good for optimisation and speed. If at all possible, it is generally ‘best practice’ to lower the image file sizes as much as possible. That way we can deliver them to the browser, faster.
Let’s look at how to create and register our own custom image and thumbnail sizes and use them within our posts and pages.
You probably already have an image size in mind at this point, which is great. For me I want to set a width of 750px and have WordPress use a dynamic height. Doing this means that WordPress will scale the height of our image according to the width. To do dynamic sizing in WordPress we enter ‘9999’ for the size.
Start by writing a function in your functions.php:
function gb_add_image_sizes() {
}
Inside the function we are going to use the add_image_size() function. This function registers our new image size with WordPress. In this example I’m passing the name, width and height.
function gb_add_image_sizes() {
add_image_size('750width', 750, 9999);
}
Now that we have our function we can add it to WordPress using the add_action() hook. I like to do this after the theme setup.
add_action('after_setup_theme', 'gb_add_image_sizes');
At this stage WordPress is aware of our new image size and will generate the files for us every time we upload new media. Unfortunately, this doesn’t automatically make it available to all of our post types.
Note: Adding a new image size won’t retrospectively create sizes for all of our old media; for this you will need to regenerate your thumbnails.
To make our new image size available for use in Gutenberg we are going to create a filter function using add_filter().
First make a callback function for the filter. We’ll be filtering ‘image_size_names_choose’, so we need to modify the $sizes variable.
function gb_new_image_sizes($sizes) {
}
Next we create an array for our new image size and merge it back into the $sizes array. The merged array is what we are going to return from the filter.
When creating our array, the name of the size is the key and the ‘name you would like to appear in Gutenberg’ is the value.
function gb_new_image_sizes($sizes) {
$addsizes = array(
// imageSizeName => nameAppearingInGutenberg
"750width" => "750px Width"
);
return array_merge($sizes, $addsizes);
}
The final step is to register the filter with WordPress using the add_filter() hook.
add_filter('image_size_names_choose', 'gb_new_image_sizes');
Your custom image size will now be available for you to select whilst editing posts and pages!
In this post I'll show you how to change the aspect ratio of an image or element using CSS, and explain why this is important.
Here is how you can fix node incompatibility error, using "Node Sass does not yet support your current environment" as an example.
Need to make a directory in PHP? No Problem! mkdir has you covered... Need to recursively make directories in PHP? mkdir has you covered, too!
Learn how to regenerate and update WordPress media and image sizes both programmatically (without plugin), and also with a handy plugin.
Ever seen constants like __DIR__ and __FILE__ being used in PHP? These are 'Magic Constants', and this is how we can use them.
Learn how to use event listeners to detect and handle single and multiple keypress events in JavaScript. Add modifier keys to your application!