При разработке своих сайтов вам может понадобиться вывести галереи изображений из произвольных папок без их загрузки в библиотеку. Давайте рассмотрим пример, как это сделать с помощью шорткода:
add_shortcode( 'folder-gallery', 'theme_folder_gallery' );
function theme_folder_gallery( $atts ) {
// белый список параметров и значения по умолчанию для шорткода
$atts = shortcode_atts( array(
'path' => '',
'columns' => '3',
'alt' => get_the_title(),
), $atts );
$output = '';
// проверяем, что в атрибутах передан путь до изображения (передавать с открывающим слешем)
if ( isset( $atts['path'] ) ) {
if ( $files = scandir( get_stylesheet_directory() . $atts['path'] ) ) {
// разрешенные изображения
$allowed_types = array( 'jpg', 'png', 'gif', 'jpeg', 'webp' );
// классы
$classes = array();
$classes[] = 'masonry-item';
$classes[] = 'col-12';
if ($atts['columns'] == '4') {
$classes[] = 'col-sm-6 col-lg-4 col-xl-3';
} elseif ($atts['columns'] == '3') {
$classes[] = 'col-sm-6 col-lg-4';
} else {
$classes[] = 'col-sm-6';
}
$output .= '<div class="masonry-container">';
$output .= '<div class="row no-gutters masonry-gallery">';
// основной цикл
foreach ( $files as $key => $file ) {
// проверяем, что файл имеет разрешенное разрешение
if ( in_array( pathinfo( $file, PATHINFO_EXTENSION ), $allowed_types) ) {
$image_attributes = getimagesize( get_stylesheet_directory() . $atts['path'] . $file );
$output .= '<div class="' . join(' ', $classes) . '">';
$output .= '<img src="' . get_stylesheet_directory_uri() . $atts['path'] . $file . '" class="masonry-link" alt="' . $atts['alt'] . '" ' . $image_attributes[3] . ' loading="lazy">';
$output .= '</div>';
}
}
$output .= '</div>';
$output .= '</div>';
// подключаем скрипты masonry
wp_enqueue_script( 'masonry' );
$masonry_init = 'jQuery(function($) {
var $container = $(".masonry-gallery");
$container.imagesLoaded( function() {
$container.masonry({
columnWidth: ".masonry-item",
itemSelector: ".masonry-item"
});
});
});';
wp_add_inline_script( 'masonry', $masonry_init );
}
}
return $output;
}
Использование: [folder-gallery path='/data/images/']
Как видите, функция принимает путь до искомой папки (обязательно с открывающим и закрывающим слешем), в функции устанавливаются разрешенные типы изображений и формируется вывод с классами бутстрап-сетки.
Как вы могли заметить, в функции присутствует инициализация masonry. Masonry — это js библиотека, позволяющая сделать одинаковые расстояния между изображениями для визуальной привлекательности. Masonry уже зарегистрирована в ядре WordPress, дополнительно подключать ее не нужно.
Для того чтобы ограничить количество выводимых изображений, вы можете добавить атрибут $atts['count'] = 12
, а в цикле дописать условие, ограничивающее вывод изображений так:
$i = 1;
foreach ( $files as $key => $file ) {
// ....
if ( $i == $atts['count'] ) break;
$i++;
}
В итоге мы получаем вот такую красивую плитку изображений:
