Как разобраться с выводом миниатюр изображений в WordPress?

Question

[Андрей Филимонов]

Здравствуйте, объясните пожалуйста, как использовать автоматически создаваемые миниатюры изображений.

Есть код, который выводи превью поста, в нём строка

<div class="size-img"><?php the_post_thumbnail(array()); ?></div>

как я понимаю от сюда этот код выводит миниатюру картинки, но если вместо thumbnail поставить medium, то выдаёт ошибку. Почему?
Если скопировать ссылку на изображение на самой странице блога, то она копируется без добавки -150x150. Это значит что выводится полный вариант?
Если глянуть html код, то даёт такое:

<div class="size-img"><img width="900" height="876" src="http://vh166963.eurodir.ru/wp-content/uploads/polza_stretchinga.jpg" class="attachment- size- wp-post-image" alt="польза от растяжки" srcset="http://vh166963.eurodir.ru/wp-content/uploads/polza_stretchinga.jpg 900w, http://vh166963.eurodir.ru/wp-content/uploads/polza_stretchinga-300x292.jpg 300w, http://vh166963.eurodir.ru/wp-content/uploads/polza_stretchinga-768x748.jpg 768w" sizes="(max-width: 900px) 100vw, 900px" /></div>

Это значит все картинки загружаются? И где вариант -150x150?
Если в Настройках-->Медиафайлы поставить нули у всех размеров
то всё равно в папке uploads создаются изображения (дубли) 768xсколько-то пикселей. Почему? Как избежать?

Как правильно организовать, чтобы загружался один оригинал и к нему только миниатюра, например 300 px и она выводилась в превью статьи?

Comments

[Андрей Филимонов]

Как понимаю вместо array() надо ставить medium? А я вместо thumbnail пихал <?php the_post_thumbnail(array()); ?>

[Андрей Филимонов]

если ставлю <?php the_post_thumbnail('medium'); ?>
то картинка выводится шириной в 758 px, почему?

Answer 1

[Roman]

Если в Настройках-->Медиафайлы поставить нули у всех размеров то всё равно в папке uploads создаются изображения (дубли) 768xсколько-то пикселей. Почему? Как избежать?

Перейди на страницу своего сайта /wp-admin/options.php найди поле medium_large_size_w в нём видимо у тебя 768 - и поставь 0.

Твой скриншот

Зачем везде 0 поставил? — Чтобы никакие картинки из оригинала не создавались

Если скопировать ссылку на изображение на самой странице блога, то она копируется без добавки -150x150. Это значит что выводится полный вариант?

Да, оригинал загруженный тобой

Если глянуть html код, то даёт такое: ... Это значит все картинки загружаются? И где вариант -150x150?

Нет, грузится только 1 из всех, оптимальная для разрешения устройства с которого открыт сайт.
Почитай про src и srcset

Как правильно организовать, чтобы загружался один оригинал и к нему только миниатюра, например 300 px и она выводилась в превью статьи?

Поставь на странице /wp-admin/options-media.php у миниатюры: ширина 300

Выводи в шаблоне миниатюру просто:

<div class="size-img">
  <?php the_post_thumbnail(); ?>
</div>

Comments

[Андрей Филимонов]

да, 0 поставил, думал что не нужны эти размеры. нужны только оригиналы и 300 на 300.
почему если поставить <?php the_post_thumbnail('medium'); ?> то крупный размер прикрепляется, не 300 на 300? ( в настройках включил)
а в каком месте поставить у миниатюры: ширину 300?

options-media.php

<?php
/**
 * Media settings administration panel.
 *
 * @package WordPress
 * @subpackage Administration
 */

/** WordPress Administration Bootstrap */
require_once( dirname( __FILE__ ) . '/admin.php' );

if ( ! current_user_can( 'manage_options' ) )
	wp_die( __( 'Sorry, you are not allowed to manage options for this site.' ) );

$title = __('Media Settings');
$parent_file = 'options-general.php';

$media_options_help = '<p>' . __('You can set maximum sizes for images inserted into your written content; you can also insert an image as Full Size.') . '</p>';

if ( ! is_multisite() && ( get_option('upload_url_path') || ( get_option('upload_path') != 'wp-content/uploads' && get_option('upload_path') ) ) ) {
	$media_options_help .= '<p>' . __('Uploading Files allows you to choose the folder and path for storing your uploaded files.') . '</p>';
}

$media_options_help .= '<p>' . __('You must click the Save Changes button at the bottom of the screen for new settings to take effect.') . '</p>';

get_current_screen()->add_help_tab( array(
	'id'      => 'overview',
	'title'   => __('Overview'),
	'content' => $media_options_help,
) );

get_current_screen()->set_help_sidebar(
	'<p><strong>' . __('For more information:') . '</strong></p>' .
	'<p>' . __('<a href="https://codex.wordpress.org/Settings_Media_Screen">Documentation on Media Settings</a>') . '</p>' .
	'<p>' . __('<a href="https://wordpress.org/support/">Support Forums</a>') . '</p>'
);

include( ABSPATH . 'wp-admin/admin-header.php' );

?>

<div class="wrap">
<h1><?php echo esc_html( $title ); ?></h1>

<form action="options.php" method="post">
<?php settings_fields('media'); ?>

<h2 class="title"><?php _e('Image sizes') ?></h2>
<p><?php _e( 'The sizes listed below determine the maximum dimensions in pixels to use when adding an image to the Media Library.' ); ?></p>

<table class="form-table">
<tr>
<th scope="row"><?php _e('Thumbnail size') ?></th>
<td>
<label for="thumbnail_size_w"><?php _e('Width'); ?></label>
<input name="thumbnail_size_w" type="number" step="1" min="0" id="thumbnail_size_w" value="<?php form_option('thumbnail_size_w'); ?>" class="small-text" />
<label for="thumbnail_size_h"><?php _e('Height'); ?></label>
<input name="thumbnail_size_h" type="number" step="1" min="0" id="thumbnail_size_h" value="<?php form_option('thumbnail_size_h'); ?>" class="small-text" /><br />
<input name="thumbnail_crop" type="checkbox" id="thumbnail_crop" value="1" <?php checked('1', get_option('thumbnail_crop')); ?>/>
<label for="thumbnail_crop"><?php _e('Crop thumbnail to exact dimensions (normally thumbnails are proportional)'); ?></label>
</td>
</tr>

<tr>
<th scope="row"><?php _e('Medium size') ?></th>
<td><fieldset><legend class="screen-reader-text"><span><?php _e('Medium size'); ?></span></legend>
<label for="medium_size_w"><?php _e('Max Width'); ?></label>
<input name="medium_size_w" type="number" step="1" min="0" id="medium_size_w" value="<?php form_option('medium_size_w'); ?>" class="small-text" />
<label for="medium_size_h"><?php _e('Max Height'); ?></label>
<input name="medium_size_h" type="number" step="1" min="0" id="medium_size_h" value="<?php form_option('medium_size_h'); ?>" class="small-text" />
</fieldset></td>
</tr>

<tr>
<th scope="row"><?php _e('Large size') ?></th>
<td><fieldset><legend class="screen-reader-text"><span><?php _e('Large size'); ?></span></legend>
<label for="large_size_w"><?php _e('Max Width'); ?></label>
<input name="large_size_w" type="number" step="1" min="0" id="large_size_w" value="<?php form_option('large_size_w'); ?>" class="small-text" />
<label for="large_size_h"><?php _e('Max Height'); ?></label>
<input name="large_size_h" type="number" step="1" min="0" id="large_size_h" value="<?php form_option('large_size_h'); ?>" class="small-text" />
</fieldset></td>
</tr>

<?php do_settings_fields('media', 'default'); ?>
</table>

<?php
/**
 * @global array $wp_settings
 */
if ( isset( $GLOBALS['wp_settings']['media']['embeds'] ) ) : ?>
<h2 class="title"><?php _e('Embeds') ?></h2>
<table class="form-table">
<?php do_settings_fields( 'media', 'embeds' ); ?>
</table>
<?php endif; ?>

<?php if ( !is_multisite() ) : ?>
<h2 class="title"><?php _e('Uploading Files'); ?></h2>
<table class="form-table">
<?php
// If upload_url_path is not the default (empty), and upload_path is not the default ('wp-content/uploads' or empty)
if ( get_option('upload_url_path') || ( get_option('upload_path') != 'wp-content/uploads' && get_option('upload_path') ) ) :
?>
<tr>
<th scope="row"><label for="upload_path"><?php _e('Store uploads in this folder'); ?></label></th>
<td><input name="upload_path" type="text" id="upload_path" value="<?php echo esc_attr(get_option('upload_path')); ?>" class="regular-text code" />
<p class="description"><?php
	/* translators: %s: wp-content/uploads */
	printf( __( 'Default is %s' ), '<code>wp-content/uploads</code>' );
?></p>
</td>
</tr>

<tr>
<th scope="row"><label for="upload_url_path"><?php _e('Full URL path to files'); ?></label></th>
<td><input name="upload_url_path" type="text" id="upload_url_path" value="<?php echo esc_attr( get_option('upload_url_path')); ?>" class="regular-text code" />
<p class="description"><?php _e('Configuring this is optional. By default, it should be blank.'); ?></p>
</td>
</tr>
<?php endif; ?>
<tr>
<th scope="row" colspan="2" class="th-full">
<label for="uploads_use_yearmonth_folders">
<input name="uploads_use_yearmonth_folders" type="checkbox" id="uploads_use_yearmonth_folders" value="1"<?php checked('1', get_option('uploads_use_yearmonth_folders')); ?> />
<?php _e('Organize my uploads into month- and year-based folders'); ?>
</label>
</th>
</tr>

<?php do_settings_fields('media', 'uploads'); ?>
</table>
<?php endif; ?>

<?php do_settings_sections('media'); ?>

<?php submit_button(); ?>

</form>

</div>

<?php include( ABSPATH . 'wp-admin/admin-footer.php' ); ?>

[Roman]

Андрей Филимонов:
На скрине написано «Размер миниатюры»
Ширина - 0, Высота - 0
Тут поставь 300

[Roman]

Андрей Филимонов:
Medium это средний размер, он у тебя 0 стоит
Large это большой он тоже 0
Ты смотришь с ноутбука тебе выводится не medium (его у тебя нет) а из того что есть наиболее подходящее - твой оригинал, больше то у тебя ничего нет.

[Roman]

Андрей Филимонов:
Все изменения которые ты сейчас вносишь они к старым (раннее загруженным картинкам) не применятся, потому что они уже записаны в базу.
Изменения отразятся только на новых добавленных картинках.

[Андрей Филимонов]

Roman: Я отметил все размеры

закачал заново все фото, вставил в шаблон <?php the_post_thumbnail('medium'); ?>


но на странице выводится medium-large (https://gymbalance.ru/wp-content/uploads/uspokoit_... Хотя в uploads есть версия 300

[Roman]

Андрей Филимонов: на странице выводится 300 на 200 всё как надо:


на странице /wp-admin/options.php через Ctrl + F найдите все записи _size и отредактируйте где 768 стоит

[Андрей Филимонов]

Roman: Но если по картинке правой кнопкой мыши нажать и скопировать ссылку, то копируется на 768

[Roman]

Андрей Филимонов:
Перечитайте мой ответ, 3-ий раз пишу одно и тоже.
768 выдается для вашего расширения - прочитайте про src и srcset и поймете как это работает.
Найдите 768 в /wp-admin/options.php и поставьте 0.
Если 768 не найдете значит это изображение формирует не стандартный wordpress а либо код в активной теме либо какой-то плагин.

[Андрей Филимонов]

Roman: извините, не отписался, в /wp-admin/options.php нет 768
один плагин стоит Gmedia Gallery, но без него никак

[Андрей Филимонов]

деактивировал Gmedia Gallery. то же самое

[Roman]

Андрей Филимонов: /wp-admin/options.php это не через файловый менеджер открывать — это ссылка на страницу в админке. добавьте свой URL впереди

[Андрей Филимонов]

Roman: ага, сделал

удалил и опять залил картинку, и теперь копируется адрес полной ссылки
в исходном коде

<img width="300" height="200" src="https://gymbalance.ru/wp-content/uploads/uspokoit_devochku_posle_gymnastiki-300x200.jpg" class="attachment-medium size-medium wp-post-image" alt="" srcset="https://gymbalance.ru/wp-content/uploads/uspokoit_devochku_posle_gymnastiki-300x200.jpg 300w, https://gymbalance.ru/wp-content/uploads/uspokoit_devochku_posle_gymnastiki.jpg 900w" sizes="(max-width: 300px) 100vw, 300px" />

это значит 300 px картинка стоит? Прочитал про srcset, но копируется то тогда почему ссылка на большую картинку?

[Roman]

Андрей Филимонов:
Сейчас у вас всё нормально в исходном коде - 300-200 и оригинал.
Я копирую ссылку на картинку и получаю картинку 300-200.
Хотите вообще удалить srcset с сайта используйте этот код.

[Андрей Филимонов]

Roman: как у вас копируется 300 px? вот, сейчас нажал правой кнопкой посте, "Копировать ссылку на изображение" и вставляю сюда

https://gymbalance.ru/wp-content/uploads/uspokoit_devochku_posle_gymnastiki.jpg

это же полная версия, если скачать, то скачивается 900х600

[Roman]

[Андрей Филимонов]

Roman: ого, спасибо. Проверил, и у меня в хроме 300 на 200, а в мозиле полная. Кэш сбрасывал

[Андрей Филимонов]

а теперь и в Хроме перестал! что такое