Адаптивная галерея WordPress под Bootstrap
Стандартная галерея формируется след. образом, что негативно сказывается на адаптивной вестке
<div id="gallery-1" class="gallery galleryid-76 gallery-columns-4 gallery-size-thumbnail"> <dl class="gallery-item"> <dt class="gallery-icon portrait"> <a href="***/fondy/fond-numizmatika/______1_20160709_1659127707/" data-slb-active="1" data-slb-asset="345368856" data-slb-internal="99" data-slb-group="76"> <img width="150" height="150" src="***/wp-content/uploads/2018/09/1_20160709_1659127707-150x150.jpg" class="attachment-thumbnail size-thumbnail" alt="" aria-describedby="gallery-1-99"> </a> </dt> <dd class="wp-caption-text gallery-caption" id="gallery-1-99"> Медаль сувенирная. Москва. Панорама бородинской битвы </dd> </dl> </div>
я же хочу чтобы галерея формировалась примерно так
при выборе 3-х колонок
<div class="row"> <div class="col-4"> <img src="" alt=""> </div> <div class="col-4"> <img src="" alt=""> </div> <div class="col-4"> <img src="" alt=""> </div> </div>
при двух
<div class="row"> <div class="col-6"><img src="" alt=""></div> <div class="col-6"><img src="" alt=""></div> </div>
думаю смысл задумки понятен, адаптация галереи в Bootstrap
Как поменять всю эту канитель, на то, что я хочу, в файле functions.php желательно с примером, так как я только учусь, и многого ещё не понимаю
Спасибо за внимание
Здравствуйте Это поможет решить задачу
Вот наглядный пример фильтра:
add_filter('post_gallery', 'my_gallery_output', 10, 2); function my_gallery_output( $output, $attr ){ $ids_arr = explode(',', $attr['ids']); $ids_arr = array_map('trim', $ids_arr ); $pictures = get_posts( array( 'posts_per_page' => -1, 'post__in' => $ids_arr, 'post_type' => 'attachment', 'orderby' => 'post__in', ) ); if( ! $pictures ) return 'Запрос вернул пустой результат.'; // Вывод галереи $out = '<div class="row">'; // Узнаем количество колонок $cols = $attr['columns']; $col_val = 4; // по умолчанию if( $cols == '2' ){ $col_val = '6'; } // При выборе 2-х колонок if( $cols == '3' ){ $col_val = '4'; } // При выборе 3-х колонок // Выводим каждую картинку из галереи foreach( $pictures as $pic ){ global $col_val; $src = $pic->guid; $t = esc_attr( $pic->post_title ); $title = ( $t && false === strpos($src, $t) ) ? $t : ''; $out .= '<div class="col-'. $col_val.'"><a href="'. $src .'"><img src="'. $src .'" alt="'. $title .'" /></a></div>'; } $out .= '</div>'; return $out; }Чуть поправил вывод
$col_val - не выводится, почему то. То есть элементы имеют class="col-". И не работает теперь выборка размера изображения, всегда работает с исходным размером, в общем буду разбираться, за совет спасибо
Странно, у меня выводит но там только для 2-х и 3-х колонок. Код надо дорабатывать, там же можно и передать размер изображения. Посмотрите внимательно код gallery_shortcode: wp-includes/media.php
Да я разобрался уже, спасибо )
Разобрался
add_filter('post_gallery', 'my_gallery_output', 10, 2); function my_gallery_output( $output, $attr ){ $ids_arr = explode(',', $attr['ids']); $ids_arr = array_map('trim', $ids_arr ); $pictures = get_posts( array( 'posts_per_page' => -1, 'post__in' => $ids_arr, 'post_type' => 'attachment', 'orderby' => 'post__in' ) ); if( ! $pictures ) return 'Запрос вернул пустой результат.'; $out = '<div class="row">'; $cols = $attr['columns']; foreach( $pictures as $pic ){ $src = $pic->guid; $t = esc_attr( $pic->post_title ); $title = ( $t && false === strpos($src, $t) ) ? $t : ''; global $col_val; $col_val = 'col-lg-4'; if ( $cols == '1' ): $col_val = 'col-lg-12'; elseif( $cols == '2' ): $col_val = 'col-lg-6'; elseif( $cols == '3' ): $col_val = 'col-lg-4'; elseif( $cols == '4' ): $col_val = 'col-lg-3'; endif; $out .= '<div class="'.$col_val.' mb-4"><a href="'.$src.'"><img class="w-100" src="'. kama_thumb_src('w=350&src='. $src ) .'" alt="'.$title.'" /></a></div>'; } $out .= '</div>'; return $out; }