I'm trying to place an element (corner ribbon) on certain term images in my archive. I'm using Advanced Custom Fields to assign a value to certain terms. The code below however places a ribbon on EVERY term and not just the one's with the "active15" value associated. Can someone help me with what I'm doing wrong?
This LINK shows a sample of what is happening. Aluminum is the only image that should have the ribbon, but for some reason it seems like the filter isn't being applied.
<!-- Green Ribbon for Top 15 Groups Start -->
<?php
if($terms) {
foreach($terms as $lc) {
if( get_field('group_active_in_focus_15', 'focus15groups_'.$lc->term_id) != 'active15' ) continue;
{
?>
<div class="ribbon ribbon-green">
<div class="banner">
<div class="text">TOP 15</div>
</div>
</div>
<?php } ?>
<?php
}
}
else
{
echo '<div class="ribbon ribbon-blue">
<div class="banner">
<div class="text">TOP 15</div>
</div>
</div>';
}
?>
<!-- Green Ribbon for Top 15 Groups End -->
CODE TO GET/DISPLAY TERMS FOR PAGE
<div class="row">
<?php
if ( get_query_var( 'paged' ) ) {
$paged = get_query_var('paged');
}elseif( get_query_var( 'page' ) ) {
$paged = get_query_var( 'page' );
}else{
$paged = 1;
}
$per_page = 12;
#fix
$term_args = array(
'hide_empty' => 0,
'exclude' => array(16, 20, 22, 25, 27, 28, 30, 4, 33, 264 ), //* Enter ID's of parent categories to exclude from list
);
$number_of_terms = wp_count_terms( 'focus15groups' , $term_args); // This counts the total number terms in the taxonomy with a function)
$paged_offset = ($paged - 1) * $per_page;
$libargs = array(
'orderby' => 'name',
'order' => 'ASC',
'exclude' => array(16, 20, 22, 25, 27, 28, 30, 4, 33, 264 ), //* Enter ID's of parent categories to exclude from list
'number' => $per_page,
'offset' => $paged_offset,
);
$_libargs = wp_parse_args($term_args, $libargs);
$libcats = get_terms( 'focus15groups', $_libargs);
#fix
$i = 0;
foreach($libcats as $lc){
if( $i % 4 == 0 ) { ?>
<div class="clearfix"></div>
<?php }
$i++; ?>
<div class="col-lg-3">
<?php $termlink = get_term_link( $lc->slug, 'focus15groups' ); ?>
<div class="panel panel-default <?php the_field('group_active_in_focus_15', 'focus15groups_'.$lc->term_id); ?>">
<div class="panel-image">
<!-- Green Ribbon for Top 15 Groups Start -->
<?php
if($terms) {
foreach($terms as $lc) {
if( get_field('group_active_in_focus_15', 'focus15groups_'.$lc->term_id) != 'active15' ) continue;
{
?>
<div class="ribbon ribbon-green">
<div class="banner">
<div class="text">TOP 15</div>
</div>
</div>
<?php } ?>
<?php
}
}
else
{
echo '<div class="ribbon ribbon-blue">
<div class="banner">
<div class="text">TOP 15</div>
</div>
</div>';
}
?>
<!-- Green Ribbon for Top 15 Groups End -->
<?php if( get_field('group_active_in_focus_15', 'focus15groups_'.$term->term_id) != 'active15' ) { ?>
<div class="ribbon ribbon-green">
<div class="banner">
<div class="text">TOP 15</div>
</div>
</div>
<?php } else { ?>
<?php } ?>
<div class="thumbnail">
<div class="caption">
<br/><br/>
<h1><span class="label label-info"><?php echo $lc->count ?></span></h1>
<p> Symbols </p>
<h4> <a class="label label-default" href="<?php echo $termlink; ?>"> View Group</a> </h4>
</div>
<!-- Get Image by Attachment ID Start-->
<?php
$attachment_id = get_field('taximage', 'focus15groups_'.$lc->term_id);
if ($attachment_id) {
$image = wp_get_attachment_image_src($attachment_id, 'industrygroup-img');
if ($image) {
?>
<img class="img-responsive" src="<?php echo $image[0]; ?>" />
<?php
}
}
else { ?>
<img class="img-responsive" src="http://www.runningalpha.com/wp-content/uploads/2014/08/RA-logo-300px-groups.jpg" alt="<?php the_title(); ?>" />
<?php } ?>
</div>
<!-- Get Image by Attachment ID End-->
</div>
<div class="panel-footer text-center"><?php echo $lc->name; ?>
</div>
</div>
</div>
<?php } ?>
</div>
I managed to find a fix using the following. By moving my code to the else statement made it show for the correct terms. Something seems odd about that, but it works right!
<?php if( get_field('group_active_in_focus_15', 'focus15groups_'.$lc->term_id) != 'active15' ) { ?>
<?php } else { ?>
<div class="ribbon ribbon-green">
<div class="banner">
<div class="text">TOP 15</div>
</div>
</div>
<?php } ?>
Related
I'm currently developing a custom WordPress template. Within this template I'm trying to show all post from specific categories, see it as a sort of products segment (no selling or anything). So what I've got now is showing all posts image and title dynamically with all the styling and filtering through settings of ACF.
What I would like to achieve is the following result: (using bootstrap).
4 columns on each row, but when there are more than 4 posts. (so when there needs to be a second or third row of a specific category), Create a collapse functionality for showing posts 5 >.
So after some trying, I've come to the conclusion that the best way would be to create a for loop, in combination with filtering this would create the view I'm trying to create. Sadly after trying some different methods, I've got a bit stuck. The code is shown below:
<div id="items">
<?php
if (have_rows('products_category')) {
while (have_rows('products_category')) : the_row();
// Your loop code
$title = get_sub_field('product_category_name');
$slug = get_sub_field('product_category_slug');
/* Start the filter categpries segment */
$category = get_category_by_slug($slug);
$filter_id = $category->term_id;
$filters = array();
var_dump($filters);
array_push($filters, $filter_id);
var_dump($filters);
array_push($filters, 7);
var_dump($filters);
?>
<div id="items" class="row products margin-0 justify-content-between">
<div class=" <?php echo $filter_id ?> ">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 padding-0 padding-b-10">
<h2><?php echo $title ?></h2>
</div>
<div class="col-lg-12 padding-0">
<div id="products" class="row products margin-0 justify-content-between">
<?php $argsNew = array(
'offset' => 0,
'category' => $filters,
'orderby' => 'date',
'order' => 'DESC',
'include' => '',
'exclude' => '',
'meta_key' => '',
'meta_value' => '',
'post_type' => 'post',
'post_mime_type' => '',
'post_parent' => '',
'author' => '',
'author_name' => '',
'post_status' => 'publish',
'posts_per_page' => -1,
'suppress_filters' => false,
'connected_items' => get_queried_object(),
);
$posts_array = get_posts($argsNew);
$number_posts = count($posts_array);
echo $number_posts;
$i = 0;
foreach ($posts_array as $post) : setup_postdata($post);
$i++;
if($i <= 4) {
?>
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 margin-fix padding-s-15 padding-b-30 image_filter">
<?php echo get_the_post_thumbnail($post->ID, '', array('class' => 'img-responsive big_image products_image img_small')); ?>
<?php the_title(sprintf('<h2 class="text-center big_image_product_text products_text"><a href="%s" rel="bookmark">', esc_url(get_permalink())),
'</a></h2>'); ?>
<?php
?>
</div>
<?php
}
else if($i > 4) {
?>
</div>
<div class="row">
<button data-toggle="collapse" class="btn-collapse" data-target="#products_collapse_<?php echo $filter_id ?>">Show more</button>
</div>
<div id="products_collapse_<?php echo $filter_id ?>" class="row products collapse margin-0 justify-content-between">
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 margin-fix padding-s-15 padding-b-30 image_filter">
<?php echo get_the_post_thumbnail($post->ID, '', array('class' => 'img-responsive big_image products_image img_small')); ?>
<?php the_title(sprintf('<h2 class="text-center big_image_product_text products_text"><a href="%s" rel="bookmark">', esc_url(get_permalink())),
'</a></h2>'); ?>
</div>
</div>
<?php
}
endforeach;
wp_reset_postdata(); ?>
</div>
</div>
</div>
<?php
endwhile;
}
else {
// no rows found
echo "nothing found!";
}
?>
</div>
UPDATE
I've tried creating the for loop with the $number_posts and a count method but sadly then the view is badly corrupted. So my question is:
Create a for loop / counter to count the number of posts foreach category shown.
Specify the view on those results:
for -> items 1,2,3,4. Place them in a row. (1 1 1 1).
if(more than 4 items). Place items > 5 (and so on). Under a collapse block.
e.g.
3 items:
Normal view:
1 1 1.
7 items:
view + collapse (
1 1 1 1
-collapse button-
1 1 1
(more items)
)
Could anyone show me in the right direction and or help me with this one?
Thanks in advance!
PS: If you have any questions please ask them in the comments below
Assuming the field products_category returns an array of chosen category IDs:
This will work:
<div id="items">
<?php
// Retrieve all product categories
$terms = get_terms( 'product_cat' );
// Retrieve chosen categories to display
$specified_cats = get_field( "products_category" );
// Loop though product cats
foreach ( $terms as $term ) {
$filter_id = $term->term_id;
// If the current product category id is not in the array 'specified_cats' just to the next iteration
if(!in_array($filter_id, $specified_cats)){
continue;
}
$title = $term->name;
$slug = $term->slug;
?>
<div id="items" class="row products margin-0 justify-content-between">
<div class=" <?php echo $filter_id ?> ">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 padding-0 padding-b-10">
<h2><?php echo $title ?></h2>
</div>
<div class="col-lg-12 padding-0">
<div id="products" class="row products margin-0 justify-content-between">
<?php
$argsNew = array (
'offset' => 0,
'orderby' => 'date',
'order' => 'DESC',
'post_type' => 'product',
'post_status' => 'publish',
'posts_per_page' => -1,
'product_cat'=> $term->name
);
$posts_array = get_posts($argsNew);
$number_posts = count($posts_array);
$i = 0;
foreach ($posts_array as $post) : setup_postdata($post);
$i++;
if($i <= 4) {
?>
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 margin-fix padding-s-15 padding-b-30 image_filter">
<?php echo get_the_post_thumbnail($post->ID, '', array('class' => 'img-responsive big_image products_image img_small')); ?>
<?php the_title(sprintf('<h2 class="text-center big_image_product_text products_text"><a href="%s" rel="bookmark">', esc_url(get_permalink())),
'</a></h2>'); ?>
<?php
?>
</div>
<?php
}else if($i > 4) {
?>
<div class="row">
<button data-toggle="collapse" class="btn-collapse" data-target="#products_collapse_<?php echo $filter_id ?>">Show more</button>
</div>
<div id="products_collapse_<?php echo $filter_id ?>" class="row products collapse margin-0 justify-content-between">
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 margin-fix padding-s-15 padding-b-30 image_filter">
<?php echo get_the_post_thumbnail($post->ID, '', array('class' => 'img-responsive big_image products_image img_small')); ?>
<?php the_title(sprintf('<h2 class="text-center big_image_product_text products_text"><a href="%s" rel="bookmark">', esc_url(get_permalink())),
'</a></h2>'); ?>
</div>
</div>
<?php
}
endforeach;
wp_reset_postdata(); ?>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<?php
}
?>
</div>
The code is tested and working. I even included Bootstrap to make sure everything functioning correctly:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
I need to create something like this in my picture, i want to do this with php, something like this
$count = 0;
while ( $query->have_posts() ) : $query->the_post(); ?>
<div class="item">
<?php if( $count == 1 ) { echo '<div class="col-sm-6">'; } ?>
<?php echo '<div class="col-sm-6">'; ?>
<img src="sample">
<?php echo '</div>'; ?>
<?php if( $count == 1 ) { echo '</div>'; } ?>
</div>
<?php $count++; endwhile
with bootstrap like this :
<div class="owl-carousel">
<div class="item">
<div class="col-sm-6">
<div class="col-sm-12">
<img src="sample">
</div>
<div class="col-sm-12">
<img src="sample">
</div>
</div>
<div class="col-sm-6">
<img src="sample">
</div>
</div>
</div>
my code is wrong, i know, i need an Idea, how to do this, thank you
You have to do this in 2 parts first you have to build an associative array which will contain all 12 images URL, then you can loop through that array to display the images
1st part to built an array:
$owl_array = [];
$args = array(
'post_type' => 'post',
'post_status' => 'publish'
);
$query = new WP_Query($args);
if (!empty($query->posts)) {
foreach ($query->posts as $key => $post) {
//custom logic to get the image URL
$thumb_id = get_post_thumbnail_id($post->ID);
$thumb_url_array = wp_get_attachment_image_src($thumb_id, 'thumbnail', true);
$owl_array[++$key] = (!empty($thumb_url_array[0])) ? $thumb_url_array[0] : 'http://example.com/default-image.jpg'; //assiging each featured image url into owl_array
}
}
//print_r($owl_array);
2nd part to diplay owl carousel:
<div class="owl-carousel">
<?php for ($i = 1; $i <= count($owl_array); $i++) { ?>
<div class="item">
<div class="col-sm-6">
<div class="col-sm-12 1">
<img src="<?php echo $owl_array[$i]; ?>">
</div>
<div class="col-sm-12 2">
<?php
$i++; //increment the counter
?>
<img src="<?php echo $owl_array[$i]; ?>">
</div>
</div>
<div class="col-sm-6 3">
<?php
$i++; //increment the counter
?>
<img src="<?php echo $owl_array[$i]; ?>">
</div>
</div>
<?php } ?>
</div>
I am fetching data through custom post type and category. I have added 12 category Jan to Dec and Jan has 1 posts Feb have 2 post
What I am struggling to do on January post the 2 circle is showing on the left I want only one January Circle rest of the January post under the circle.
Can you please how can i put check on category?
here is the site http://novartis.portlandvault.com/timeline/
Thanks
<div id="timeline">
<?php
//Define your custom post type name in the arguments
$args = array('post_type' => 'timeline', 'order' => 'asc' );
//Define the loop based on arguments
$loop = new WP_Query( $args );
//Display the contents
while ( $loop->have_posts() ) : $loop->the_post();
$thumb = wp_get_attachment_url( get_post_thumbnail_id($post->ID, 'large') );
$category = get_the_terms($id, 'timeline_categories');
?>
<div class="timeline-item">
<div class="timeline-icon">
<div class="timeline-month">
<?php echo $category[0]->name;?>
</div>
</div>
<div class="timeline-content right">
<h2>
<?php the_title(); ?>
</h2>
<p>
<?php echo the_content(); ?>
</p>
<div class="timeline_img">
<img src="<?php echo $thumb; ?>" class="img-responsive">
</div>
</div>
</div>
<?php endwhile;?>
</div>
<!-- Timeline ends here -->
I am not sure using categories is the best way to do this. You are limiting yourself to one years worth of data. I would suggest actually using the post date to separate the posts, then your code could look something like this.
<div id="timeline">
<?php
//Define your custom post type name in the arguments
$args = array('post_type' => 'timeline', 'order' => 'asc' );
//Define the loop based on arguments
$loop = new WP_Query( $args );
//Display the contents
while ( $loop->have_posts() ) : $loop->the_post();
$thumb = wp_get_attachment_url( get_post_thumbnail_id($post->ID, 'large') );
$category = get_the_terms($post->ID, 'timeline_categories');
?>
<section id="<?php echo $post->ID; ?>">
<?php
if( $loop->current_post === 0 ) {
$current_quarter = $category[0]->name; ?>
<div class="quarterlyheading">
<?php echo $current_quarter; ?>
<div class="quarterlinebreak"><hr></div>
</div>
<?php } else {
$post_quarter = $category[0]->name;
if($current_quarter != $post_quarter) { ?>
<div class="quarterlyheading">
<?php echo $post_quarter; ?>
<div class="quarterlinebreak"><hr></div>
</div>
<?php }
}
$current_quarter = $post_quarter;
?>
<div class="timeline-item">
<?php
if( $loop->current_post === 0 ) {
$current_month = get_the_time('M'); ?>
<div class="timeline-icon">
<div class="timeline-month">
<?php echo $current_month; ?>
</div>
</div>
<?php } else {
$post_month = get_the_time('M');
if($current_month != $post_month) { ?>
<div class="timeline-icon">
<div class="timeline-month">
<?php echo $post_month; ?>
</div>
</div>
<?php }
}
$current_month = $post_month;
?>
<div class="timeline-content right">
<h2>
<?php the_title(); ?>
</h2>
<p>
<?php echo the_content(); ?>
</p>
<div class="timeline_img">
<img src="<?php echo $thumb; ?>" class="img-responsive">
</div>
</div>
</div>
</section>
<?php endwhile;?>
</div>
I have a theme that shows the latest four posts in one column. I want to convert this to two posts in two columns.
I made two divs next to each other and put the first in descending order and the other in ascending order. Then I set it to show only 2 posts.
But now it shows 2 posts in the left div and all four posts in the right div:
I don't understand why it is doing this. Here is the code:
<section class="container">
<div class="left-half">
<article>
<!-- =========================
SECTION: LATEST NEWS
============================== -->
<?php
$parallax_number_of_posts = get_option('posts_per_page');
$args = array( 'post_type' => 'post', 'posts_per_page' => $parallax_number_of_posts, 'order' => 'ASC','ignore_sticky_posts' => true );
$the_query = new WP_Query( $args );
if ( $the_query->have_posts() ) {
$parallax_one_latest_news_title = get_theme_mod('parallax_one_latest_news_title',esc_html__('Latest news','parallax-one'));
if($parallax_number_of_posts > 0) {
?>
<section class="brief timeline" id="latestnews" role="region" aria-label="<?php esc_html_e('Latest blog posts','parallax-one'); ?>">
<div class="section-overlay-layer">
<div align="center" class="container">
<div class="row">
<!-- TIMELINE HEADING / TEXT -->
<?php
if(!empty($parallax_one_latest_news_title)){
echo '<div class="col-md-12 timeline-text text-left"><h2 class="text-left dark-text">'.esc_attr($parallax_one_latest_news_title).'</h2><div class="colored-line-left"></div></div>';
} elseif ( isset( $wp_customize ) ) {
echo '<div class="col-md-12 timeline-text text-left paralax_one_only_customizer"><h2 class="text-left dark-text "></h2><div class="colored-line-left "></div></div>';
}
?>
<div class="parallax-slider-whole-wrap">
<!--<div class="controls-wrap">
<button class="control_next icon icon-arrow-carrot-down"><span class="screen-reader-text"><?php esc_attr_e('Post slider navigation: Down','parallax-one')?></span></button>
<button class="control_prev fade-btn icon icon-arrow-carrot-up"><span class="screen-reader-text"><?php esc_attr_e('Post slider navigation: Up','parallax-one')?></span></button>
</div>-->
<!-- TIMLEINE SCROLLER -->
<div itemscope itemtype="http://schema.org/Blog" id="parallax_slider" class="col-md-6 timeline-section">
<ul class="vertical-timeline" id="timeline-scroll">
<?php
$i_latest_posts= 0;
while ( $the_query->have_posts() ) : $the_query->the_post();
$i_latest_posts++;
if ( !wp_is_mobile() ){
if($i_latest_posts % 2 == 1){
echo '<li>';
}
} else {
echo '<li>';
}
?>
<div itemscope itemprop="blogPosts" itemtype="http://schema.org/BlogPosting" id="post-<?php the_ID(); ?>" class="timeline-box-wrap" title="<?php printf( esc_html__( 'Latest News: %s', 'parallax-one' ), get_the_title() ) ?>">
<div itemscope itemprop="image" class="icon-container white-text">
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<?php
if ( has_post_thumbnail() ) :
the_post_thumbnail('parallax-one-post-thumbnail-latest-news');
else: ?>
<img src="<?php echo parallax_get_file('/images/no-thumbnail-latest-news.jpg'); ?>" width="150" height="150" alt="<?php the_title(); ?>">
<?php
endif;
?>
</a>
</div>
<div class="info">
<header class="entry-header">
<h1 itemprop="headline" class="entry-title"><br><br><br>
<?php the_title(); ?>
</h1>
<!-- .entry-meta -->
</header>
<div itemprop="description" class="entry-content entry-summary">
<?php the_excerpt(); ?>
<?php printf( esc_html__( 'Bekijk de fotos %s', 'textdomain' ), '<span class="screen-reader-text"> '.get_the_title().'</span>' ); ?>
</div>
</div>
</div>
<?php
if ( !wp_is_mobile() ){
if($i_latest_posts % 2 == 0){
echo '</li>';
}
} else {
echo '</li>';
}
endwhile;
wp_reset_postdata();
?>
</ul>
</div>
</div><!-- .parallax-slider-whole-wrap -->
</div>
</div>
</div>
</section>
<?php
}
} ?>
</article>
</div>
<!--rechts-->
<div class="right-half">
<article>
<!-- =========================
SECTION: LATEST NEWS
============================== -->
<?php
$parallax_number_of_posts = get_option('posts_per_page');
$args = array( 'post_type' => 'post', 'posts_per_page' => $parallax_number_of_posts, 'order' => 'DESC','ignore_sticky_posts' => true );
$the_query = new WP_Query( $args );
if ( $the_query->have_posts() ) {
$parallax_one_latest_news_title = get_theme_mod('parallax_one_latest_news_title',esc_html__('Latest news','parallax-one'));
if($parallax_number_of_posts > 0) {
?>
<section class="brief timeline" id="latestnews" role="region" aria-label="<?php esc_html_e('Latest blog posts','parallax-one'); ?>">
<div class="section-overlay-layer">
<div align="center" class="container">
<div class="row">
<!-- TIMELINE HEADING / TEXT -->
<br>
<br>
<br>
<div class="parallax-slider-whole-wrap">
<div class="controls-wrap">
<button class="control_next icon icon-arrow-carrot-down"><span class="screen-reader-text"><?php esc_attr_e('Post slider navigation: Down','parallax-one')?></span></button>
<button class="control_prev fade-btn icon icon-arrow-carrot-up"><span class="screen-reader-text"><?php esc_attr_e('Post slider navigation: Up','parallax-one')?></span></button>
</div>
<!-- TIMLEINE SCROLLER -->
<div itemscope itemtype="http://schema.org/Blog" id="parallax_slider" class="col-md-6 timeline-section">
<ul class="vertical-timeline" id="timeline-scroll">
<?php
$i_latest_posts= 0;
while ( $the_query->have_posts() ) : $the_query->the_post();
$i_latest_posts++;
if ( !wp_is_mobile() ){
if($i_latest_posts % 2 == 1){
echo '<li>';
}
} else {
echo '<li>';
}
?>
<div itemscope itemprop="blogPosts" itemtype="http://schema.org/BlogPosting" id="post-<?php the_ID(); ?>" class="timeline-box-wrap" title="<?php printf( esc_html__( 'Latest News: %s', 'parallax-one' ), get_the_title() ) ?>">
<div itemscope itemprop="image" class="icon-container white-text">
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<?php
if ( has_post_thumbnail() ) :
the_post_thumbnail('parallax-one-post-thumbnail-latest-news');
else: ?>
<img src="<?php echo parallax_get_file('/images/no-thumbnail-latest-news.jpg'); ?>" width="150" height="150" alt="<?php the_title(); ?>">
<?php
endif;
?>
</a>
</div>
<div class="info">
<header class="entry-header">
<h1 itemprop="headline" class="entry-title"><br><br><br>
<?php the_title(); ?>
</h1>
<!-- .entry-meta -->
</header>
<div itemprop="description" class="entry-content entry-summary">
<?php the_excerpt(); ?>
<?php printf( esc_html__( 'Bekijk de fotos %s', 'textdomain' ), '<span class="screen-reader-text"> '.get_the_title().'</span>' ); ?>
</div>
</div>
</div>
<?php
if ( !wp_is_mobile() ){
if($i_latest_posts % 2 == 0){
echo '</li>';
}
} else {
echo '</li>';
}
endwhile;
wp_reset_postdata();
?>
</ul>
</div>
</div><!-- .parallax-slider-whole-wrap -->
</div>
</div>
</div>
</section>
<?php
}
} ?>
</article>
</div>
</section>
If I understood correctly what you want to achieve - to divide several posts into two columns, I can not understand exactly how you want to achieve this into code. If you rely on this condition $the_query->current_post % 2 == 1 to filter the posts, then in your code it only filter printing of the li element, but then the cycle continues and show the post itself, ie what you achieve with this code is to place two posts (div.timeline-box-wrap) elements in one li.If you want to use this method of separation, you should change the code a little (I will simplify it, but the main is, that you must stop current loop if your condition pass).
You don't need to query DB two times with the same query - this is performance issue, so you can use the same result and loop over two times.
You can use $the_query->current_post to get current post and filter.
<section class="container">
<div class="left-half">
<article>
<?php
$parallax_number_of_posts = get_option('posts_per_page');
$args = array( 'post_type' => 'product', 'posts_per_page' => $parallax_number_of_posts, 'order' => 'ASC','ignore_sticky_posts' => true );
$the_query = new WP_Query( $args );
if ( $the_query->have_posts() ) {
if($parallax_number_of_posts > 0) {
?>
<section class="brief timeline" id="latestnews" role="region" aria-label="<?php esc_html_e('Latest blog posts','parallax-one'); ?>">
<ul class="vertical-timeline" id="timeline-scroll">
<?php while ( $the_query->have_posts() ) : $the_query->the_post();
if($the_query->current_post % 2 == 1)
continue; ?>
<li><?php the_title() ?></li>
<?php endwhile; ?>
</ul>
</section>
<?php
}
} ?>
</article>
</div>
<div class="right-half">
<article>
<?php
$the_query->rewind_posts();
if ( $the_query->have_posts() ) {
if($parallax_number_of_posts > 0) {
?>
<section class="brief timeline" id="latestnews" role="region" aria-label="<?php esc_html_e('Latest blog posts','parallax-one'); ?>">
<ul class="vertical-timeline" id="timeline-scroll">
<?php while ( $the_query->have_posts() ) : $the_query->the_post();
if($the_query->current_post % 2 == 0)
continue; ?>
<li><?php the_title() ?></li>
<?php endwhile; ?>
</ul>
</section>
<?php
}
} ?>
</article>
</div>
</section>
P.S. You can simplify more, if you set 2 variables: $left and $right and use only one loop to set one or other with html, and then print their values.
I'm trying to get my index of the loop in order list for viewing. I'm using Jetpack Post Views for this
Ex: the most viewed post is first and so on.
I use a custom post with namo movies , only queensize my loop is not bringing this custom post.
Could anyone help me ?
<div id="content">
<?php if( function_exists( 'stats_get_csv' ) ) :
$top_posts = stats_get_csv( 'postviews', array( 'days' => 21, 'limit' => -1 ) );
$top_ids = array();
foreach ( $top_posts as $top_post ) {
$top_ids[] = $top_post['post_id'];
}
// Check for transient, hat tip Greg Rickaby
if ( false === ( $tops = get_transient( 'popular_posts' ) ) ) :
$top_args = new WP_Query( array(
'posts_per_page' => '5',
'post__in' => $top_ids,
'posts_per_page' => 14,
'post_type' => array('movies')
)
);
$tops = new WP_Query( $top_args );
// Store transient and expire after 24 hours
set_transient( 'popular_posts', $tops, 24 * HOUR_IN_SECONDS );
endif;
while ($tops->have_posts()) : $tops->the_post(); ?>
<div class="box " id="post-<?php the_ID(); ?>">
<div class="boxim">
<?php
if ( has_post_thumbnail() ) { ?>
<img class="boximg" src="<?php bloginfo('stylesheet_directory'); ?>/timthumb.php?src=<?php get_image_url(); ?>&h=270&w=180&zc=1" alt=""/>
<?php } else { ?>
<img class="boximg" src="<?php bloginfo('template_directory'); ?>/images/dummy.png" alt="" />
<?php } ?>
<div class="scorebox">
<span class="sholder"> <span class="scorebar score-<?php $rscore=get_post_meta($post->ID, 'wtf_rscore', true); echo $rscore; ?>"> </span> </span>
</div>
</div>
<div class="boxentry">
<div class="btitle">
<h2><?php the_title(); ?></h2>
</div>
<div class="bmeta">
<span class="mgenre"><?php echo get_the_term_list( $post->ID, 'movie-genre', '', ', ', '' ); ?></span> <span class="mcom"><?php comments_popup_link('0', '1', '%'); ?></span>
</div>
<div class="clear"></div>
</div>
</div>
<?php if(++$counter % 3 == 0) : ?>
<div class="clear"></div>
<?php endif; ?>
<?php endwhile; wp_reset_postdata(); ?>
<div class="clear"></div>
<?php getpagenavi(); ?>
<?php endif; ?>
</div>