отображение размера изображения на экране медиабиблиотеки

Вопрос или проблема

add_filter('manage_upload_columns', 'size_column_register');

function size_column_register($columns) {

    $columns['dimensions'] = 'Размеры';

    return $columns;
}

add_action('manage_media_custom_column', 'size_column_display', 10, 2);

function size_column_display($column_name, $post_id) {

    if( 'dimensions' != $column_name || !wp_attachment_is_image($post_id)) return;

    list($url, $width, $height) = wp_get_attachment_image_src($post_id, 'full');

    echo esc_html("{$width}×{$height}");
}

add_filter( 'manage_media_columns', 'sk_media_columns_filesize' );
/**
 * Фильтр столбцов таблицы списка медиа для добавления столбца размера файла.
 *
 * @param array $posts_columns Существующий массив столбцов, отображаемых в таблице списка медиа.
 * @return array Измененный массив столбцов, который будет отображаться в таблице списка медиа.
 */
function sk_media_columns_filesize( $posts_columns ) {
    $posts_columns['filesize'] = __( 'Размер файла', 'my-theme-text-domain' );

    return $posts_columns;
}

add_action( 'manage_media_custom_column', 'sk_media_custom_column_filesize', 10, 2 );
/**
 * Отображение пользовательского столбца размера файла в таблице списка медиа.
 *
 * @param string $column_name Название пользовательского столбца.
 * @param int    $post_id Текущий ID вложения.
 */
function sk_media_custom_column_filesize( $column_name, $post_id ) {
    if ( 'filesize' !== $column_name ) {
        return;
    }

    $bytes = filesize( get_attached_file( $post_id ) );

    echo size_format( $bytes, 2 );
}

add_action( 'admin_print_styles-upload.php', 'sk_filesize_column_filesize' );
/**
 * Настройка столбца размера файла на странице медиатеки в админке WP
 */
function sk_filesize_column_filesize() {
    echo
    '<style>
        .fixed .column-filesize {
            width: 10%;
        }
    </style>';
}

Ответ или решение

Как отобразить размер изображения в медиа-библиотеке WordPress

Введение

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

Шаг 1: Добавление столбца с размерами изображений

Первый шаг заключается в добавлении столбца, который будет отображать размеры изображений (ширина и высота) в медиа-библиотеке. Для этого необходимо использовать хук manage_upload_columns для добавления нового столбца и хук manage_media_custom_column для заполнения этого столбца значениями.

Вот пример кода:

add_filter('manage_upload_columns', 'size_column_register');

function size_column_register($columns) {
    $columns['dimensions'] = 'Размеры'; // Заголовок столбца
    return $columns;
}

add_action('manage_media_custom_column', 'size_column_display', 10, 2);

function size_column_display($column_name, $post_id) {
    if ('dimensions' != $column_name || !wp_attachment_is_image($post_id)) return;

    list($url, $width, $height) = wp_get_attachment_image_src($post_id, 'full');
    echo esc_html("{$width}×{$height}"); // Отображаем размеры
}

• Объяснение кода:
  • Функция size_column_register добавляет новый столбец под названием "Размеры".
  • Функция size_column_display проверяет, является ли текущая запись изображением, и, если это так, извлекает ширину и высоту с помощью функции wp_get_attachment_image_src.

Шаг 2: Добавление столбца с размером файла

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

Вот пример кода для добавления столбца с размером файла:

add_filter('manage_media_columns', 'sk_media_columns_filesize');

function sk_media_columns_filesize($posts_columns) {
    $posts_columns['filesize'] = __('Размер файла', 'my-theme-text-domain');
    return $posts_columns;
}

add_action('manage_media_custom_column', 'sk_media_custom_column_filesize', 10, 2);

function sk_media_custom_column_filesize($column_name, $post_id) {
    if ('filesize' !== $column_name) {
        return;
    }

    $bytes = filesize(get_attached_file($post_id));
    echo size_format($bytes, 2); // Отображаем размер файла в человекочитаемом формате
}

add_action('admin_print_styles-upload.php', 'sk_filesize_column_filesize');

function sk_filesize_column_filesize() {
    echo '<style>
        .fixed .column-filesize {
            width: 10%; // Устанавливаем ширину столбца
        }
    </style>';
}

• Объяснение кода:
  • Функция sk_media_columns_filesize добавляет новый столбец с заголовком "Размер файла".
  • Функция sk_media_custom_column_filesize вычисляет и отображает размер файла в более удобочитаемом формате.
  • Наконец, в CSS добавляем стиль для настройки ширины нового столбца.

Заключение

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

Создавайте качественный контент, улучшайте взаимодействие с пользователями и оптимизируйте ваш сайт, добавляя полезные функциональности, такие как отображение размеров изображений и их веса.