I am using ACF repeater to display images, I want to achieve layout so that 1 - 2 - 3 elements go with col-lg-4 grid and 4-5-6-7 go with col-lg-3 grid and so on, repeating that layout for all items
I've tried using but it's to get 3 elements into 1 div
mostly my layout will be
first row 3x col-lg-4
second row 4x col-lg-3
third row 3x col-lg-4
fourth row 4x col-lg-3
<?php
// check if the repeater field has rows of data
if( have_rows('gallery_repeater') ):
// loop through the rows of data
// add a counter
$count = 0;
$group = 0;
while ( have_rows('gallery_repeater') ) : the_row();
// vars
$teacher_bio = get_sub_field('image');
if ($count % 3 == 0) {
$group++;
?>
<div id="teachers-<?php echo $group; ?>" class="cf group-<?php echo $group; ?>">
<?php
}
?>
<div class="teacher">
<img src="<?php the_sub_field('image'); ?>" />
<?php echo $teacher_bio; ?>
</div><!-- .teacher -->
<?php
if ($count % 3 == 2) {
?>
</div><!-- #teachers -->
<?php
}
$count++;
endwhile;
else :
// no rows found
endif;
?>
Hi Please check below code for reference :
$gallery_repeater = get_field('gallery_repeater');
foreach (array_chunk($gallery_repeater, 7) as $key => $value) {
foreach ($value as $k => $val) {
$class = $k < 3 ? 'col-lg-3' : 'col-lg-4';
echo '<div class="'.$class.'"> <img src="'.$val['image'].'" />'.$val['teacher_bio'].'</div>';
}
}
Related
I created a database with 5 categories and created a page to display the available categories that I pull from the database. The problem is that I have 4 divs that have the following class ( col-md-3 ) and one that is ( col-md-6 ).
Code for gathering the first 5 categories ( col-md-3 ):
<?php
$this->db->limit(4);
$categories = $this->db->get_where('category', array('parent' => 0))->result_array();
foreach ($categories as $key => $category):
?>
<div class="gallery-item">
<div class="grid-item-holder">
<div class="listing-item-grid">
<img src="<?php echo base_url('uploads/category_thumbnails/').$category['thumbnail'];?>" alt="" />
<div class="listing-counter">
<span>2</span>Locations
</div>
<div class="listing-item-cat">
<h3><?php echo $category['name']; ?></h3>
<p><?php echo $category['name']; ?></p>
</div>
</div>
</div>
</div>
<?php endforeach; ?>
Code for gathering another 1 category ( col-md-6 ):
<?php
$this->db->limit(1);
$categories = $this->db->get_where('category', array('parent' => 0))->result_array();
foreach ($categories as $key => $category):
?>
<div class="gallery-item gallery-item-second">
<div class="grid-item-holder">
<div class="listing-item-grid">
<img src="<?php echo base_url('uploads/category_thumbnails/').$category['thumbnail'];?>" alt="" />
<div class="listing-counter">
<span>2</span>Locations
</div>
<div class="listing-item-cat">
<h3><?php echo $category['name']; ?></h3>
<p><?php echo $category['name']; ?></p>
</div>
</div>
</div>
</div>
<?php endforeach; ?>
With this code, I get a display of categories but instead of displaying 5 categories, it repeats one of the displayed 4. How can I fix the code so that the display automatically continues to display the categories in all divs? If I forgot to write something, correct it or ask, I will update the question.
It looks like you are getting the first 4 items for the first foreach loop and then getting the first one again for the second loop. Would it make sense to get all 5 and process them in one single foreach loop only adding 'gallery-item-second' on the 5th item, something like ...
<?php
$this->db->limit(5);
$categories = $this->db->get_where('category', array('parent' => 0))->result_array();
$index = 0;
foreach ($categories as $key => $category):
$index++;
if ($index == 5) {
echo '<div class="gallery-item gallery-item-second">';
} else {
echo '<div class="gallery-item">';
}
?>
<div class="grid-item-holder">
. . .
</div>
</div>
<?php endforeach; ?>
Or if you must have the second loop then get 5 items and only show the 5th.
And to make sure you get the same 5 you could use a sort criteria when you get the items.
The problem is resolved with math:
I have added the next code:
...
$num = 5;
$i = 0;
foreach ($categories as $key => $category):
if ($i < ($num - 1)) {
// show div col-md-3
} else {
// show div col-md-6
}
endif;
I have bootstrap column in while loop, what I want is if bootstrap last column is odd then I want column to be 12 (col-12), I found the way to check number even or odd but want to check last number so if last number (last column) is odd I want column to be 12 else remain col-6
I have tried:
<div class"<?php echo ($i == (2 || 4 || 6) )?'col-md-6':'col-md-12'; ?>">
display content there in while loop
</div>
<div class"<?php echo ($i % 2 == 0)?'col-md-6':'col-md-12'; ?>">
display content there in while loop
</div>
but could get the job done...
You make a mistake in writing HTML. But version with modulo must work:
<div class="row">
<?php for ($i = 0; $i < 100; $i++) { ?>
<div class="<?php echo ($i%2 === 0) ? 'col-md-6' : 'col-md-12'; ?>">
display content there in while loop
</div>
<?php } ?>
</div>
solution By m_hutley
Where $i = counter;
$total = acf repeater count;
<div class="<?php echo ($i == $total && $total % 2 !== 0 )?'col-md-12':'col-md-6'; ?>" id="<?php echo $i; ?>">
<h1><?php echo "contain"; ?></h1>
</div>
As I am trying to make bootstrap grid structure using foreach two column and inside it's one row and two rows structure. Attached a screen shot for better to better view.
Note: Not issue with CSS but first three items are goes in grid as picture.
Counter is not taking col-md-4 and not sure where to use Counter increment counter++? What if I want to show first three items using foreach?
Any other way to workaround on this layout? Tried so far as below
<?php $counter = 0;
foreach($view->result as $result) {
<div id="hot-post" class="row hot-post">
<?php if( $counter == 0 || $counter % 3 == 0 ) { ?>
<div class="col-md-8 hot-post-left">
<div class="post post-thumb">
// first element common body
</div>
</div>
<?php if( $counter == 1 || $counter == 2 ) { ?>
<div class="col-md-4 hot-post-right">
<?php if( $counter == 1){ ?>
<div class="post post-thumb">
// second element common body
</div>
</php if ( $counter == 2){
<div class="post post-thumb">
// third element common body
</div>
</div>
<?php counter++; } } ?>
</div> //closing row
<?php } ?> //closing foreach
There are couple of syntax errors in your code, such as:
Opening and closing braces are not in sync i.e. foreach loop and if block(s) are not closed properly
counter++; should be $counter++;
Plus, there are few logical errors as well. Change your code in the following way,
<?php
$counter = 0;
foreach($view->result as $result) {
?>
<div id="hot-post" class="row hot-post">
<?php if( $counter == 0 || $counter % 3 == 0 ) { ?>
<div class="col-md-8 hot-post-left">
<div class="post post-thumb">
// first element common body
</div>
</div>
<?php } ?>
<?php if( $counter != 0 && $counter % 3 != 0 ) { ?>
<div class="col-md-4 hot-post-right">
<?php if( $counter % 3 == 1){ ?>
<div class="post post-thumb">
// second element common body
</div>
<?php } ?>
<?php if ( $counter % 3 == 2){ ?>
<div class="post post-thumb">
// third element common body
</div>
</div>
<?php } ?>
</div>
<?php
}
++$counter;
}
?>
I have an ACF Repeater field i'd like to output as an accordion grid, like so:
<div class="intro row">
<div class="item item-1">name 1</div>
<div class="item item-2">name 2</div>
<div class="item item-3">name 3</div>
<div class="item item-4">name 4</div>
</div>
<div class="expanded row">
<div class="expand" id="item-1">expanded info 1</div>
<div class="expand" id="item-2">expanded info 2</div>
<div class="expand" id="item-3">expanded info 3</div>
<div class="expand" id="item-4">expanded info 4</div>
</div>
<div class="intro row">
<div class="item item-5">name 5</div>
<div class="item item-6">name 6</div>
<div class="item item-7">name 7</div>
<div class="item item-8">name 8</div>
</div>
<div class="expanded row">
<div class="expand" id="item-5">expanded info 5</div>
<div class="expand" id="item-6">expanded info 6</div>
<div class="expand" id="item-7">expanded info 7</div>
<div class="expand" id="item-8">expanded info 8</div>
</div>
I can group the initial row fine, it's just the second "expanded" row i'm having trouble with. How can I repeat and group the second row of 4 correctly in the same loop? My current PHP:
<?php // check if the repeater field has rows of data
if( have_rows('features') ):
// loop through the rows of data
// add a counter
$count = 0;
$group = 0;
while ( have_rows('features') ) : the_row();
$name = get_sub_field('feature_name');
$expandedInfo = get_sub_field('feature_info');
if ($count % 4 == 0) {
$group++;
?>
<div class="intro row">
<?php
}
?>
<div class="item item-<?php echo $count; ?>">
<?php echo $name ?>
</div><!-- item-->
<?php
if ($count % 4 == 3) {
?>
</div><!-- intro-->
<?php
}
$count++;
endwhile;
else :
// no rows found
endif;
?>
The second 'expanded' row can be done so that you store each count (item-1,item-2) in an array or just traverse through all the count when you close the intro row.
<?php
if ($count % 4 == 3) {
?>
</div><!-- intro-->
<div class="expanded row">
<?php
$start = $count-3;
// if $count is 4, $start will be 1, and the $i will go to 4
// if $count is 8, $start will be 5
for($i=$start;$i<=$count;$i++){
echo '<div class="expand" id="item-' . $i . '"></div>';
} ?>
</div>
<?php
}
This is just an example. I would suggest you to store each $count in an array and then use the count($array) to get the number of them. After you have traversed the array, reset it.
The Array Approach
<?php // check if the repeater field has rows of data
if( have_rows('features') ):
// loop through the rows of data
// add a counter
$count = 0;
$group = 0;
// Content Array
$content_array = array();
while ( have_rows('features') ) : the_row();
$name = get_sub_field('feature_name');
$expandedInfo = get_sub_field('feature_info');
// Adding the Expanded Info
$content_array[ 'item-' . $count ] = $expandedInfo;
if ($count % 4 == 0) {
$group++;
?>
<div class="intro row">
<?php
}
?>
<div class="item item-<?php echo $count; ?>">
<?php echo $name ?>
</div><!-- item-->
<?php
if ($count % 4 == 3) {
?>
</div><!-- intro-->
<div class="expanded row">
<?php
foreach( $content_array as $item_id => $expanded_info ) {
echo '<div class="expanded" id="' . $item_id . '">';
echo $expanded_info;
echo '</div>';
} ?>
</div>
<?php
// Resetting the Array
$content_array = array();
}
$count++;
endwhile;
else :
// no rows found
endif;
?>
okey, lets see ,
using variables to store your templates may helps a lot in this context ,
as follow :
$intro = '';
$expanded = '';
while (have_rows('features')) :
the_row();
if ($count % 4 == 0) {
$group++;
$intro .= '<div class="intro row">';
$expanded .= '<div class="expanded row">';
}
$intro .= '<div class="item item-' . $count . '"></div><!-- item-->';
$expanded .= '<div class="expand" id="item-' . $count . '"></div>';
if ($count % 4 == 3) {
$intro = '</div><!-- intro-->';
$expanded = '</div><!-- intro-->';
}
$count++;
endwhile;
I've made a quick example to explain to show you how using variables may fix your issue : https://3v4l.org/cKPP4
Can't test it right now, but I think something like that should work.
<?php // check if the repeater field has rows of data
if( have_rows('features') ):
// loop through the rows of data
// add a counter
$count = 0;
$group = 0;
$array = array();
while ( have_rows('features') ) : the_row();
$name = get_sub_field('feature_name');
$expandedInfo = get_sub_field('feature_info');
if ($count % 4 == 0) {
$group++;
?>
<div class="intro row">
<?php
}
?>
<div class="item item-<?php echo $count; ?>">
<?php echo $name ?>
</div><!-- item-->
<?php
array_push($array, $expandedInfo);
if ($count % 4 == 3) {
?>
</div><!-- intro-->
<div class="expanded row">
<?php
for ($i=0; $i < count($array); $i++) {
echo '<div class="expand" id="item-'.$i + 1.'">'.$array[$i].'</div>';
}
echo '</div>';
}
$count++;
endwhile;
else :
// no rows found
endif;
?>
So basically I am building a wordpress gallery, I need to have the images output into 2 rows, each row is 3 images across so essentially I am just splitting the output every 3..
I have that functionality working with a for loop using the modulus operator, what I need is that every 2 rows I need to have them wrapped in an outer HTML container
<div class="wrappy">
but I cant seem to get this quite right having worked on it most of yesterday, Im not that great at PHP but I understand enough to get by so any help at all would be great... I am using wordpress advanced custom fields for storing the images etc so you can ignore that part, the magic Im working on starts at
<div class="wrappy">
<?php
$rows = get_field('staff_slides', 'options');
$countmax = count($rows) - 1;
//echo $row_count;
$ender = "";
$mainEnder = "";
$outer_wrapper = "";
if( have_rows('staff_slides', 'options') ):
// loop through the rows of data
while ( have_rows('staff_slides', 'options') ) : the_row();
$image_id = get_sub_field('slide_image', 'options');
$staff_members_name = get_sub_field('staff_members_name', 'options');
$staff_members_position = get_sub_field('staff_members_position', 'options');
$staff_image = wp_get_attachment_image_src( $image_id , 'homepage-staff');
?>
<?php
echo '<div class="wrappy">';
echo '<div class="row">';
if( $ender != "script-ended" ) {
for( $i=0; $i <= $countmax; )
{
?>
<div class="staff-img c3">
<div class="staff-caption">
<h3><?php echo $rows[$i]['staff_members_name']; ?></h3>
<span></span>
<h4><?php echo $rows[$i]['staff_members_position']; ?></h4>
</div>
<img src="<?php echo wp_get_attachment_image_src( $rows[$i]['slide_image'], 'homepage-staff')[0]; ?>">
</div>
<?php
if( $i % 3 == 2 )
{
echo '</div><div class="row">';
}
if( $i == $countmax )
{
$ender = "script-ended";
}
if( $i == 6){
$outer_wrapper = "set";
}
$i++;
}
}
?>
<?php
if( $outer_wrapper == "set" ){
echo '</div><div class="wrappy">';
}
?>
You should use the array_chunk function to split the array in smaller arrays.
I'm not familiar with the ACF functions but you can do something like:
<div class="wrappy">
<?php
if( have_rows('staff_slides', 'options') ) :
$slides = array_chunk(get_field('staff_slides', 'options'), 3);
foreach ($slides as $slides_row) :
?>
<div class="row">
<?php foreach ($slides_row as $slide_element) : the_row(); ?>
<div class="staff-img c3">
<div class="staff-caption">
<h3><?php the_sub_field('staff_members_name', 'options'); ?></h3>
<span></span>
<h4><?php the_sub_field('staff_members_position', 'options'); ?></h4>
</div>
<img src="<?php echo wp_get_attachment_image_src( get_sub_field('slide_image', 'options'), 'homepage-staff')[0]; ?>">
</div>
<?php endforeach; ?>
</div>
<?php endforeach; else : ?>
No slides do to show
<?php endif; ?>
</div>
This way you create a multidimensional array, divided in chunks of 3 elements, and iterate throught it.