Как сделать добавление картинок в слайдер(slider syncing slick) через WP?

Question

[freeman0204]

https://codepen.io/mahmoudzohdi/pen/WrOJPv есть такой пример slider syncing slick. Если бы это был просто Single Item или даже Multiple Items я бы смог вывести его через цикл WP_Query{} через кастомный тип записи например. Но в slider syncing slick немного другая структура. Есть блок с большой картиной и отдельно с маленькими. Как это все добро можно вывести через цикл что бы я смог просто добавлять картинку через кастомный тип записи, как миниатюру или через ACF как image? Возможно нужно 2 цикла? Хочу понять суть.

Answer 1

[zorca]

Берем обычную стандартную галерею Wordpress, добавляем туда нужные картинки, затем кидаем в котелок немного магии:

function parse_gallery_images($content) {
    $attachment_ids = [];
    $pattern = get_shortcode_regex();
    $images = [];
    if (preg_match_all( '/'. $pattern .'/s', $content, $matches ) ) {
        //finds the "gallery" shortcode and puts the image ids in an associative array at $matches[3]
        $count = count($matches[3]);      //in case there is more than one gallery in the post.
        for ($i = 0; $i < $count; $i++){
            $atts = shortcode_parse_atts( $matches[3][$i] );
            if ( isset( $atts['ids'] ) ){
                $attachment_ids = explode( ',', $atts['ids'] );
                $attachementsCount = count($attachment_ids);
                if ($attachementsCount > 0){
                    for ($j = 0; $j < $attachementsCount ; $j++) {
                        $image = [];
                        $attachmentId = intval($attachment_ids[$j]);
                        $image['id'] = $attachmentId;
                        $image['full'] = wp_get_attachment_image_src($attachmentId, 'full');
                        $image['medium'] = wp_get_attachment_image_src($attachmentId, 'medium');
                        $image['thumbnail'] = wp_get_attachment_image_src($attachmentId, 'thumbnail');
                        array_push($images, $image);
                    }
                }
            }
        }
    }
    return $images;
}

И получаем на выходе массив картиночек, готовых для внедрения во фронтенд.

Comments

[freeman0204]

Т.е. картинки нужно будет добавлять через галерею WP? Код выше нужно писать в function? Как тогда вывести эти картинки в структуре слайдера?

[zorca]

Ну слайдер у вас используется в определенном месте. У меня они добавлены через касотмные поля и в шаблоне Twig выводятся через контекст:

$context['slider'] = parse_gallery_images(carbon_get_the_post_meta('slider_field'));
$context['gallery'] = parse_gallery_images(carbon_get_the_post_meta('gallery_field'));

Это контроллер.
И в шаблоне:

{% if gallery %}
            <div class="gallery row">
              {% for gallery_item in gallery %}
                <a class="gallery__item" data-lightbox="example-set" data-title="" href="{{ gallery_item.full.0 }}">
                  <img src="{{ fn('get_template_directory_uri') }}/assets/images/remove_border_from_img.png" class="gallery__image" style="background-image:url({{ gallery_item.full.0 }})" alt="{% if subtitle %}{{subtitle}}{% else %}{{title}}{% endif %}" title="{% if subtitle %}{{subtitle}}{% else %}{{title}}{% endif %}">
                </a>
              {% endfor %}
            </div>
{% endif %}

Вживую это работает тут: https://www.naamanewman.co.il/en/make-up/evening-s...

[zorca]

Если хотите реализовать через ACF, то там тупо есть галерея.

[freeman0204]

zorca, Спасибо, попробую.