Как получить URL каждого индивидуального размера изображения из выделенного изображения

Содержание

Вопрос или проблема
Ответ или решение
Шаг 1: Удаление стандартных размеров изображений
Шаг 2: Определение пользовательских размеров изображений
Шаг 3: Получение URL для пользовательских размеров изображений
Шаг 4: Вставка URL в HTML
Примечания:

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

Я хотел бы получить URL моих пользовательских размеров изображений для выделенного изображения – чтобы я мог условно их использовать.

(это в functions.php)
Сначала я удаляю стандартные размеры обрезки, потому что никогда не использую их.

// удалить все стандартные размеры изображений
function sgr_filter_image_sizes( $sizes) {
    unset( $sizes['thumbnail']);
    unset( $sizes['medium']);
    unset( $sizes['large']);
    return $sizes;
}
add_filter('intermediate_image_sizes_advanced', 'sgr_filter_image_sizes');

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

// добавить пользовательские размеры изображений
function add_custom_image_sizes() {
    add_image_size ( 'small-screen', 700, 350, true );
    add_image_size ( 'medium-screen', 1200, 600, true );
    add_image_size ( 'large-screen', 2000, 1000, true );
    add_image_size ( 'extra-large-screen', 3200, 1600, true );
}
add_action('init', 'add_custom_image_sizes');

Затем в моем HTML/PHP я делаю что-то вроде этого

    <?php if ( has_post_thumbnail() ) { ?>

        <?php $thisPostId = get_post_thumbnail_id(); ?>
        <img src="https://wordpress.stackexchange.com/questions/198740/some-blank-image-of-the-correct-ratio.png"
            data-url-small="<?php echo wp_get_attachment_image_src( $thisPostId, 'small-screen' ); ?>"
            data-url-medium="<?php echo wp_get_attachment_image_src( $thisPostId, 'medium-screen' ); ?>"
            data-url-large="<?php echo wp_get_attachment_image_src( $thisPostId, 'large-screen' ); ?>"
            data-url-extra-large="<?php echo wp_get_attachment_image_src( $thisPostId, 'extra-large-screen' ); ?>"
            alt="">

    <?php } else { ?>

        <img src="http://placehold.it/1600x800/333/&text=No featured image yet" alt="">

    <?php } ?>

Затем в моем JavaScript – я могу выбрать белый URL для использования в зависимости от набора обстоятельств.

Я получаю мягкий отказ, который возвращает полное изображение для каждого.

Это на странице одного пользовательского типа записи и не в цикле.

Итак, я наконец заметил, что то, что я делал, возвращало массив, и что мне нужен был [0] этого массива. Код выглядит некрасиво, но он работает.

<?php
    $thumb_id = get_post_thumbnail_id();
    $small_screen = wp_get_attachment_image_src($thumb_id,'small-screen', true);
    $medium_screen = wp_get_attachment_image_src($thumb_id,'medium-screen', true);
    $large_screen = wp_get_attachment_image_src($thumb_id,'large-screen', true);
    $extra_large_screen = wp_get_attachment_image_src($thumb_id,'extra-large-screen', true);
?>

–

<div class="container hero-w"
    data-background-large="<?php echo $large_screen[0]; ?>"
    data-background-extra-large="<?php echo $extra_large_screen[0]; ?>">

    <div class="inner-w">

        <div class="image-w hero">

            <?php if ( has_post_thumbnail() ) { ?>

                <img src="https://wordpress.stackexchange.com/questions/198740/<?php echo get_template_directory_uri(); ?>/images/2x1.png"
                    data-image-small="<?php echo $small_screen[0]; ?>"
                    data-image-medium="<?php echo $medium_screen[0]; ?>"
                    data-image-large="<?php echo $large_screen[0]; ?>"
                    alt="">

            <?php } else { ?>

                <img src="http://placehold.it/1600x800/333/&text=No featured image yet" alt="">

            <?php } ?>


        </div>

    </div>
</div>

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

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

Шаг 1: Удаление стандартных размеров изображений

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

function sgr_filter_image_sizes( $sizes ) {
    unset( $sizes['thumbnail']);
    unset( $sizes['medium']);
    unset( $sizes['large']);
    return $sizes;
}
add_filter('intermediate_image_sizes_advanced', 'sgr_filter_image_sizes');

Шаг 2: Определение пользовательских размеров изображений

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

function add_custom_image_sizes() {
    add_image_size('small-screen', 700, 350, true);
    add_image_size('medium-screen', 1200, 600, true);
    add_image_size('large-screen', 2000, 1000, true);
    add_image_size('extra-large-screen', 3200, 1600, true);
}
add_action('init', 'add_custom_image_sizes');

Шаг 3: Получение URL для пользовательских размеров изображений

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

Пример кода для работы с изображением:

if (has_post_thumbnail()) {
    $thumb_id = get_post_thumbnail_id();

    // Получаем URL для каждого пользовательского размера изображения
    $small_screen = wp_get_attachment_image_src($thumb_id, 'small-screen', true);
    $medium_screen = wp_get_attachment_image_src($thumb_id, 'medium-screen', true);
    $large_screen = wp_get_attachment_image_src($thumb_id, 'large-screen', true);
    $extra_large_screen = wp_get_attachment_image_src($thumb_id, 'extra-large-screen', true);
}

Шаг 4: Вставка URL в HTML

Когда вы получили все необходимые URL, теперь вы можете вставлять их в свои HTML-элементы, например, используя атрибуты data- для последующего применения в JavaScript.

<div class="container hero-w"
    data-background-large="<?php echo esc_url($large_screen[0]); ?>"
    data-background-extra-large="<?php echo esc_url($extra_large_screen[0]); ?>">

    <div class="inner-w">
        <div class="image-w hero">
            <?php if (has_post_thumbnail()) { ?>
                <img src="https://example.com/path/to/default/image.png"
                    data-image-small="<?php echo esc_url($small_screen[0]); ?>"
                    data-image-medium="<?php echo esc_url($medium_screen[0]); ?>"
                    data-image-large="<?php echo esc_url($large_screen[0]); ?>"
                    alt="">

            <?php } else { ?>
                <img src="http://placehold.it/1600x800/333/&text=No featured image yet" alt="">
            <?php } ?>
        </div>
    </div>
</div>

Примечания:

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

Этот подход позволяет динамически загружать изображения нужного размера и подстраиваться под различные условия в JavaScript, обеспечивая оптимизацию и высокое качество пользовательского опыта.