adjust image size in wordpress.
There are several ways to create custom image sizes in WordPress., how to use plugins, and using the built-in wordpress tools. Not so long ago, about a year ago, a strong vulnerability was found in the operation of a popular script that is used by many WordPress themes.. A script called TimThumb, designed to resize images.
If your theme uses timthumb.php, it is recommended to update it. The latest version of the script can be downloaded here.
If you are already using this script then there is a WordPress plugin for you, which automatically checks for new versions of the script. The plugin is calledTimthumb Vulnerability Scanner“.
Built-in WordPress features
Of course, it is best to use the built-in features WordPress Post Thumbnails (post thumbnails), also known as Featured Images. With built-in function add_image_size() the user can specify the dimensions of the image and crop it if necessary. In most cases, the use of basic functions allows you to avoid connecting various third-party scripts, such as TimThumb.
Additional Image Size Registration Function
Registration of additional sizes is carried out one by one. First you need to add support for post thumbnails. This is done simply - add the following code snippet to the theme's functions.php file:
1 |
add_theme_support( 'post-thumbnails' ); |
After including support for thumbnails in the functions file, we can use the function in our theme add_image_size( ‘My-Thumbnail’, width, height, crop mode );. The specified function will be able to register new additional image sizes in wordpress.
Function usage examples add_image_size:
1 2 3 |
add_image_size( 'sidebar-thumb', 220, 300, true ); // Hard Crop Mode add_image_size( 'homepage-thumb', 220, 180 ); // Soft Crop Mode add_image_size( 'singlepost-thumb', 590, 9999 ); // Unlimited Height Mode |
- hard crop (hard pruning);
- soft crop (soft pruning);
- unlimited height (unlimited height).
Let's look at each of the image sizes we registered separately..
Hard cut mode.
Here we set the value to ‘true’, added after height. This value tells WordPress About, that we need to crop the image to hard-coded dimensions (in our case 220x300px).
This method is often used in design, when making templates, to set the required proportions. The function will automatically crop the image either fon the sides, either top or bottom depending on its size.
The disadvantage of hard pruning is that you can't control it, what part of the image will be displayed. For example, thumbnails can be as follows:
Soft image cropping mode. Soft cut mode is a mode default. This method resizes the image proportionally, without distorting it. You most likely will not be able to get the specified dimensions, but usually the width of the image is taken as the basis, and the height for the image is selected proportionally. Thumbnails in this case will take the following form:
Unlimited height mode. It is often necessary to use very long images in the design. When displaying such images, it is necessary to fix the width. How to deal with height in such cases? Hard cropping an image on a page with is not very suitable. The easiest move is to determine the required width, while the height remains unlimited, which eliminates any distortion in its output. The picture below shows an example:
Displaying Additional Image Sizes in a WordPress Theme
After learning the built-in functions of wordpress for working with image sizes, Let's see, how to display created image sizes in wordpress theme. Open theme file, in which we plan to display an image, and add the following code to it:
1 |
<!--?php the_post_thumbnail( 'your-specified-image-size' ); ?--> |
The code must be inserted into the article output loop!
It's enough, to display additional image sizes on the site pages in a WordPress theme.
How to restore additional image sizes
If you are working with a site that has existed for a long time, most likely you will need to resize additional images. Function add_image_size() starts generating dimensions from the moment it is connected to the theme and only this way. In this way, any images, added before this feature was enabled, will have the old dimensions. Need to resize images, previously added. This can be done with a plugin Regenerate Thumbnails (alternative: Simple Image Sizes).
Using additional image sizes
Just connecting image sizes to a theme doesn't make any sense.. Authors cannot use them when adding images to posts. To correct this misunderstanding, just use the plugin Simple Image Sizes.
After installing and activating the plugin, a settings page will appear, which contains a list of all available sizes, defined in the topic. Все, what you need, is to click on the checkbox “Show in post insertion” under the required size.
All sizes, which are flagged, will be available to authors for use in entries.
With a plugin Simple Image Sizes you can also create additional custom image sizes directly from the WordPress admin area.
Links to material about working with images in WordPress
/*
- Basic web design course;
- Site layout;
- General course on CMS WordPress and continuation of the course on template development;
- Website development in PHP.