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:

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:

In the example we registered three different image sizes. Each of them has its own 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:

Жесткая обрезка изображений в wordpress

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:

Изменить размер изображения WordPress пропорционально

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:

настроить размеры картинок в WordPress

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:

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).

настроить размеры дополнительных картинок wordpress

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.

настройка размера картинок wordpress

All sizes, which are flagged, will be available to authors for use in entries.

Уроки WordPress - настройка размеров картинок

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


Buy WordPress hosting
/* WordPress tutor
Online tutoring services. List of courses I teach
  • Basic web design course;
  • Site layout;
  • General course on CMS WordPress and continuation of the course on template development;
  • Website development in PHP.
Read more on the page WordPress tutor
*/

Nikolaenko Maxim

Director of web studies ProGrafika. I am developing, website design and promotion. Always glad to new blog readers and good clients.


You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Templates for WordPress
The best hosting in Ukraine
Stable hosting for Drupal