I am looping through a repeater field in Advanced Custom Fields and displaying divs for each item in the repeater. If the index is equal to 0, I want to add a special class to just that div. Is this possible? Here's what I've tried:
<?php if (have_rows('products')): $i = 0; ?>
<div class="product-container">
<?php while (have_rows('products')) : the_row(); ?>
<div class="product <?php if ($i == 0) { echo 'active-class'; } ?>"></div>
<?php $i++; endwhile; ?>
</div>
<?php endif; ?>
Unfortunately this is not working.
Instead of doing the conditional within the class, I just did it on the outside and defined two different class tags based on the condition:
<?php if (have_rows('products')): $i = 0; ?>
<div class="product-container">
<?php while (have_rows('products')) : the_row(); ?>
<div <?php if ($i == 0) { ?>class="product active"<?php } else { ?>class="product"<?php } ?> ></div>
<?php $i++; endwhile; ?>
</div>
<?php endif; ?>
Related
I have a repeater using Advanced Custom fields, which when a count reaches a total (of 3) based on an iterative count, I would like to output a div, then reset the counter.
Here's the code, at the moment it's not outputting as it should and I don't know enough about math to get it to work.
Appreciate your assistance :-)
<?php if(have_rows('flexible_row')) : ?>
<div class="row">
<?php if(empty($count)){ $count=1;} while(have_rows('flexible_row')) : the_row(); ?>
<?php if(get_sub_field('column_width') == "One column") { $count = $count+1; ?>
<div class="col-sm-4">
<?php the_sub_field('title');?>
<?php the_sub_field('content');?>
Count is <?php echo $count; ?>
<hr/>
</div>
<?php } if(get_sub_field('column_width') == "Two columns") { $count = $count+2; ?>
<div class="col-sm-8">
<?php the_sub_field('title');?>
<?php the_sub_field('content');?>
Count is <?php echo $counter; ?>
<hr/>
</div>
<?php } else { $count = $count+3; ?>
<div class="col-sm-12">
<?php the_sub_field('title');?>
<?php the_sub_field('content');?>
Count is <?php echo $counter; ?>
<hr/>
</div>
<?php } if ($count == 3) { ?></div><div class="row"><?php $count = 0; } ?>
<?php endwhile; ?>
</div>
<?php endif; ?>
Think I'd got my logic mixed up a bit — I wasn't using the else clauses correctly. Here's the final working code in case anyone stumbles across this in the future:
<?php if(have_rows('flexible_row')) : ?>
<div class="row">
<?php if(empty($count)){ $count=0;} while(have_rows('flexible_row')) : the_row(); ?>
<?php if(get_sub_field('column_width') == "One Column") { $count = $count+1; ?>
<div class="col-sm-4">
<?php the_sub_field('title');?>
<?php the_sub_field('content');?>
</div>
<?php } elseif(get_sub_field('column_width') == "Two Columns") { $count = $count+2; ?>
<div class="col-sm-8">
<?php the_sub_field('title');?>
<?php the_sub_field('content');?>
</div>
<?php } else { $count = $count+3; ?>
<div class="col-sm-12">
<?php the_sub_field('title');?>
<?php the_sub_field('content');?>
</div>
<?php } if ($count == 3) { ?></div><div class="row"><?php $count = 0; } ?>
<?php endwhile; ?>
</div>
You could of course use switch statements too..
Sorry for the title, I wasn't sure how to word it.
Basically, I have a webpage that uses Advanced Custom Fields to populate products, it loops through the products and displays them in groups of three, per row; each row alternates color - light grey to dark grey.
My issue is, the code I wrote is checking if each row has 3 items, so if the product listing row ends on 1 or 2, the row containing div is not closed off, thus wrapping my footer and messing up the for the rest of the page. The following is my code, it should be pretty easy to follow - you can also see I am using LazyLoadAny - Basically, I count the items, if there are more than 6 I lazyload the rest. On the first item I open the row container and when there are three I close it. So again, I need to figure out how to close the container if the row ends on 1 or 2 items not just 3.
Short Version: How do I close the "internal-product-light" or "internal-product-dark" rows if they end with 1 or 2 products instead of 3?
<?php
$count = 0;
$rowCount = 0;
$rowClass = "internal-product-light";
// check if the repeater field has rows of data
if( have_rows('product_listing_repeater') ): ?>
<div class="internal-container">
<div class="full-product-line-contain">
<?php // loop through the rows of data
while ( have_rows('product_listing_repeater') ) : the_row(); $count++; $rowCount++; ?>
<?php if($rowCount == 1) { ?>
<div class="<?php echo $rowClass; ?>">
<div class="product-centering">
<?php if($count > 6) { ?>
<div class="js-lazyload">
<?php echo "<!--"; }
} ?>
<div class="internal-section product-line-item product-alignment clearfix">
<div class="product-contain">
<?php if(get_sub_field('has_link')): ?>
<a href="<?php the_sub_field('link_url')?>" class="product-link">
<?php
if(get_sub_field('has_image')):
$singleImage = get_sub_field('block_image');
?>
<img class="product-line-image" src="<?php echo $singleImage ?>" />
<?php endif; ?>
</a>
<?php endif; ?>
<div class="internal-content-contain-right no-float">
<?php if(get_sub_field('has_link')): ?>
<a href="<?php the_sub_field('link_url')?>" class="product-link-title">
<h2><?php the_sub_field('block_headline'); ?></h2>
</a>
<?php endif; ?>
<?php if(get_sub_field('has_link')): ?>
<?php the_sub_field('link_text')?>
<?php endif; ?>
</div>
</div>
</div>
<?php if($rowCount == 3) { ?>
<?php if($count > 6) { echo "-->"; ?>
</div><!-- End lazy load div -->
<?php } ?>
</div><!-- End product centering -->
</div><!-- End row -->
<?php $rowCount = 0;
if($rowClass == "internal-product-light"){ $rowClass = "internal-product-dark";}else{$rowClass = "internal-product-light";}
} ?>
<?php endwhile; ?>
</div>
</div>
Your last if-statment could be:
<?php if(($rowCount % 3) == 0) { ?>
<?php if($count > 6) { echo "-->"; ?>
</div><!-- End lazy load div -->
<?php } ?>
</div><!-- End product centering -->
</div><!-- End row -->
<?php if($rowClass == "internal-product-light"){ $rowClass = "internal-product-dark";}else{$rowClass = "internal-product-light";}
} ?>
And then, after the while-block:
<?php if(($rowCount % 3) <> 0) { ?>
<?php if($count > 6) { echo "-->"; ?>
</div><!-- End lazy load div -->
<?php } ?>
</div><!-- End product centering -->
</div><!-- End row -->
<?php if($rowClass == "internal-product-light"){ $rowClass = "internal-product-dark";}else{$rowClass = "internal-product-light";}
} ?>
The x % y returns the remainder of x/y.
So the following code is actually a much simpler solution than I thought it would be - I will post the code then break it down.
<?php
$count = 0;
$rowCount = 0;
$rowClass = "internal-product-light";
$rowInfo = get_sub_field('product_listing_repeater');
$fieldCount = count($rowInfo);
// check if the repeater field has rows of data
if( have_rows('product_listing_repeater') ): ?>
<div class="internal-container">
<div class="full-product-line-contain">
<?php // loop through the rows of data
while ( have_rows('product_listing_repeater') ) : the_row(); $count++; $rowCount++; ?>
<?php
if($rowCount == 1) { ?>
<div class="<?php echo $rowClass; ?>">
<div class="product-centering">
<?php if($count > 6) { ?>
<div class="js-lazyload">
<?php echo "<!--"; }
} ?>
<div class="internal-section product-line-item product-alignment clearfix">
<div class="product-contain">
<?php if(get_sub_field('has_link')): ?>
<a href="<?php the_sub_field('link_url')?>" class="product-link">
<?php
if(get_sub_field('has_image')):
$singleImage = get_sub_field('block_image');
?>
<img class="product-line-image" src="<?php echo $singleImage ?>" />
<?php endif; ?>
</a>
<?php endif; ?>
<div class="internal-content-contain-right no-float">
<?php if(get_sub_field('has_link')): ?>
<a href="<?php the_sub_field('link_url')?>" class="product-link-title">
<h2><?php the_sub_field('block_headline'); ?></h2>
</a>
<?php endif; ?>
<?php if(get_sub_field('has_link')): ?>
<?php the_sub_field('link_text')?>
<?php endif; ?>
</div>
</div>
</div>
<?php if($rowCount == 3 || $count == $fieldCount) { ?>
<?php if($count > 6 || $count == $fieldCount) { echo "-->"; ?>
</div><!-- End lazy load div -->
<?php } ?>
</div><!-- End product centering -->
</div><!-- End row -->
<?php $rowCount = 0;
if($rowClass == "internal-product-light"){ $rowClass = "internal-product-dark";}else{$rowClass = "internal-product-light";}
} ?>
<?php endwhile; ?>
</div>
</div>
As you can see, I added the variable $fieldCount = count($rowInfo) which counts the ACF repeater field. Then when I was originally checking for 3 products, I added an OR statement - <?php if($rowCount == 3 || $count == $fieldCount) { ?> and to the lazyload check - <?php if($count > 6 || $count == $fieldCount) { echo "-->"; ?>
This makes sure that if it is 3, it closes the div and if it is the end of the array (figured out through count), it closes the div.
Please post any questions for clarification.
I am using advanced custom field repeater to load some sub_fields which you can see in the below code:
<?php
if( get_field('who_made_it') ): ?>
<div id="role-wrapper">
<?php while( has_sub_field('who_made_it') ): ?>
<div class="role-item">
<?php the_sub_field('job_role'); ?>
<?php the_sub_field('description'); ?>
</div>
<?php endwhile; ?>
</div>
<?php endif; ?>
I would like to count how many .row-item's there are and then print that number as a class on the container #role-wrapper .
So as a HTML demo of how it would look:
<div id="role-wrapper" class"roleitems-3">
<div class="role-item">
content in here
</div>
<div class="role-item">
content in here
</div>
<div class="role-item">
content in here
</div>
</div>
As specified by the docs, get_field() returns an array() of sub fields in this case. As a result, you can do a simple count():
<div id="role-wrapper" class"roleitems-<?php echo count( get_field('who_made_it') ); ?>">
I am unfamiliar with has_sub_field and the advanced custom field repeater, but it seems a simple answer would be to add a counter.
<?php
$counter = 0;
while( has_sub_field('who_made_it') ):
//do stuff
$counter++;
endwhile;
//output the counter however you like
echo('<div class="counter">Total: ' . $counter . '</div>');
?>
I have this code, and I need to close a row every 4 post. Every post is inside a div. I tried some things but I coudn't implement to my code.
<?php
echo "<div class='row'>";
global $post;
$all_events = tribe_get_events(
array(
'eventDisplay'=>'upcoming',
//'posts_per_page'=>10,
)
);
foreach($all_events as $post) {
setup_postdata($post);
?>
<div class="col-sm-3">
<span class="event-date"><?php echo tribe_get_start_date($post->ID, true, 'j M'); ?></span>
<h3><?php the_title(); ?></h3>
<?php if ( has_post_thumbnail() ) { ?>
<div class="event-thumb">
<?php the_post_thumbnail('thumbnail'); ?>
</div>
<div class="event-excerpt">
<?php the_excerpt(); ?>
</div>
<?php } else { ?>
<div class="event-content">
<?php the_content(); ?>
</div>
<?php } ?>
</div>
<?php } //endforeach ?>
<?php wp_reset_query(); ?>
<?php
echo "<div class='row'>";
global $post;
$all_events = tribe_get_events(
array(
'eventDisplay'=>'upcoming',
//'posts_per_page'=>10,
)
);
$count = 1;
foreach($all_events as $post) {
setup_postdata($post);
?>
<div class="col-sm-3">
<span class="event-date"><?php echo tribe_get_start_date($post->ID, true, 'j M'); ?></span>
<h3><?php the_title(); ?></h3>
<?php if ( has_post_thumbnail() ) { ?>
<div class="event-thumb">
<?php the_post_thumbnail('thumbnail'); ?>
</div>
<div class="event-excerpt">
<?php the_excerpt(); ?>
</div>
<?php } else { ?>
<div class="event-content">
<?php the_content(); ?>
</div>
<?php } ?>
</div>
<?php
if($count == 4){
echo "<div class='seperator'></div>";
$count =1;
}
?>
<?php $count++; } //endforeach ?>
<?php wp_reset_query(); ?>
I'd actually solve this 100% in CSS, so you don't need any counting or handling inside your PHP code.
Have a look at this JSFiddle.
float: left will cause the single elements to all follow each other (left aligned).
clear: left on every 4 * n + 1-th element (nth-child(4n+1)) will clear this, essentially forcing a line break.
There is one caveat to this: If there's no room for all 4 entries in one row, you'll end up with additional wrapping, which can be avoided by defining a fixed width for the container.
A simplified in-code version for PHP would just count the fields written and add a line break as necessary:
$i = 1; // counter
foreach ($events as $event) { // iterate over all events
if ($i++ % 4 == 0) // a % b will be 0 for 4, 8, etc.
echo '<br />'; // print the line break using whatever HTML you see fit.
print_event($event); // print the actual event
}
You might ask whether I check for the line break before actually printing an event: That's to prevent additional line breaks if the number of entries is a multiple of 4, i.e. I avoid having an empty trailing line.
You need the modulo operator. It works like this:
$i == 0;
foreach($some_array as $some_value){
if ($i % $number_to_divide_by == 0) {
// do something here every nth time
}
$i++;
}
I am using cake PHP and on my view/technical_slider/index.ctp is the following:
I am using a heavily modified version of this tutorial Featured Content Slider Using jQuery
<?php foreach ($technicalSlides as $technicalSlide):?>
<div id="nav-fragment-1" class="ui-tabs-panel">
<h2><?php echo $technicalSlide['TechnicalSlide']['title'];?></h2>
<p><?php echo $technicalSlide['TechnicalSlide']['description'] ; ?></p>
</div>
<?php endforeach; ?>
My question is: How can I display only certain id's or items and apply different class on the same div ? Because I only want record 1-3 skip 4-7 then show record 8-15?
I am applying different classes on them because they have different backgrounds, but share the same id.
You coud add a counter and then display only those you want.
<?php int $i = 0; ?>
<?php foreach ($technicalSlides as $technicalSlide):?>
<?php if ($i < 4 || $i > 7): ?>
<div id="nav-fragment-1" class="ui-tabs-panel">
<h2><?php echo $technicalSlide['TechnicalSlide']['title'];?></h2>
<p><?php echo $technicalSlide['TechnicalSlide']['description'] ; ?></p>
<?php endif; ?>
</div>
<?php endforeach; ?>
Although I would merge all classes and use attributes.
Add a counter variable (in this case $i), increment it ($i++) so it increases by one for every loop, and add your checks to an if() block to make sure you only write the ones you want to:
<?php
$i = 1;
foreach ($technicalSlides as $technicalSlide):
if($i < 4 || $i > 7) {
?>
<div id="nav-fragment-1" class="ui-tabs-panel">
<h2><?php echo $technicalSlide['TechnicalSlide']['title'];?></h2>
<p><?php echo $technicalSlide['TechnicalSlide']['description'] ; ?></p>
</div>
<?php
}
$i++;
endforeach;
?>