Как вывести галерею фото в WP?

Ссылка скопирована
HTML PHP Swiper
1 ответ

Делаю галерею на ВП. В ACF добавил поле галерея, все фото добавляются, но как вывести в html? уже все перепробовал, выводятся все классы, кроме src в img, а это как раз то что мне нужно.

<div class="images-product__thumbs swiper">      <div class="thumbs__wrapper swiper-wrapper">                                         <?php                                         global $post;                                          $myposts = get_posts([                                              'numberposts' => -1,                                         ]);                                          if( $myposts ){                                             foreach( $myposts as $post ){                                                 setup_postdata( $post );                                                 ?>                                                  <div class="thumbs__slide swiper-slide">                                                     <div class="thumbs__image">                                                         <img src="<?php echo get_field('gallery_photo') ?>" alt="">                                                     </div>                                                 </div>                                              <?php                                              }                                         }                                          wp_reset_postdata(); // Сбрасываем $post                                         ?>         </div>    </div>

<div class="images-product__thumbs swiper"> <div class="thumbs__wrapper swiper-wrapper"> <?php global $post; $myposts = get_posts([ 'numberposts' => -1, ]); if( $myposts ){ foreach( $myposts as $post ){ setup_postdata( $post ); ?> <div class="thumbs__slide swiper-slide"> <div class="thumbs__image"> <img src="<?php echo get_field('gallery_photo') ?>" alt=""> </div> </div> <?php } } wp_reset_postdata(); // Сбрасываем $post ?> </div> </div>

Дополнительно:

Мы не ищем лёгких путей? Галереи в ВП есть из коробки.

  • Документацию читать пробовали? https://www.advancedcustomfields.com/resources/gallery/

    • Нужно решить такую задачу?

    Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

    Заказать помощь
    Лучший ответ
    1
    Редакция DevOps Ответ

    Если нужно вывести галерею фото в WordPress, сначала решите, откуда берутся изображения: из стандартной галереи Gutenberg, из ACF/метаполя, из вложений записи или из отдельного поля плагина. От этого зависит код.

    Если это обычные вложения записи, можно получить картинки так:

    $images = get_attached_media('image', get_the_ID());
 
if ($images) {
    echo '<div class="post-gallery">';
    foreach ($images as $image) {
        echo '<a href="' . esc_url(wp_get_attachment_image_url($image->ID, 'full')) . '" class="post-gallery__item">';
        echo wp_get_attachment_image($image->ID, 'medium_large', false, [
            'loading' => 'lazy',
        ]);
        echo '</a>';
    }
    echo '</div>';
}

    $images = get_attached_media('image', get_the_ID()); if ($images) { echo '<div class="post-gallery">'; foreach ($images as $image) { echo '<a href="' . esc_url(wp_get_attachment_image_url($image->ID, 'full')) . '" class="post-gallery__item">'; echo wp_get_attachment_image($image->ID, 'medium_large', false, [ 'loading' => 'lazy', ]); echo '</a>'; } echo '</div>'; }

    CSS для сетки:

    .post-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
 
.post-gallery img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 10px;
}
 
@media (max-width: 640px) {
    .post-gallery {
        grid-template-columns: 1fr;
    }
}

    .post-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .post-gallery img { width: 100%; height: 180px; object-fit: cover; border-radius: 10px; } @media (max-width: 640px) { .post-gallery { grid-template-columns: 1fr; } }

    Если нужен именно слайдер, Swiper подключается отдельно: HTML-структура должна быть swiper, swiper-wrapper, swiper-slide. Но не ставьте слайдер только ради трёх картинок: обычная CSS-сетка быстрее и проще.

    Для лайтбокса лучше использовать уже подключённый на сайте lightbox-плагин или лёгкую библиотеку. Не открывайте полноразмерные изображения просто в новой вкладке, если нужна галерея с пролистыванием. В ссылке ставьте полный размер, а в карточке выводите thumbnail/medium, чтобы не грузить тяжёлые картинки сразу.

    Если изображения задаются в ACF Gallery, берите ID и выводите через wp_get_attachment_image(). Так WordPress сам подставит srcset, alt, width/height и lazy loading. Это лучше, чем вручную писать <img src="...">.

    Другие ответы (0)

    Пока нет других ответов. Будьте первым, кто поможет автору.

    Ответить на вопрос

    комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *

    Вам также может быть интересно

    VPN Как правильно настроить vless для Android TV? 1 ответ Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ SMM Из-за чего не сохраняется видео в мобильной программе blackmagic? 1 ответ