Add image sizes wordpress

Developer Resources

Registers a new image size.

Contents

Parameters

More Information

Reserved Image Size Names

These are the reserved image size names recognized by WordPress: ‘thumb’, ‘thumbnail’, ‘medium’, ‘medium_large’, ‘large’, and ‘post-thumbnail’.

The names “thumb” & “thumbnail” are just aliases- they are exactly the same.

However, if needed, you can always set the options yourself:

Crop Mode

Set the image size by resizing the image proportionally (without distorting it):

Set the image size by cropping the image (not showing part of it):

Set the image size by cropping the image and defining a crop position:

When setting a crop position, the first value in the array is the x axis crop position, the second is the y axis crop position.

  • x_crop_position accepts ‘left’ ‘center’, or ‘right’.
  • y_crop_position accepts ‘top’, ‘center’, or ‘bottom’.

By default, these values default to ‘center’ when using hard crop mode.

You can find examples of the various crop types here.

Using the New Image Sizes

Now that you’ve defined some custom image sizes, there are a variety of ways that you can use them.
For Featured Images

To use your custom image sizes for a post’s featured image, you can use the_post_thumbnail() in the appropriate theme template file…

Note: To enable featured images the current theme must include add_theme_support( ‘post-thumbnails’ ); in its functions.php file. See also Post Thumbnails.

For Media Library Images (Admin)

You can also make your custom sizes selectable from your WordPress admin. To do so, you have to use the image_size_names_choose hook to assign them a normal, human-readable name…

For General Media (PHP/Templates)

Other Notes:

Using the ‘false’ setting will fail to produce a new image in the upload directory if one of the image dimensions of the uploaded image are equal to the new image size.

If a registered image size is removed from functions.php, then any image uploaded before that point and then deleted from the media library afterwards, does not have those auto-generated sizes deleted too. Only image sizes that exist in functions.php are deleted.

Although height and width are not required parameters, their default values (0) will lead to unwanted behavior, so bear in mind that you should always define them. Use a value of 9999 to define the other dimension as the one to be considered when image resize is executed.

Источник

add_image_size() │ WP 2.9.0

Регистрирует новый размер картинки (миниатюры).

Регистрация означает, что WordPress, при загрузке изображения, кроме базовых размеров будет создавать еще один файл — измененную копию оригинала с указанными размерами.

Вызывать эту функцию можно в любой момент, желательно пораньше, чтобы была возможность отключить размер позднее. Так:

  • Из плагина, это лучше делать на хуке plugin_loaded с приоритетом 0.
  • Из темы, вызывать прям в теле файла functions.php .

Чтобы для поста можно было задать картинку-миниатюру, нужно активировать эту возможность функцией: add_theme_support( ‘post-thumbnails’ ) в файле шаблона funсtions.php.

Используйте remove_image_size(), чтобы удалить ранее созданный размер.

Чтобы создавать миниатюры на лету с любым размером, вместо этой функции, используйте мой плагин Kama Thumbnail.

Зарезервированные названия размеров

thumb, thumbnail, medium, large, post-thumbnail

Названия » thumb » и » thumbnail » — это алиасы (синонимы) и относятся к одинаковым файлам.

Смотрите также описание функции image_downsize().

Также вы можете установить опции создаваемой миниатюры через:

При создании своей темы для каталога тем WP, название нового размера должно содержать имя темы, подробнее по ссылке. Например:

Возвращает

null . Ничего не возвращает.

Использование

Как создавать миниатюру?

false — масштабирование: картинка будет изменена в размере по подходящей стороне. Миниатюра создается по одной из подходящих сторон: указанной ширине или высоте. Итоговая картинка не будет точно совпадать указанными размерами.

true — кадрирование: миниатюра создается точно по указанным размерам. Подбирается наиболее подходящая сторона, картинка уменьшается по ней, а у противоположной стороны лишняя часть, не подходящая по пропорциям обрезается.

  • array( координата_X, координата_Y ) — указание позиции кадрирования, т.е. если указать массив [ ‘right’, ‘top’ ] , то изображение будет кадрированно с правого-верхнего угла.
  • crop работает только для вновь создаваемых картинок. Если на сайте уже есть картинки и только потом добавляется размер, то оно обработаны не будут.

    Читайте также:  Заправка принтера epson r270

    По умолчанию: false

    Примеры

    #1 Добавим новые размеры миниатюр

    Регистрируем новые размеры миниатюр, добавив такой код в файл шаблона functions.php:

    #2 $crop параметр

    Масштабирование $crop = false

    Эта строка укажет WP, что при загрузке нового файла, нужно создать его уменьшенную копию. В этом случае миниатюра будет подогнана под ширину или высоту, смотря какая из сторон подходит больше, а противоположная сторона будет уменьшена пропорционально и скорее всего не будет больше указанного размера. Например, у нас оригинал картинки 2500х1800 пикселей мы делаем миниатюру 220х180 пикселей. Картинка будет уменьшена до размеров — 250х180 px, т.е. высота будет 180, как мы и указали, однако ширина получится выше указанной 250 а не 220. В этом случае картинка не кадрируется и уменьшенная копия сохраняет пропорции полностью.

    Кадрирование $crop = true

    Если установить четвертый параметр в true, то миниатюра будет уменьшена и обрезана точно под указанные размеры. Например, у нас оригинал картинки 2500х1800 пикселей мы делаем миниатюру 220х180 пикселей. Оригинал будет уменьшен до высоты 180xp (тогда ширина его как бы равна 250px), а ширина будет обрезана по краям по 15px и в итоге получим уменьшенную копию: 220х180 пикселей:

    Кадрирование с указанием позиций $crop = [ x, y ]

    С версии 3.9 появилась возможность указывать позицию кадрирования. Давайте добавим размер миниатюры, которая будет размером 220х220 пикселей и будет фрагментом от оригинала, который будет взят с левого верхнего угла (left, top):

    Х_позиция может быть: ‘ left ‘ ‘ center ‘ или ‘ right ‘.
    Y_позиция может быть: ‘ top ‘, ‘ center ‘ или ‘ bottom ‘.

    #3 Уменьшение по нужной стороне

    Чтобы уменьшить картинку по одной из нужных нам сторон, нужно указать противоположной стороне огромное значение. Например, у нас есть картинка 2500х1800, нам нужно получить миниатюру 500х1800, тогда указываем так:

    #4 Использование новых размеров

    Мы зарегистрировали 3, отличных от базовых, размера: post-thumbnails , category-thumb , homepage-thumb . Чтобы теперь использовать эти размеры (выводить картинки в шаблоне), можно использовать следующие функции:

    Избранная картинка (featured image)

    Чтобы использовать новый размер при выводе картинки установленной как «Избранная картинка» поста, в файле шаблона нужно использовать функцию the_post_thumbnail():

    Новый размер в выбор размеров при вставке картинки (админ-панель)

    Чтобы добавить новый размер в выбор размеров при вставке картинки в пост, нужно использовать фильтр-хук image_size_names_choose , в котором нужно добавить размер и указать для него понятное название:

    Для основных медиафайлов (PHP/Templates)

    Также можно выводить картинки (по размерам) напрямую из библиотеки WordPress по ID картинки. Для этого используйте функцию wp_get_attachment_image():

    Если нам нужно получить только УРЛ картинки а не готовый тег , то используйте функцию wp_get_attachment_image_src().

    Добавить свой пример

    Плагины

    Regenerate Thumbnails — этот плагин позволяет создать новые размеры для каждого загруженного изображения. Полезен когда вы изменили или добавили новые размеры миниатюр (через Настройки > Медиафайлы) во время когда в библиотеке уже есть загруженные изображения. Или когда вы изменили размеры «Избранного изображения» поста.

    Force Regenerate Thumbnails — удаляет ранее созданные размеры и создает новые, на основе текущих установок.

    AJAX thumbnail rebuild — позволяет пересоздать миниатюры. Полезен, если вы использовали функцию add_image_size() когда у вас уже есть загруженные изображения. (Это медленный плагин, но при этом в нем не бывает ошибок с недостатком выделенной памяти).

  • Simple Image Sizes — позволяет создавать новые размеры миниатюр прямо из панели «Медиафайлы». Он также умеет пересоздавать миниатюры. Он добавляет новые размеры в выбор для постов, так вы можете вставлять новые размеры в посты. Вы можете выбирать какие из размеров вы бы хотели пересоздать и для каких типов постов это нужно сделать.
  • Источник

    Image Sizes Explained

    When you upload a picture to your WordPress website, its copies – images with additional sizes will be created. Why do we need them? Because we don’t use the same size image everywhere on the site:

    • in posts,
    • in portfolio,
    • in popups,
    • as post thumbnails on archive pages,
    • in widgets,
    • in administration area etc;

    So, for example WordPress allows you to use full size image on posts pages and 150×150 (for example) images on archive pages.

    But wait – keep in mind that the more registered image sizes you have, the more files will be on your website and more time will be needed to process images during upload.

    Default WordPress Image Sizes

    WordPress supports several image sizes by default. You can find and change them in administration area in “Settings > Media”.

    So, for example you can change WordPress thumbnail size on this page.

    What if you don’t use them and do not want WordPress to generate a copy for each of these sizes. You can insert the following hook into your theme functions.php .

    But always keep in mind that if your WordPress theme receives updates, then better use a child theme or a custom plugin.

    Читайте также:  Astra linux arial шрифт

    medium_large

    The medium_large image size appeared in WordPress 4.4 together with responsive images feature. It has fixed width 768 and proportional height.

    You can deactivate medium_large size as simple as with this code:

    How to Get All Image Sizes?

    Sometimes you have to find out what is the list of available image sizes on the website. Unfortunately there is no common way to do it for both default and custom images sizes, so:

    • If you need the list of default image sizes, you can use get_intermediate_image_sizes() , which returns an array with default image sizes, example:

    If you have to list registered image sizes, you get them from $_wp_additional_image_sizes global variable, and I can teel you more, you can also get image dimensions from there, example:

    Functions

    It is easy enough to use WP image sizes in administration area – all you have to do is to select an image size you need from the dropdown. Let’s better make a look at functions then.

    the_post_thumbnail()

    Top 1 in my list, because I use it more often than anything else.

    Please note, that this function prints an tag, not a URL.

    $size Here is what you can use as a parameter value:

    • image size identifier (name) – medium , custom etc, by default thumbnail ,
    • custom size array( width, height ) . If you use it, the most appropriate image size will be displayed.
    • you can pass full value to this parameter and an original image will be displayed.

    $attr You can pass any HTML attributes here as an array, you can even rewrite src attribute!

    get_the_post_thumbnail()

    This function is very similar to the_post_thumbnail(), the difference is that:

    • The first get_the_post_thumbnail() is a post ID, everything else is the same,
    • It returns an image, not prints it.

    wp_get_attachment_image_src()

    The function allows to get an image URL.

    Please note, that an attachment ID is not a post ID. But you can easily get it, for example if you need a featured image ID, you can use get_post_thumbnail_id() function.

    About the $size parameter and a size array read a little above.

    How to Add your Custom Image Sizes

    This process is very simple and consists of two steps. The first step is required.

    add_image_size()

    To register an image size in WordPress you can use this function in your current theme functions.php or in a child theme functions.php or in a custom plugin.

    Value Description
    false (default) The image won’t be cropped, just resized for your custom dimension
    true The image will be resized and cropped exactly by provided resolution, the central part of the image will be used.
    array( position_X, position_Y ) position_X accepts:
    • center
    • top
    • bottom

    Let’s make a look at the example:

    To keep the things simple I decided to use a square size in this example. So, it is easy to say, that if the original image is horizontal, the left part of the image will remain, but the right part will be cropped, and the same I can say about vertical images – the bottom part of the image will be cropped.

    It is also possible to make manual cropping using “Manual Image Crop” plugin.

    But do not create a lot of image sizes as well:

    • the more image sizes you create — the more files will be in your uploads folder,
    • and the more time will need to upload an image to your site.

    How to Add your Custom Image Size to Media Uploader and Gutenberg

    When you insert images to widgets and posts, WordPress (3.5+) allows you to choose what image size to use:

    As you can see, it is possible to add you custom size there:

    The cool thing is that this hook also works for Gutenberg image block.

    How to Regenerate Images after Changing their Sizes or Changing a Theme

    Perhaps you know the situation when after changing add_image_size() parameters or after changing your website theme WordPress does not generate image sizes automatically and images with old resolutions are still displayed on the site.

    What should you do in this situation? If there are only 2-3 pictures in your uploads folder, you can simply reupload them. But what to do if there are 2-3 thousands of images?

    There is two ways to solve this situation – with plugins and with code:

    Regenerate Thumbnails with Plugins

    Ok, I can recommend you two simple plugins:

    • Ajax Thumbnail Rebuild
    • Force Regenerate Thumbnail

    Each of them has its own advantages and disadvantages, so maybe for different situations you can choose what plugin more fits for you.

    Regenerate Thumbnails Programmatically

    Here I just want to show you the code which allows to regenerate images, how you will use it – it is your choice.

    How to Create Certain Image Size Thumbnails for Custom Post Types Only

    So, let’s imagine that your website has 10 registered custom post types, and each of them use 2-3 image sizes on the website pages. It is easy to understand that when we upload any picture on the website WordPress creates 20-30 copies of it!

    There is no way to use add_image_size() for a custom post type but here is a small piece of code that solves this problem. This code tells WordPress when it have to create a certain resolution copy of the picture and when it doesn’t.

    Both intermediate_image_sizes and intermediate_image_sizes_advanced hooks are OK for this task. A super simple example below, after you insert the code to your functions.php file thumbnails my-image-size-name won’t be created for images, uploaded from custom post type page .

    A little bit more complicated example, but it is also correct:

    Misha Rudrastyh

    Hey guys and welcome to my website. For more than 10 years I’ve been doing my best to share with you some superb WordPress guides and tips for free.

    Need some developer help? Contact me

    Comments — 10

    Hello,
    please, tell me the image size names for each post type and each taxonomy. I can help you with the code then.

    Hi,
    after a little bit thinking, I have found how does it work and really solved most of the problem.
    I have standart posts with galleries, which are posted from admin backend and for them I can limit the image sizes. This is the biger part of the problem, because standart posts are with galleries with 15 – 20 images /15 * 20 custom image size are 300images for only one post/.
    Smaller part of the problem is that custom post types are published from frontend and for them I can’t apply the code above.
    At the moment image sizes are generated on upload, Is it possible to generate only sertain size of the image, only on request for that size?

    Smaller part of the problem is that custom post types are published from frontend and for them I can’t apply the code above.

    Try to apply save_post filter or another.

    At the moment image sizes are generated on upload, Is it possible to generate only sertain size of the image, only on request for that size?

    I’m not sure how this can be implemented.

    This looks like pretty much exactly what I need, but I was wondering about the hook. Why does this go on intermediate_image_sizes() and not on intermediate_image_sizes_advanced() ? I’ve seen a couple of different suggested solutions for this problem and don’t know why some use one hook and some the other.

    good question. And let me give you a good answer 🙂

    intermediate_image_sizes applies before intermediate_image_sizes_advanced and passes only one parameter — the array of image sizes names, for example: array(‘thumbnail’, ‘medium’, ‘large’, ‘custom_size’) .

    So we can unset any of image sizes on the early step:

    If you unset image sizes in intermediate_image_sizes (but not in intermediate_image_sizes_advanced ), it could improve website performance for a little because it prevents some actions in the code, I suppose.

    intermediate_image_sizes_advanced runs after the image sizes names are converted into an associative array. You can use this filter the same way to unset image sizes by name, but you can use additional values that are passed to the filter.

    Thanks so much for the detailed explanation. I noticed when I added your code to my `functions.php` file, I got a “headers already sent” error in my Debug Bar.

    What code do you mean? And what headers? I need more info 🙂

    Misha, this is brilliant! Thank you so much.

    In my case, I was uploading small graphics that are already the right size — ads and logos which have been prepped elsewhere. For that case, I wrote:

    Hi, great article! I’m trying to catch animated gifs right before the images get created. Writing a plugin to catch that and generate the smaller animated gifs in order to keep the animation. I got most of the code sorted (I think) but can’t find the right hook…

    image_make_intermediate_size is right after the images get resized…

    Hi Misha, i think there are some exceptions in the code you provide. Perhaps it depends on my theme, or WordPress changed, but i am not sure (Working on WordPress 5.2). I verified what files are produced in wp_content/uploads and these are my conclusions:

    1. the filter intermediate_image_sizes_advanced is working, but the intermediate_image_sizes is not working.

    2. the filter is working only for the default WordPress sizes (thumbnail, medium, medium_large, large). Custom theme sizes, and plugin sizes ignore the “unset”.

    3. The array get_intermediate_image_sizes() outputs all the 4 WordPress default sizes, even if they are really unset. And proved there are no image produced in filesystem. I wonder why.

    Источник

    Поделиться с друзьями
    КомпСовет
    Adblock
    detector