WordPress. Как изменить размер изображений

Это обучающее видео показывает, как изменить размер изображений в шаблонах WordPress.

Когда Вы загружаете новую картинку в любой пост, используя функцию Featured Image, или через админ-панель — Dashboard > Media > Add New, WordPress автоматически создает несколько версий этого изображения с разными разрешениями, которые можно найти в Медиа Настройках (Media Settings) или в исходном коде.

К примеру, Ваше изображение называется 1920×1200_front.jpg и когда Вы загружаете его через WordPress в папку “wp-content\uploads\2011\07 вы получите: 1920×1200_front.jpg, 1920×1200_front-100×100.jpg, 1920×1200_front-164×151.jpg, 1920×1200_front-200×120.jpg, 1920×1200_front-692×300.jpg и т.д.

К примеру если картинки по умолчанию имеют «альбомную» ориентацию, а Вы загружаете «портретную», то изображение будет обрезано некорректно.

Чтобы исправить это, откройте файл theme-init.php, который находится в директории “themes\theme_number\includes\, с помощью любого php/текстового редактора и Вы увидите разрешения, которые необходимо изменить. Комментарии к разрешениям помогут выбрать нужное.

К примеру, название Вашего обрезанного изображения Mona_Lisa-560×300, а Вы хотите сделать его разрешение 195 х 02 (портрет). То в коде:

  // This theme uses  post thumbnails
  if (  function_exists( 'add_theme_support' ) ) { // Added in 2.9
  add_theme_support(  'post-thumbnails' );
  set_post_thumbnail_size(  148, 115, true ); // Normal post thumbnails
  add_image_size(  'large-thumbnail', 1920, 1280, true ); // Large Thumbnail
  add_image_size(  'post-thumbnail-xl', 692, 300, true ); // Portfolio Extra Large Thumbnail           
  add_image_size(  'portfolio-post-thumbnail-small', 148, 85, true ); // Portfolio Small Thumbnail
  add_image_size(  'portfolio-post-thumbnail', 220, 150, true ); // Portfolio Thumbnail
  add_image_size(  'portfolio-post-thumbnail-large', 370, 240, true ); // Portfolio Large  Thumbnail
  add_image_size(  'portfolio-post-thumbnail-xl', 560, 300, true ); // Portfolio Extra Large  Thumbnail
  add_image_size(  'small-thumbnail', 90, 55, true ); // Small Thumbnail
  }

Вам нужно изменить этот код

 add_image_size(  'portfolio-post-thumbnail-xl', 560, 300, true ); // Portfolio Extra Large  Thumbnail

на этот

  add_image_size(  'portfolio-post-thumbnail-xl', 195, 302, true ); // Portfolio Extra Large  Thumbnail

и снова загрузить картинку через админ-панель, используя функцию Featured image и проверить этот пост на сайте.

Если ваше изображение обрамлено, изменить высоту и ширину в CSS.

Пожалуйста, ознакомьтесь с детальным обучающим видео ниже:

WordPress. Как изменить размер изображений