Define Grid Based on Multiple Item Counts - php

Looking to solve a problem I'm having dynamically defining classes using WordPress Advanced Custom Fields' Repeater field. I've done some digging but haven't been able to find a resource with the specificity that I'm looking for.
I'm displaying a series of portfolio images, and depending on how many there are I would like to give certain photos specific class names within the Foundation grid. Essentially I'm looking to do the following:
For items 1-4: Apply a class of large-6
For items 5+: Apply a class of large-4
If only 1 item: Apply a class of large-8
I've been able to get the first two examples to work, but I'm having trouble defining a third set of parameters. I've tried a number of different routes but I'm not sure what's best at this point. See below for a mockup of what I am looking to accomplish, as well as my code example.
Appreciate any advice!
<div class="row portfolio-examples">
<?php
if( have_rows('portfolio_examples') ):
while ( have_rows('portfolio_examples') ) : the_row();
$count = 0;
$work = get_sub_field('portfolio_work');
?>
<?php if ($count != 0 || $count < 4) :?>
<div class="large-6 medium-6 columns end">
<?php if( $work ): ?>
<img src="<?php echo $work['url']; ?>" alt="<?php echo $work['alt'] ?>" />
<?php endif; ?>
</div>
<?php else: ?>
<div class="large-8 medium-8 large-centered medium-centered columns">
<?php if( $work ): ?>
<img src="<?php echo $work['url']; ?>" alt="<?php echo $work['alt'] ?>" />
<?php endif; ?>
</div>
<?php endif; ?>
<?php
$counter++;
endwhile;
endif;
?>
</div>

Your question is not clear enough to me because you say Apply a class of large or Apply a class of small, but then in your code you use .large-6 and also .large-8.
Anyway, supposing what you're trying to achieve (given your image), your PHP code should be something like this:
<div class="row portfolio-examples">
<?php
if (have_rows('portfolio_examples')) :
/* We need to know the total number
* of rows in your repeater since you have
* a case where there's only one item.
*/
$portfolio = get_field('portfolio_examples');
$count = is_array($portfolio) ? count($portfolio) : 0;
$index = 0;
while (have_rows('portfolio_examples')) : the_row();
if ($count == 1) :
/* Place here your code for when
* there's only 1 item in your portfolio.
*/
?>
<div class="medium"><!-- Medium item --></div>
<?php
elseif ($count > 1 && $index <= 3) :
// Code for your first 4 items
?>
<div class="large"><!-- Large item --></div>
<?php
elseif ($count > 1 && $index > 3) :
// Code for your 5+ items
?>
<div class="small"><!-- Small item --></div>
<?php
else :
// There are no items in your portfolio.
endif;
$index++;
endwhile;
endif;
?>
</div>
Notice: You were reseting to 0 your iterator index ($count in your case) in every iteration. Also, you were incrementing $counter (not $count) which wasn't defined.

Related

Change column size based on amount of elements

So I'm working on a HTML carousel using Twitter Bootstrap, Wordpress and ACF Fields.
This carousel shows 2 items per row. Each of these items has a class of "col-md-6". So by showing 2 items per row, the total is 2 columns of "col-md-6" (which is perfect since this completes the 12 columns required by Bootstrap):
Here is my code:
<?php if (have_rows('columns_carousel_slide')) {
$count = 0; ?>
<div class="item active"><div class="row">
<?php while(have_rows('columns_carousel_slide')) {
the_row();
if ($count > 0 && (($count % 2) == 0)) {
?>
</div> <!--.item -->
</div> <!--.row -->
<div class="item">
<div class="row">
<?php } ?>
<div class="col-md-6">
<h2><?php the_sub_field('columns_carousel_slide_title'); ?></h2>
</div> <!--.col-md-6 -->
<?php $count++; } ?>
</div> <!--.item -->
</div> <!--.row -->
<?php } ?>
However, I would like to know if there's a way to detect if there's 1 item per row and if so, then show a "col-md-12" instead of a "col-md-6" in order to fill in the remaining space of not having 2 items.
Any ideas are welcome.
Thanks!
--
Edit: As suggested by Jakub, I've updated my code to the following:
<?php if (have_rows('columns_carousel_slide')) {
$count = 0; ?>
<div class="item active"><div class="row">
<?php
$multiplier = 1; //that could actually go before the while
if (count(get_field('columns_carousel_slide'))%2 === 1 &&
$count === count(get_field('columns_carousel_slide'))-1) {
$multiplier = 2;
} ?>
<?php while(have_rows('columns_carousel_slide')) {
the_row();
if ($count > 0 && (($count % 2) == 0)) {
?>
</div> <!--.item -->
</div> <!--.row -->
<div class="item">
<div class="row">
<?php } ?>
<div class="col-md-<?php echo (6*$multiplier);?>">
<h2><?php the_sub_field('columns_carousel_slide_title'); ?></h2>
</div> <!--.col-md-6 -->
<?php $count++; } ?>
</div> <!--.item -->
</div> <!--.row -->
<?php } ?>
However, I think I've must have missed something because I am getting total of "col-md-12" for all the rows.
Assuming that "get_field" returns the array with all rows, then you would need to change the following:
<div class="col-md-6">
<h2><?php the_sub_field('columns_carousel_slide_title'); ?></h2>
</div> <!--.col-md-6 -->
with this:
<?php
$multiplier = 1; //that could actually go before the while
if (count(get_field('columns_carousel_slide'))%2 === 1 &&
$count === count(get_field('columns_carousel_slide'))-1) {
$multiplier = 2;
} ?>
<div class="col-md-<?php echo (6*$multiplier);?>">
<h2><?php the_sub_field('columns_carousel_slide_title'); ?></h2>
</div> <!--.col-md-12 -->
A short explanation:
initially we set the multiplier to 1 (so that 6*1 = 6 for paired
columns).
we do a condition to check if number of items is even
and we are currently processing the last item. If so - we set the
multiplier to 2 (so that 6*2 = 12 for single column)
we set the class to be "col-md-" and the result of our calculation (either 6 or 12)

Count how many rows are in sub_field

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>');
?>

Insert static blocks within a PHP loop

I'm trying to insert 2 static div's inside a PHP loop, specifically one at the very beginning of the loop and one at the very end.
These 2 div's must appear within their corresponding .row parent which currently wraps around every 3 DIV's. How can I do this?
EDIT
Here's an image to describe what I need, the pink blocks are the manually inserted div's that will have different content to the blue divs. Those blue divs are just WP posts:
Here's my PHP, currently this creates 4 columns within the first and last rows where it should just be 3 columns:
<?php static $c=1;
$subs = new WP_Query( array( 'post_parent' => 14, 'post_type' => 'page' ));
if( $subs->have_posts() ) : while( $subs->have_posts() ) : $subs->the_post(); ?>
<?php if (($c % 3) === 1) {
// This creates part of the wrapper .row div
echo "<div class='row'>";
} ?>
<?php
if ($c == 1) {?>
<div class="col_4 card bar">
first card that is manually inserted with different content
</div>
<?php } ?>
<a href="<?php the_permalink(); ?>" class="col_4 card bar no-pad <?php if($c % 3 == 0) { echo 'last'; } ?>">
<?php if ( has_post_thumbnail() ) {?>
<div class="feature-image c-1">
<?php the_post_thumbnail('medium'); ?>
</div>
<?php } ?>
<div class="excerpt-wrap">
This is a post from within Wordpress
</div>
</a>
<?php if ($c == 6) {?>
<div class="col_4 card bar">
Last card that is manually inserted with different content
</div>
<?php } ?>
<?php if (($c % 4) === 3) {
echo "</div>";
}?>
<?php $c++; endwhile; endif; wp_reset_postdata(); ?>
EDIT
This is the HTML structure I'd like to achieve:
<!-- very first row -->
<div class="row">
<!-- This is a static block followed by the very first two worpdress posts-->
<div class="static-block"></div>
</div>
<!-- I could have 3 or 30 wordpress posts repeating this format -->
<div class="row">
</div>
<!-- very last row -->
<div class="row">
<!-- These are the very two worpdress posts followed by a static block -->
<div class="static-block"></div>
</div>
<?php
$c = 1;
$subs = new WP_Query(array('post_parent' => 14, 'post_type' => 'page'));
if ($subs->have_posts()) :
?>
<div class='row'>
<?php
while ($subs->have_posts()) : $subs->the_post();
if (($c % 3) == 0 || $c == 3):
?>
</div><div class='row'>
<?php
endif;
?>
<?php
if ($c == 1):
?>
<div class="col_4 card bar">
first card that is manually inserted with different content
</div>
<?php endif; ?>
<a href="<?php the_permalink(); ?>" class="col_4 card bar no-pad <?php if ($c % 3 == 0) { echo 'last'; } ?>">
<?php if (has_post_thumbnail()) { ?>
<div class="feature-image c-1">
<?php the_post_thumbnail('medium'); ?>
</div>
<?php } ?>
<div class="excerpt-wrap">
This is a post from within Wordpress
</div>
</a>
<?php if ($c == 7) { ?>
<div class="col_4 card bar">
Last card that is manually inserted with different content
</div>
<?php } ?>
<?php
$c++;
endwhile;
?>
</div>
<?php
endif;
wp_reset_postdata();
?>
if have more then 7 page and u want to static block add on last just
change 7 to post count value ( $c == $sub->post_count)
EDIT: sorry, it seems that I saw your post before you uploaded the pictures of the wireframe.
It's not so clear to me the goal of your code. But, what I understand is you need to generate an structure like this:
<div class='row'>
<div class='static'>
</div>
<div class='static'>
</div>
#here the loop will create
<div></div>
<div></div>
<div></div>
<div class='static'>
</div>
<div class='static'>
</div>
</div>
and this will be duplicated for as many i in your while you have.
if that is what you need, then I think what you need to do is count 1,2,3 with your $c variable. Everytime you are in $c = 1 print the first 2 static divs, and when you are in $c = 3 print the final 2 static divs. Reset $c to 1 when you reach $c = 3 and include a conditional asking if its the last item and its $c != 3 so you print out the last 2 static divs.

How to show a single Item in cakePHP

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;
?>

Child page content

I have a parent page that acts as menu for my portfolio.
It pulls in thumbnail images from the child pages which i have been able to accomplish with magic fields and some code. It dumps the images into a grid layout. The thumbnails are pulled into one container div like so:
div id="folio-content">
<div class="thumb-container">
<div class="thumb"><img src="/images/pic.jpg"/>
</div>JCPenny</div>
... </div>`
when the div gets filled up with 2 thumbnails I want to create a new container div and fill it with 2 images again and so on after 2 images.
So, if you had 4 images it would look like this.
<div id="folio-content"><!--/Main Container/-->
<div class="thumb-container">
<div class="thumb"><img src="/images/pic1.jpg"/>
</div>JCPenny</div>
<div class="thumb-container">
<div class="thumb"><img src="/images/pic1.jpg"/>
</div>Champ Car</div></div>
<div id="folio-content"><!--/Main Container/-->
<div class="thumb-container">
<div class="thumb"><img src="/images/pic1.jpg"/>
</div>JCPenny</div>
<div class="thumb-container">
<div class="thumb"><img src="/images/pic1.jpg"/>
</div>Champ Car</div></div>
this is the code I am using in my page.php file.
<?php get_header(); ?>
<div id="folio-content">
<?php
$projectpage = get_pages('child_of='.$post->ID.'&sort_column=post_date&sort_order=desc');
$count = 0;
foreach($projectpage as $page)
{
$content = $page->post_content;
if(!$content)
continue;
if ($count == 10) --- this is geting 10 images now, but I want to get them all.
break;
$count++;
$content = apply_filters('the_content', $content);
?>
<div class="thumb-container">
<div class="thumb"><a href="<?php echo get_permalink($page->ID); ?>"<?php echo get_image ("thumbnail",1,1,1,$page->ID);?></a>
</div><?php echo $page->post_title ?>
</div>
<?php
}
?>
</div><!--/close set!-->
</div>
also, how can I get ALL child pages? I have it set to 10 now with this if ($count == 10)
any help? thanks a ton again!!!!
I'm not familiar with "get_pages" but since Wordpress treats posts and pages in an identical manner you could use this.
$projectpage = get_posts('numberposts=-1&post_type=page&child_of='.$post->ID.'&sort_column=post_date&sort_order=desc');
The -1 removes the limit and gets ALL the specified pages.
I have cobbled together some code, that sort of sounds right but does not work at all! Which I am not surprised. But it is a starting point - please take a look at this code, maybe it is step in the right direction?
<?php
$projectpage = get_posts('numberposts=-1&post_type=page&child_of='.$post->ID.'&sort_column=post_date&sort_order=desc');
if (have_posts()) :
$i=0; // counter
while(get_posts()) : the_post();
if($i%2==0) { // if counter is multiple of 3, put an opening div ?>
<!-- <?php echo ($i+1).'-'; echo ($i+2); ?> -->
<div>
<?php } ?>
<div class="single_item">
<h2><?php the_title(); ?></h2>
</div>
<?php $i++;
if($i%2==0) { // if counter is multiple of 3, put an closing div ?>
</div>
<?php } ?>
<?php endwhile; ?>
<?php
if($i%2!=0) { // put closing div here if loop is not exactly a multiple of 3 ?>
</div>
<?php } ?>
<?php endif; ?>

Categories