WordPress изображения, которые будут показаны с col-md-4
Привет всем, у меня есть несколько изображений, загруженных в пользовательский тип записи в качестве избранного изображения в котором я пытаюсь подключиться начальная загрузка с WordPress и отображать изображения рядом Col-мкр-4. но когда я это делаю, он отображает изображения в новом ROW, а не col-md-4
код …
<?php $loop = new WP_Query( array( 'post_type' => 'portfolio_col_image', 'orderby' => 'post_id' ) );
while($loop->have_posts()) : $loop->the_post(); ?>
<?php
// Must be inside a loop.
if ( has_post_thumbnail() ) { ?>
<div class = "portfolio-column-box">
<div class = "container">
<div class = "col-md-4">
<?php the_post_thumbnail('large', array( 'class' => 'img-thumbnail' ) ); ?>
</div>
</div>
</div>
<?php };
?>
</div>
</div>
<?php endwhile; ?>
Решение
У вас проблема с циклом, контейнер должен быть снаружи, пока цикл
<div class = "container">
<?php $loop = new WP_Query( array( 'post_type' => 'portfolio_col_image', 'orderby' => 'post_id' ) );
while($loop->have_posts()) : $loop->the_post(); ?>
<?php
// Must be inside a loop.
if ( has_post_thumbnail() ) { ?>
<div class = "portfolio-column-box">
<div class = "col-md-4">
<?php the_post_thumbnail('large', array( 'class' => 'img-thumbnail' ) ); ?>
</div>
</div>
</div>
<?php };
?>
</div>
<?php endwhile; ?>
</div>
вышеприведенное решение основано на версии начальной загрузки 3
если вы используете bootstrap 4, то вам нужно также включить «row», как показано ниже
<div class="container">
<div class="row">
//your loop here
Другие решения
Вы использовали строка вне col-md-4 ??
Bootstrap 4 использует «Flex» для разделения на столбцы, поэтому нам нужно использовать строка Перед использованием седло
Предыдущая версия начальной загрузки использовала float для седло так что это будет работать без строка.
<div class = "portfolio-column-box">
<div class = "container">
<div class="row">
<?php
$loop = new WP_Query( array( 'post_type' => 'product', 'orderby' => 'post_id' ) );
while($loop->have_posts()) : $loop->the_post();
// Must be inside a loop.
if ( has_post_thumbnail() ) { ?>
<div class = "col-md-4">
<?php the_post_thumbnail('large', array( 'class' => 'img-thumbnail' ) ); ?>
</div>
<?php };
endwhile; ?>
</div>
</div>
</div>
Надеюсь, это исправит вашу проблему.
Вы указываете Col-мкр-4 который покажет 3 столбца в строке (подробности), и когда в каждой строке будет по 3 столбца, новая строка должна динамически начинаться, и изображение будет отображаться в правильной сетке. Попробуйте код ниже и посмотрите
<?php
$loop = new WP_Query( array( 'post_type' => 'portfolio_col_image', 'orderby' => 'post_id' ) );
$i = 0;
?>
<div class="row">;
<?php
while($loop->have_posts()) : $loop->the_post();
?>
<div class="vc_col-md-4">
<?php
//print your image here
?>
</div>
<?php
$i++;
if ($i % 3 == 0) {
?>
</div><div class="row">
<?php
}
endwhile;
?>
</div>