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>
Related
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.
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 have two columns and I want one post type to get distributed to each column evenly. So it’s two side-by-side divs and I want:
Div1 = Post1, Post3, Post5
Div2 = Post2, Post4, Post6
So basically get odd/even posts. Not exactly sure how to do it.
<?php query_posts('post_type=post-type'); ?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="column1">
<?php
//Get Odd Posts
?>
</div>
<div class="column2">
<?php
//Get Even Posts
?>
</div>
<?php endwhile; ?>
<?php else : ?>
//Something that happens when a post isn’t found.
<?php endif; ?>
You want to use the modulus operator something like this:
<?php
$i = 0;
for ($i = 0; $i <20; $i++){
$class = $i % 2 == 0 ? "even" : "odd";
echo "<div class='" . $class . "'>";
echo "</div>";
}
?>
To do what you want, first you have to store the results somewhere (as even/odd), then display them.
Though you should really target these posts with CSS, not PHP, as it's hackish at best.
<?php query_posts('post_type=post-type'); ?>
<?php if (have_posts()) : ?>
<?php
$i = 0;
while (have_posts())
{
$key = $i & 1 ? 'odd' : 'even';
$post[$key] = array(get_the_title() => get_the_content());
$i++;
}
?>
<div class="column1">
<?php foreach ($post['even'] as $title => $content) : ?>
<?php echo $title; ?>
<?php echo $content; ?>
<?php endforeach; ?>
</div>
<div class="column2">
<?php foreach ($post['odd'] as $title => $content) : ?>
<?php echo $title; ?>
<?php echo $content; ?>
<?php endforeach; ?>
</div>
<?php else : ?>
//Something that happens when a post isn’t found.
<?php endif; ?>
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;
?>
Dear Friends I have a Div of Images.
<div class="img_team_container">
<div class="img_team_subcontain">
<div class="img_team"></div>
</div>
</div>
My question is that How can I show four images per row and rows can be of any no with php.
Assuming you have a array $images of images:
<?php $i = 0; foreach($images as $image): ?>
<?php if($i === 0): ?>
<div class="row">
<?php endif; ?>
<?php echo sprintf('<img src="%s" />', $image['src']); ?>
<?php if($i === 4): $i = 0; ?>
</div>
<?php else: $i++; endif; ?>
<?php endforeach; ?>
well i dont see an image tag in your code but use modulo arithmetics.
<?
$perRow=4;
for($i=0;$i < count($myimages); $i++) {
echo '<img src="'.$myimages[$i].'"/>';
if(($i+1)%$perRow === 0) {
// we reched the end of the row, lets break
echo '<br/>';
}
}
?>