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>
Related
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>';
}
}
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;
}
?>
In my version of Bootstrap there are 12 columns in a row.
In the below for loop each loop prints 2 columns wide.
What I want is that before the first column is printed (or $i === 0)<div class="row"> is printed.
Then after the number of columns is equal to 12 (or the variable $i is no longer less than 6) for the closing row tag to be printed (</div><!--row-->) and then for the variable $i to be reset to zero.
I have achieved the layout I desire but the problem is that Wordpress is looping infinitely and retrieving the logo of the same company hundreds of times.
<?php if (have_posts() ) : while (have_posts() ) : the_post(); ?>
<?php for ($i = 0; $i < 6; $i++) : ?>
<?php if ($i === 0) : ?>
<div class="row">
<?php endif; ?>
<div class="col-md-2">
<?php $image = get_field('sponsor_logo'); ?>
<a href="<?php the_permalink();?>">
<img class="img-responsive" src="<?php echo $image['sizes']['thumbnail-soft-crop'];?>" alt="<?php echo $image['alt']; ?>"/>
</a>
</div><!--col-md-2-->
<?php if ($i === 5) : ?>
</div><!--row-->
<?php $i = 0;
endif;
endfor; ?>
<?php endwhile; else : ?>
You are redeclaring $i = 0; at the bottom so when the loop reaches bottom after increment it is again reset to 0 and hence running again and again.
If i am right i think you want to start a new row after number of iterations you can try this with some modification according to your requirement
<?php if (have_posts()) : while (have_posts()) : the_post();
$i = 0;
if ($i!=0 && $i%3==0){ // add new row after 3 posts
echo "</div><div class='row'>";
// close previous row after 3 elements and start new.
}
$i++;
?>
Solution for Query in question.
<div class="row">
<?php if (have_posts()) : while (have_posts()) : the_post();
$i = 0;
if ($i != 0 && $i % 5 == 0) { // add new row after 5 posts
echo "</div><div class='row'>";
}
$i++;
?>
<div class="col-md-2">
<?php $image = get_field('sponsor_logo'); ?>
<a href="<?php the_permalink(); ?>">
<img class="img-responsive" src="<?php echo $image['sizes']['thumbnail-soft-crop']; ?>"
alt="<?php echo $image['alt']; ?>"/>
</a>
</div>
<?php endwhile; endif; ?>
</div>
I'd like to set the following up as a loop (so that the pattern is repeated every 5 elements). I've tried to read up on it and I believe I need to set it up as an array, but I have no idea where to start.
Here's my code:
<div class="ccm-page-list">
<?php
$i= 0;i;
foreach ($pages as $page):
$i++;
$title = $th->entities($page->getCollectionName());
$url = $nh->getLinkToCollection($page);
$target = ($page->getCollectionPointerExternalLink() != '' && $page->openCollectionPointerExternalLinkInNewWindow()) ? '_blank' : $page->getAttribute('nav_target');
$target = empty($target) ? '_self' : $target;
$description = $page->getCollectionDescription();
$description = $controller->truncateSummaries ? $th->shorten($description, $controller->truncateChars) : $description;
$description = $th->entities($description);
$img = $page->getAttribute('thumbnail');
$thumb = $ih->getThumbnail($img, 550, 550, true);
?>
<a href="<?php echo $url ?>" target="<?php echo $target ?>"> <div class="col-sm-4 grid-item">
<div class="item-img-blog" >
<img src="<?php echo $thumb->src ?>" width="auto" height="100%" alt="" />
<div <?php
if($i == 1) {
?>class="item-class-1" <?php }
if($i == 3) {
?>class="item-class-2" <?php }
if($i == 2) {
?>class="item-class-3" <?php }
if($i == 4) {
?>class="item-class-3" <?php }
if($i == 5) {
?>class="item-class-1" <?php }
?>>
<div class="text-container">
<h1><?php echo $description ?></h1>
<p><?php echo $date = $page->getCollectionDatePublic('d/m/Y'); ?></p>
</div>
</div>
</div>
</div></a>
<?php endforeach; ?>
</div>
I would really appreciate any help! Thanks in advance!
$i= 0;
$classes = array(1 => 1, 2 => 3, 3 => 2, 4 => 3, 5 => 1);
foreach ($pages as $page) {
$i++;
.....
echo 'class="item-class-'.$classes[$i % (count($classes) + 1)];
.....
}
You don't need an extra loop, you can use the modulo operator (aka, the remainder of a division) and some basic math to cope with the fact that you want to cycle 1->5:
$i= 0; // note that I removed the "i;" at the end of this line!
foreach ($pages as $page):
$cyclici = ($i % 5) + 1;
// then, use $cyclici everywhere you want to see that 1-5 1-5 pattern
...
if($cyclici == 1) {
...
// and increment $i at the *end* of the loop instead of the start.
$i++
endforeach;
EDITed to clarify the relationship between $i and $cyclici - $i is still incremented for each iteration of the loop, $cyclici is derived from that incrementing value to obtain the desired 1 2 3 4 5 1 2 3 4 5 ... sequence.
I have a script running through Codeigniter that pulls up a list of images pertaining to a certain product from the database. The max number of images per product is 10 but that is not always what is in the database. Thus, I am trying to pull from the database and complete the list of images even if it is less than 10. For instance,
I have
Image 1
Image 2
Image 3
Image 4
from the database. On the view, I am trying to still display the final six images (with blank data of course) so on the page itself it still shows the containers.
This is the code I have compiled so far from other advice and suggestions.
EDIT: My question essentially is how can I complete all 10 spots for images even if what I pull from the database is less than that as referenced in the example above?
From product model...
public function getImages($id) {
//run query
$this->db->from('images_main');
$this->db->where('images_main.product_id',$id);
$this->db->limit(10);
$this->db->order_by('img_order', 'asc');
$query = $this->db->get();
if ($query->num_rows() > 0)
{
return $query->result_array();
}else{
$this->session->set_flashdata( 'message', 'The query was not successful.' );
}
}
From view...
<ul id="sortable">
<?php
$count = count($img);
$max = 10;
$total = $max - $count;
for($t=1; $t<=$total; $t++):
$img[] = $t;
endfor;
print_r($img);
for ($i=1; $i<=10; $i++):
?>
<li class="img_list">
<div class="photo_content">
<div class="thumbnail" id="<?php echo $i; ?>"><img src="/crop.php?w=100&h=100&f=http://www.apriltwentyfive.com/product_images/regular_images/<?php echo $img[$i]['img_name'];?>"/></div>
<div class="uploads"><input type="text" name="photo_order" size="1" value="<?php echo $img[$i]['img_order']; ?>" readonly="readonly"/></div>
<div class="browse"></div>
</div>
</li>
<?php endfor; ?>
</ul>
As I understand your code, the variable $count contains the number of entries from the database.
So instead of having a for loop to 10, set it to $count (or use a foreach on $img).
Your $total variable is not the total but how many blank images there are to fill in. Have another loop for that.
Put both loops inside the <li class="img_list">...<li> tag.
<?php
$count = count($img);
$total = 10;
$difference = $total - $count;
?>
<ul id="sortable">
<?php
// Images from the database
for ($i = 0; $i <= $count - 1; $i++):
?>
<li class="img_list">
<div class="photo_content">
<div class="thumbnail" id="<?php echo $i; ?>"><img src="/crop.php?w=100&h=100&f=http://www.apriltwentyfive.com/product_images/regular_images/<?php echo $img[$i]['img_name'];?>"/></div>
<div class="uploads"><input type="text" name="photo_order" size="1" value="<?php echo $img[$i]['img_order']; ?>" readonly="readonly"/></div>
<div class="browse"></div>
</div>
</li>
<?php endfor; ?>
<?php
// Blank images
for ($i = 0; $i <= $difference - 1; $i++):
?>
<li class="img_list">
<div class="photo_content">
<div class="thumbnail">
<img src=".../path/to/blank_photo.png" alt="Title">
</div>
</li>
<!-- rest of HTML code -->
<?php endfor; ?>
</ul>
Hope this helps.
Notes:
IDs always start by 0, you should therefore start your loop at 0 and
not 1
<img> tags must have an alt property