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 } ?>
Related
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 }
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();
?>`
Sometime I will have 2 links or 1 link.
<a target="_blank" href="<?php the_sub_field('playlist-url'); ?>"><?php the_sub_field('media-player'); ?></a>
I want to add "or" between the 2 links. So if there are 2 links, add "or"
For example, "Soundcloud or Youtube"
If there is 1 links don't add "or". For example, "Soundcloud"
<div class="container-wrap" id="music">
<?php
$args = array('post_type' => 'music-playlist-1');
$query = new WP_Query($args);
$cntr = 0;
while( $query -> have_posts() ) : $query -> the_post(); $cntr++; ?>
<section class="row-wrap">
<div class="row-inner">
<?php if ($cntr % 2 == 1) { ?>
<?php
$image = get_field('artwork');
if( !empty($image) ): ?>
<img class="artwork" src="<?php echo $image['url']; ?>">
<?php endif; ?>
<div class="artwork-content">
<h1><?php the_field('playlist-name'); ?></h1>
<button class="btn-wrap">
<div class="btn">listen now</div>
</button>
<div class="option-bar">
<?php
// check if the repeater field has rows of data
if( have_rows('playlist_link') ):
// loop through the rows of data
while ( have_rows('playlist_link') ) : the_row();
?>
<a target="_blank" href="<?php the_sub_field('playlist-url'); ?>"><?php the_sub_field('media-player'); ?></a>
<?php
endwhile;
else :
// no rows found
endif;
?>
</div>
</div>
<?php } else { ?>
<div class="artwork-content">
<h1><?php the_field('playlist-name'); ?></h1>
<button class="btn-wrap">
<div class="btn">listen now</div>
</button>
<div class="option-bar">
<?php
// check if the repeater field has rows of data
if( have_rows('playlist_link') ):
// loop through the rows of data
while ( have_rows('playlist_link') ) : the_row();
?>
<a target="_blank" href="<?php the_sub_field('playlist-url'); ?>"><?php the_sub_field('media-player'); ?></a>
<?php
endwhile;
else :
// no rows found
endif;
?>
</div>
</div>
<?php
$image = get_field('artwork');
if( !empty($image) ): ?>
<img class="artwork" src="<?php echo $image['url']; ?>">
<?php endif; ?>
<?php } ?>
</div>
</section>
<?php endwhile; ?>
<?php wp_reset_query(); ?>
I've never actually used the repeater rows, but looking at the docs I'll assume you can check if you are on first row if get_row_index() is 0 (since there seems to be no way to check if you are on the last row). Thus:
edit: ok now I HAVE tried it out. sorry. get_row_index() is new in version 5.3.4. Maybe that's your problem?
Here is a solution without get_row_index()
I added + before each line I added.
<?php
// check if the repeater field has rows of data
if (have_rows('playlist_link')):
+ // We set a flag for the first row
+ $is_first = true;
// loop through the rows of data
while (have_rows('playlist_link')) : the_row();
+ if ($is_first) :
+ $is_first = false;
+ else :
+ echo " OR ";
+ endif; ?>
<a target="_blank" href="<?php the_sub_field('playlist-url'); ?>"><?php the_sub_field('media-player'); ?></a>
<?php
endwhile;
else :
// no rows found
endif;
?>
Edit 2: How do we make this reusable?
Ok, I'll do this the super simple way. I take all the code, wrap it in a function... and put it in functions.php:
function playlist_links() { // <--This line is new
if (have_rows('playlist_link')):
$is_first = true;
while (have_rows('playlist_link')) : the_row();
if ($is_first) :
$is_first = false;
else :
echo " OR ";
endif; ?>
<a target="_blank" href="<?php the_sub_field('playlist-url'); ?>"><?php the_sub_field('media-player'); ?></a>
<?php
endwhile;
endif;
} // <--This line is also new
Then in your template-file, you can replace all that code with
<?php playlist_links(); ?>
And use it several times if you so wish.
(If you only use this function on a single page template, then maybe functions.php is not the greatest place for it since it get's loaded everywhere. You can instead make functions directly in your template-file.)
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 :-) )