Как получить все изображения в медиагалерее с постраничной навигацией?

Содержание

Вопрос или проблема
Ответ или решение
Шаги для реализации пагинации изображений
1. Подготовка аргументов для WP_Query
2. Объяснение кода
3. Интеграция с Infinite Scroll
Заключение

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

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

Бесконечный скроллинг работает, но он берет количество постов, а не изображений. Это означает, что если у меня 6 постов, а “Блоговые страницы показывают максимум” равен 2, количество страниц будет 3, даже если у меня есть больше изображений для загрузки.

Я также использую FoundationPress в качестве фреймворка, если это поможет.

Вот мой код:

<?php

            $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
            $args = array(
                'posts_per_page' => 10,
                'post_type' => 'attachment',
                'paged'     => $paged
            );

            $attachments = get_posts( $args );
            if ( $attachments ) {
                foreach ( $attachments as $attachment ) {
                    $ia = wp_get_attachment_image_src( $attachment->ID, 'full' );
                    ?>
                    <div class="grid__item">
                        <figure width="<?php echo $ia[1]; ?>" height="<?php echo $ia[2]; ?>">
                            <?php echo wp_get_attachment_image( $attachment->ID, 'full' ); ?>
                        </figure>
                    </div>
                    <?php 
                }
            }

            ?>

ИЗМЕНЕНИЕ: Я не прочитал ваш код должным образом, извините!

Вы используете get_posts, который будет извлекать только посты. Чтобы получить все изображения из медиатеки, вам нужно использовать WP_Query.

$query_images_args = array(
    'post_type' => 'attachment',
    'post_mime_type' =>'image',
    'post_status' => 'inherit',
    'posts_per_page' => -1,
);

$query_images = new WP_Query( $query_images_args );
$images = array();
foreach ( $query_images->posts as $image) {
    $images[]= wp_get_attachment_url( $image->ID );
}

Этот код поместит все URL изображений из медиатеки в массив $images.

сссылка: https://wpeden.com/tipsntuts/list-all-images-at-media-gallery-in-your-wordpress-site/

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

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

Шаги для реализации пагинации изображений

1. Подготовка аргументов для WP_Query

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

$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array(
    'post_type' => 'attachment',
    'post_mime_type' => 'image',
    'post_status' => 'inherit',
    'posts_per_page' => 10, // Здесь вы задаете количество изображений на странице
    'paged' => $paged,
);

$query_images = new WP_Query($args);

if ($query_images->have_posts()) {
    while ($query_images->have_posts()) {
        $query_images->the_post();
        $image_url = wp_get_attachment_url(get_the_ID());
        $image_data = wp_get_attachment_image_src(get_the_ID(), 'full');
        ?>
        <div class="grid__item">
            <figure width="<?php echo esc_attr($image_data[1]); ?>" height="<?php echo esc_attr($image_data[2]); ?>">
                <img src="<?php echo esc_url($image_url); ?>" alt="<?php the_title(); ?>" />
            </figure>
        </div>
        <?php
    }
    // Вставляем пагинацию
    ?>
    <div class="pagination">
        <?php
        echo paginate_links(array(
            'current' => $paged,
            'total'   => $query_images->max_num_pages,
        ));
        ?>
    </div>
    <?php
} else {
    echo '<p>' . __('Нет изображений в медиагалерее.', 'text-domain') . '</p>';
}

wp_reset_postdata();

2. Объяснение кода

Пагинация: Переменная $paged считывает текущую страницу из URL. Это необходимо для корректной работы пагинации.
Аргументы запроса: Мы используем post_type => 'attachment' и post_mime_type => 'image', чтобы получить только изображения из медиагалереи. Убедитесь, что posts_per_page соответствует числу изображений, которые вы хотите загрузить за один раз.
Цикл WP_Query: С помощью цикла вы можете пройтись по всем изображениям, получая их URL и атрибуты.
Пагинация: После вывода изображений добавляется пагинация с помощью функции paginate_links(), которая генерирует ссылки для навигации между страницами.

3. Интеграция с Infinite Scroll

Для добавления функции "бесконечной прокрутки" используйте библиотеку Infinite Scroll. Убедитесь, что ваше JavaScript-событие триггерит новые запросы к серверу по мере прокрутки страницы. Примерная настройка может выглядеть так:

jQuery(function($) {
    $('.grid').infiniteScroll({
        path: '.pagination a.next',
        append: '.grid__item',
        history: false,
    });
});

Убедитесь, что вы адаптируете селекторы и остальную часть конфигурации под свою разметку.

Заключение

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