Поля повторителя ACF и Clearfix / Styling при отображении - PullRequest
Новая
       72

Поля повторителя ACF и Clearfix / Styling при отображении

1 голос
/ 08 июля 2020
• 1000 любые идеи

Вот ситуация, сначала «предыстория»;

Обычно я работаю в Wordpress & Bootstrap. Я нашел здесь некоторый код, который помогает мне форматировать тип сообщения, чтобы я мог использовать тип сообщения в качестве галереи (например) и запустить в нем clearfix, чтобы привести в порядок каждую строку по мере ее продвижения и предотвратить столкновение изображений друг с другом. Это то, что я использовал 

<?php $args=array(
'post_type' => ‘post-name',
'posts_per_page'      => '100',
'orderby'=> 'date', 'order' => 'ASC' );
$my_query = null;
$my_query = new WP_Query($args);

if( $my_query->have_posts() ) {

$i = 0;
while ($my_query->have_posts()) : $my_query->the_post();
// modified to work with 3 columns
// output an open <div>
if($i % 4 == 0) { ?> 

<div class="row">

<?php }?>

IMAGE / CONTENT THAT REPEATS GOES IN HERE

<?php $i++; if($i != 0 && $i % 4 == 0) { ?>

</div>
<div class="clearfix"></div>

<?php } ?>
<?php endwhile;} wp_reset_query(); ?>

Как я уже сказал, это применяет clearfix div и устанавливает права на конец строки, когда изображение могло бы иначе нарушить поток страницы. Все идет нормально. Вот где возникает проблема.

Совсем недавно я использовал настраиваемое поле 'Repeater' плагина Advanced Custom Fields (где вы можете просто продолжать складывать изображения в стек, но они не введите сообщение так же, как указано выше) это то, что я использую, чтобы вытащить это в 

<?php if(get_field(‘repeater-field-name')): ?>
<?php while(has_sub_field('repeater-field-name')): ?>

IMAGE / CONTENT THAT REPEATS GOES IN HERE

<?php endwhile; ?>
<?php endif; ?>

И это тоже отлично работает. Итак, моя борьба в основном сводится к объединению повторяющегося кода поля с кодом clearfix.

Есть ли простой способ изменить код clearix, чтобы включить в него поля повторителя? Есть ли лучший способ сделать это?

Любая помощь, в основном, приветствуется.

Спасибо!

ИЗМЕНИТЬ - ДЛЯ ДОПОЛНИТЕЛЬНОЙ ИНФОРМАЦИИ ЗДЕСЬ ФАКТИЧЕСКИЙ КОД I ​​' M ПЫТАЯСЬ РАБОТАТЬ, В ЭТОМ СЛУЧАЕ ЭТО НЕ ТИП POST, ПРОСТО ИСПОЛЬЗУЕТ ПОВТОРИТЕЛИ ПОЛЯ; Это код, который я пытаюсь заставить работать. Это не тип сообщения, это поле повторителя, поэтому оно будет повторяться без какого-либо стиля, как в примере выше (2-й блок кода). Итак, в двух словах, я пытаюсь применить бесконечное исправление (например, 1-й блок кода, который я использую для типов сообщений) к полю повторителя. Я пытался совместить их. Возможно, я иду по неправильному пути? 

<div class="container">
 <div class="row">
  <div class="main_cbrand roomy-100 gallery">

<?php if(get_field('artwork')): ?>
<?php while(has_sub_field('artwork')): ?>

<?php if( get_sub_field('image') ): ?>

<div class="col-md-2 col-sm-4 col-xs-6" style="padding-bottom: 20px;">
<a title="<?php the_sub_field('title'); ?>" href="<?php the_sub_field('image');             ?>"><img src="<?php the_sub_field('image'); ?>" alt="<?php the_sub_field('title');   ?>" title="<?php the_sub_field('title'); ?>"></a>
  </div>

<?php endif; ?>
<?php endwhile; ?><?php endif; ?> 
</div>
</div>
</div>

1 Ответ

0 голосов
/ 08 июля 2020

Обычно вы можете go организованным способом;) - пример: 

<?php 
$args = array(
    'post_type'     => 'post',
    'posts_per_page'=> '100',
    'orderby'       => 'date', 
    'order'         => 'ASC' 
);
$query = new WP_Query($args);


// The Loop
if ( $query->have_posts() ) {
    while ( $query->have_posts() ) {
        $query->the_post();
        

        // collect item data
        $pid = get_the_ID();
        $rpt = get_field('some_name', $pid);

        // build repeater data
        $counter = 0;
        $rptData = '';
        if( !empty($rpt) ) {
            foreach($rpt as $item) {

                // 4 condition
                $rtpData .= ($counter % 4 == 0 ? '<div class="row">' : '');
                
                // make what you want with info inside the item here
                $rptData .= '<div class="col-md-3">'.$item['something'].'</div>'; 

                $rtpData .= ($counter % 4 == 0 ? '</div><div class="clearfix"></div>' : '');

                $counter++;
            }
        };


        echo '
        <div>
            <h3>I AM THE WRAPPER</h3>
            <div class="container">
                '.$rptData.'
            </div>
        </div>
        ';
    }
}
/* Restore original Post Data */
wp_reset_postdata();
?>

. РЕДАКТИРОВАТЬ: 1-й. Причина, по которой вам даже нужен clearfix, заключается в том, что div .row не является прямым родительским элементом этих столбцов. В противном случае вам не понадобится clearfix.

Я не понимаю, как это работает .. 'the_sub_field (' image ')' вы уверены?

если вы действительно думаете об этом, разные разрешения будут иметь разное количество столбцов в строках, так как поможет clearfix? (см. 1-й комментарий)

Тем не менее .. Здесь идет;) 

<div class="container">
    <div class="row">
        <div class="main_cbrand roomy-100 gallery">

            <?php 
            if(get_field('artwork')){

                $counter = 0;

                while(has_sub_field('artwork')) { 
                    ?>

                    <?php if( get_sub_field('image') ): ?>

                        <div class="col-md-2 col-sm-4 col-xs-6" style="padding-bottom: 20px;">
                            <a title="<?php the_sub_field('title'); ?>" href="<?php the_sub_field('image'); ?>">
                                <img src="<?php the_sub_field('image'); ?>" alt="<?php the_sub_field('title');   ?>" title="<?php the_sub_field('title'); ?>">
                            </a>
                        </div>

                        <?php echo ($counter % 4 == 0 ? '<div class="clearfix"></div>' : ''); ?>


                    <?php endif; ?>
                    
                    <?php 
                    $counter++;
                }
            } 
            ?> 
        </div>
    </div>
</div>

Вы можете изменить частоту его появления в этой строке 

echo ($counter % 4 == 0 ? '<div class="clearfix"></div>' : '');
...