I need to reproduce this grid to show :
2 products / 1 empty box in the 1st line
and
1 product / 2 empty boxes in the 2nd line
and so on.
My actual code does show only one product per line :
$i=1;
if ( $query->have_posts() ) {
while ( $query->have_posts() ) : $query->the_post(); ?>
<div class="row">
<?php if ($i % 3 == 0) { ?>
<div class="projet-bloc-empty col-md-4"><div></div></div>
<div class="projet-bloc-empty col-md-4"><div></div></div>
<?php } ?>
<div class="projet-bloc col-md-4">
<a href="<?php echo $post->post_name ?>" title="<?php echo $post->post_title ?>">
<?php echo get_the_post_thumbnail($post->ID); ?>
</a>
</div>
<?php if ($i % 3 !== 0) { ?>
<div class="projet-bloc-empty col-md-4"><div></div></div>
<div class="projet-bloc-empty col-md-4"><div></div></div>
<?php } ?>
</div>
<?php $i++; endwhile; ?>
<?php }
Maybe somethink like this:
$space = '<div class="projet-bloc-empty col-md-4"><div></div></div>';
$i=1;
if ( $query->have_posts() ) {
while ( $query->have_posts() ) : $query->the_post();
<div class="row">
<?php if ($i % 3 == 0) echo $space.$space.$space; ?>
<div class="projet-bloc col-md-4">
<a href="<?php echo $post->post_name ?>" title="<?php echo $post->post_title ?>">
<?php echo get_the_post_thumbnail($post->ID); ?>
</a>
</div>
</div>
<?php $i++; endwhile; ?>
<?php }
Related
I created a custom grid to have this display :
Now i need to add an id (with an incremental number) to every row so i can use it as anchor. I tried to regroup every three blocs in one div but i couldn't do it.
<?php
if ( $query->have_posts() ) {
while ( $query->have_posts() ) : $query->the_post(); ?>
<?php if ($i % 3 == 0) { ?>
<div class="projet-bloc-empty col-md-4"><div></div></div>
<div class="projet-bloc-empty col-md-4"><div></div></div>
<div class="projet-bloc-empty col-md-4"><div></div></div>
<?php } ?>
<div class="projet-bloc col-md-4">
<a href="<?php echo $post->post_name ?>" title="<?php echo $post->post_title ?>">
<?php echo get_the_post_thumbnail($post->ID); ?>
</a>
</div>
<?php $i++; endwhile; ?>
<?php } ?>
I'm using Bootstrap, I have a list of posts and I want to wrap every 2 posts on a row. Each post is wrapped on a <div col>. You can see live here.
I tried with this but it wrap the row each one post:
<?php
$num = 0;
// Check if there are any posts to display
if ( have_posts() ) : ?>
<?php
// The Loop
while ( have_posts() ) : the_post();
if($num%2) {
echo "<div class='row' style='margin-bottom: 2.3em;''>";
}
?>
<div class="col-xs-12 col-sm-6 col-md-6">
<h2 class="category-encabezado">
<a href="<?php the_permalink() ?>" rel="bookmark" title="Enlace a <?php the_title_attribute(); ?>">
<?php the_title(); ?>
</a>
</h2>
<small>Hace
<?php echo human_time_diff( get_the_time('U'), current_time('timestamp') ) . ''; ?>
</small>
<div class="entry">
<p>
<?php the_excerpt(); ?>
</p>
<?php
$my_shortcode = get_field('audio-field');
echo do_shortcode( $my_shortcode );
?>
</div>
</div>
<?php
if($num %2) {
echo '</div>';
}
$num++
?>
<?php endwhile; // End Loop
?>
</div>
<?php
You have to put div.row Out of the Loop while
I want Every Four Cfcolumns Wrapped in One Div Container having a Class
here is my While Loop in Index Page:
<div id="left-area" style="padding-top: 58px;">
<!-- #custom-area -->
<?php while ( have_posts() ) : the_post(); ?>
<div class="cfcolumn">
<a href="<?php echo get_field('upload_pdf_book'); ?>"> <img src="<?php echo get_field('cover_picture'); ?>" alt="<?php
the_title(); ?>" >
</a>
</div>
<?php endwhile; // end of the loop. ?>
<!-- #custom-area -->
</div> <!-- #left-area -->
I guess if you don't want to learn modulus - you can just reset your counter.
<div id="left-area" style="padding-top: 58px;">
<!-- #custom-area -->
<?php
//Initiate the counter
$counter = 0; ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php
//add 1 to the counter
$counter++;
//If the counter = 4, then spit out the HMTL
if($counter == 4): ?>
<div class="whateverClassWrapper">
<?php endif; ?>
<div class="cfcolumn">
<a href="<?php echo get_field('upload_pdf_book'); ?>">
<img src="<?php echo get_field('cover_picture'); ?>" alt="<?php
the_title(); ?>" >
</a>
</div>
<?php
//close the HTML tag initiated by your counter
if($counter == 4): ?>
</div>
<?php
//Reset the counter
$counter = 0;
endif; ?>
<?php endwhile; // end of the loop. ?>
<!-- #custom-area -->
</div> <!-- #left-area -->
This should work - but haven't tested it.
You can setup a counter to count the current loop, then check if its divisible by 4 to insert and close the container before and after your content.
<div id="left-area" style="padding-top: 58px;">
<?php $i = 1; ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php if( $i % 4 == 0 ): ?>
<div class="container">
<?php endif; ?>
<div class="cfcolumn">
<a href="<?php echo get_field('upload_pdf_book'); ?>"> <img src="<?php echo get_field('cover_picture'); ?>" alt="<?php
the_title(); ?>" >
</a>
</div>
<?php if( $i % 4 == 0 ): ?>
</div> <!-- close the container -->
<?php endif; ?>
<?php $i++; ?>
<?php endwhile; ?>
</div>
You can also use the current_post property of $WP_Query, like so:
<?php
$args = array(
'post_type' => 'page',
'posts_per_page' => 5
);
$loop = new WP_Query($args);
while ($loop->have_posts()) :
$loop->the_post();
if ($loop->current_post % 4 == 0) {
echo '<div class="container">';
echo '<div class="cfcolumn">';
//more code here
echo '</div>';
echo '</div>';
}
else {
echo '<div class="cfcolumn">';
//more code here
echo '</div>';
}
echo '</div>';
endwhile; wp_reset_postdata();
?>`
I am currently creating a slider which consists of products.
Currently I have managed to wrap every 2 items in div using this code:
<div class="frame crazy" id="crazy">
<div class="slidee">
<?php if ( $myposts->have_posts() ) :
$i = 0;
while ( $myposts->have_posts() ) : $myposts->the_post();
$image = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_id() ), 'single-post-thumbnail' );
$value = get_field( "alternate_image", get_the_id() );
$titl = get_field( "title", get_the_id() );
$big = get_field( "big_section", get_the_id() );
if ( $i % 2 == 0) : ?>
<div class="op" <?if ($big==1){?>style="width:850px !important;"<?}?>>
<?php endif;
$_pf = new WC_Product_Variable(get_the_id());
$variations = $_pf->get_available_variations();
$vrt = count($variations);
?>
<div data-hv="<?php echo $value; ?>" data-titleContent="<a href='<?php echo get_the_permalink();?>'><?php echo get_the_title(); ?></a>" data-tipso-content="<span class='varaition'>this item has <?php echo $vrt; ?> variation(s)</span><a class='bty' href='<?php echo get_the_permalink(); ?>'>details</a>" data-url="<? echo the_permalink(); ?>" class="cola <?php if($big==1){?>big<?}?>" style="background-image: url('<?php echo $image[0]; ?>')" data-mg="<?php echo $image[0];?>">
<?php if($titl==1) { ?>
<h2><a href='<?php echo get_the_permalink();?>'><?php echo get_the_title(); ?></a></h2>
<p class="slu"><a href='<?php echo get_the_permalink();?>'>shop now ></a> </p>
<?php } ?>
</div>
<?php if ( $i % 2 != 0 ) : ?>
</div>
<?php endif; ?>
<?php $i++; endwhile; ?>
<?php if ( $i % 2 != 0 ) : ?>
</div>
<?php endif; ?>
<?php endif;?>
</div>
</div>
This code wraps every two products like this:
<div class="op">
<div class="product1">
//content
</div>
<div class="product2">
//content
</div>
</div>
<div class="op">
<div class="product3">
//content
</div>
<div class="product4">
//content
</div>
</div>
But I need to fetch custom number of posts according to product meta. So that the number of products can be varying like this:
<div class="op">
<div class="product1">
//content
</div>
<div class="product1">
//content
</div>
<div class="product1">
//content
</div>
<div class="product1">
//content
</div>
<div class="op">
<div class="product1">
//content
</div>
<div class="product1">
//content
</div>
</div>
Is it possible using product meta or any better idea?
this line in your code:
if ( $i % 2 == 0) : ?>
contains the loop number, change that to be a variable and set that variable from the meta data, so:
$loopmeta=metadata_retriever();
if ( $i % $loopmeta == 0 ) : ?>
You will have to write the metadata_retriever() function and put some error checking around the retrieval of the $loopmeta variable to ensure it comes back as a valid integer (not 0, nor 12.735 for instance :-) )
I've been trying (with little success) to wrap every 12 rows (.client-item) outputted by Advance Custom Fields Repeater field with an < li >.
Any help is appreciated!
Below is the basic code:
<?php
if( have_rows('clients') ): ?>
<?php while( have_rows('clients') ): the_row();
// vars
$logo = get_sub_field('client_logo');
$project = get_sub_field('project_image');
$link = get_sub_field('cleint_link');
$clientName = get_sub_field('client_name');
$contracted = get_sub_field('bartle_work');
?>
<?php if($counter % 12 === 0) : echo '<li>'; endif; ?>
<div class="clearfix client-item">
<div class="feature"> <?php if( $contracted ): ?>
<div class="asterix"></div>
<?php endif; ?>
<?php if( $link ): ?>
<a href="<?php echo $link; ?>" target="_blank">
<?php endif; ?>
<div class="image-frame">
<img src="<?php echo $logo['url']; ?>" alt="<?php echo $image['alt'] ?>" /></div>
<p class="client-name"> <?php echo $clientName; ?></p>
<?php if( $link ): ?>
</a>
<?php endif; ?>
</div>
<?php $counter++; if($counter % 12 === 0) : echo '<li>'; endif; ?>
<?php endwhile; ?>
Check the modulus operator. Here is a demo code on how to use it:
$counter = 0;
foreach ($elems as $elem) {
$counter++;
if ($counter % 12 === 0) {
//close and re-open
}
}