
Implements and Extends, Object Oriented TypeScript
15/03/2023Learn the difference between implements and extends in TypeScript. Use Implements to implement interfaces and types, and extends to inherit from classes.
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!
Learn the difference between implements and extends in TypeScript. Use Implements to implement interfaces and types, and extends to inherit from classes.
In this tutorial we will look at using YAML in PHP. Learn about Parsing and Writing YAML files using Symfony's YAML component.
Measuring code execution performance is an important way to identify bottlenecks. Use these methods in JavaScript to help optimise your code.
Find bottlenecks, optimise and clean your code, and speed up your apps by measuring the execution time of your PHP scripts using microtime.
In this tutorial we will learn how to use Basic Authentication with PHP Curl.
Set up a WordPress development environment using Docker Compose. Includes a Docker container with WordPress, MySQL and phpMyAdmin services.
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!