Как вывести фотографии из произвольного поля в виде слайдера?

Question

[Pestrich]

Есть произвольное поле с типом Галерея, созданное при помощи плагина ACF + ACF Photo Gallery Field. В котором выбираются фотографии для записи. Хочу вывести эти изображения в виде слайдера к каждой записи.

Вот код, отвечающий за вывод фотографий:

<?php
    //Get the images ids from the post_metadata
    $images = acf_photo_gallery('photo_gallery_field', $post->ID);
    //Check if return array has anything in it
    if( count($images) ):
        //Cool, we got some data so now let's loop over it
        foreach($images as $image):
            $id = $image['id']; // The attachment id of the media
            $title = $image['title']; //The title
            $caption= $image['caption']; //The caption
            $full_image_url= $image['full_image_url']; //Full size image url
            $full_image_url = acf_photo_gallery_resize_image($full_image_url, 262, 160); //Resized size to 262px width by 160px height image url
            $thumbnail_image_url= $image['thumbnail_image_url']; //Get the thumbnail size image url 150px by 150px
            $url= $image['url']; //Goto any link when clicked
            $target= $image['target']; //Open normal or new tab
            $alt = get_field('photo_gallery_alt', $id); //Get the alt which is a extra field (See below how to add extra fields)
            $class = get_field('photo_gallery_class', $id); //Get the class which is a extra field (See below how to add extra fields)
	?>
		<div>
		    <div>
		        <?php if( !empty($url) ){ ?><a href="<?php echo $url; ?>" <?php echo ($target == 'true' )? 'target="_blank"': ''; ?>><?php } ?>
		            <img src="<?php echo $full_image_url; ?>" alt="<?php echo $title; ?>" title="<?php echo $title; ?>">
		        <?php if( !empty($url) ){ ?></a><?php } ?>
		    </div>
		</div>
	<?php endforeach; endif; ?>

Как можно выводить изображения в виде слайдера?

Answer 1

[yarovikov]

Фоторама

Comments

[Pestrich]

Не могли бы Вы подсказать где необходимо подключать файлы для Фоторамы?

!-- 1. Link to jQuery (1.8 or later), -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- 33 KB -->

<!-- fotorama.css & fotorama.js. -->
<link  href="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet"> <!-- 3 KB -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script> <!-- 16 KB -->

На обычной верстке все работает, а вот в WordPress теме не получается. Просмотрел каждый файл, но не нашел похожих строк.
Использую тему https://github.com/understrap/understrap.

[Andreaszak]

Pestrich, Файлы подключаются в functions.php функциями wp_enqueue_style() и wp_enqueue_script()

Подробно про подключение стилей и скриптов

Не забудьте про дочерние темы

[Pestrich]

Благодарю всех за помощь, получилось выводить галерею к каждой записи. Осталось только настроить нужное отображение на сайте. С подключением css и js файлов конечно пришлось помучатся, так как по-началу использовал get_template_directory_uri() вместо get_stylesheet_directory_uri() и получалось что брал url из родительской темы, а не из дочерней.

Answer 2

[Александр Пешков]

Вот код с примером Fotorama

<div class="fotorama" data-loop="true" data-nav="thumbs" data-arrows="true" data-click="true"
             data-swipe="true" data-allowfullscreen="true" trackpad="true" data-auto="true" data-fit="scaledown"
             data-allowfullscreen="native" >
             <?php $images = acf_photo_gallery('photos', $post->ID);
                        if (count($images)): ?>
                            <?php foreach ($images as $image): ?>
                                <a href="<?php echo $image['full_image_url']?>"><img src="<?php echo 
                                $image['thumbnail_image_url']?>" alt="<?php the_title()?>"></a>
                            <?php endforeach; ?>
                            <?php endif; ?>
                            <!--                    тут фото карточки-->
                        </div>