WordPress как на ладони
Шаблоны, плагины и темы для настоящих поклонников Elementor. От TemplateMonster.com wordpress jino

Адаптивная галерея 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 желательно с примером, так как я только учусь, и многого ещё не понимаю

Спасибо за внимание

0
19 дней назад
  • 1
    Maestro31 cайт: bagroup.pro

    Здравствуйте Это поможет решить задачу

    Вот наглядный пример фильтра:

    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;
    }
    Maestro 19 дней назад

    Чуть поправил вывод

    Венер 18 дней назад

    $col_val - не выводится, почему то. То есть элементы имеют class="col-". И не работает теперь выборка размера изображения, всегда работает с исходным размером, в общем буду разбираться, за совет спасибо

    Maestro 18 дней назад

    Странно, у меня выводит но там только для 2-х и 3-х колонок. Код надо дорабатывать, там же можно и передать размер изображения. Посмотрите внимательно код gallery_shortcode: wp-includes/media.php

    Венер 17 дней назад

    Да я разобрался уже, спасибо )

    Комментировать
На вопросы могут отвечать только зарегистрированные пользователи. Вход . Регистрация