Question

我想更改网站上视频网格的布局。这是Wordpress。

目前，PHP以两行的3/2布局显示网格，然后根据您选择显示的视频数量进行复制。

我理解代码足以知道我们设置5，并分成3/2。我可以将它设置为6并分成3/3或4/2 .....等等

但是我需要更改布局，所以我们有一行3，然后是3，但第二行的前两行堆叠在彼此的顶部1/3宽度和第三个2/3宽度。如下。

执行布局的当前PHP :(我知道CSS可能必须更改，但我可以这样做）

<article class="col-1-<?php if(($i%5==0)||(($i+1)%5==0)){ echo "2"; } else { echo "3"; } ?>" id="post-<?php echo $page->ID; ?>">

完整区块：

<article class="col-1-<?php if(($i%5==0)||(($i+1)%5==0)){ echo "2"; } else { echo "3"; } ?>" id="post-<?php echo $page->ID; ?>">  

                <a href="<?php echo get_page_link($page->ID); ?>">

                <?php if ( $detect->isMobile() ) {

                    if (has_post_thumbnail( $page->ID ) ){ ?>

                    <img src="<?php echo $image[0]; ?>" alt="<?php echo $title; ?>" width="160" height="90">     

                    <?php } ?>

                <?php } else { ?>

                    <?php if(get_field('looping_thumb_preview', $page->ID)){ ?>
                   <video playinline preload="auto" loop="yes">
                          <source src="<?php echo get_field('looping_thumb_preview', $page->ID); ?>" type="video/mp4">
                          Your browser does not support the video tag.
                    </video>
                <?php } else if(get_field('looping_thumb', $page->ID)){ ?>

                        <video playinline preload="auto" loop="yes">
                                      <source src="<?php echo get_field('looping_thumb', $page->ID); ?>" type="video/mp4">Your browser does not support the video tag.</video>

                             <?php } else if (has_post_thumbnail( $page->ID ) ){ ?>

                            <img src="<?php echo $image[0]; ?>" alt="<?php echo $title; ?>">     

                            <?php } else { ?>

                                <img src="<?php bloginfo( 'template_url' ); ?>/images/blank.png" alt="<?php echo $title; ?>">  

                            <?php } ?>

                        <?php } ?>

                            <div class="center-content">

                                 <h1<?php if(get_field('subtitle', $page->ID)){ echo ' class="hassubtitle"';} else { echo ' class="nosubtitle"'; }?>><?php echo $title;?></h1>
                                 <div class="underline"></div>

                                <?php if(get_field('subtitle', $page->ID)) { echo "<h2>" . get_field('subtitle', $page->ID) . "</h2>"; } 

                            ?>

                            </div>

                        </a>

                    </article>

提前感谢您提供任何帮助

Wordpress PHP网格布局演示文稿

0 个答案: