The inner div boxes can have different heights but I need to be always above, like a vertical-align:top.
I now show this
But need always like this
Remeber, in tablet or mobile... responsive boostrap
The php code
<?php
$args = array( 'post_type' => 'clientes');
$loop = new WP_Query( $args );
$i=0;
if ( $loop->have_posts() ) : while ( $loop->have_posts() ) : $loop->the_post();
if ($i%2==0){ $bgcolor='#f3f3f3'; } else { $bgcolor='#fff'; }
?>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-2 partner" style="background-color: <?php echo $bgcolor; ?>">
<img src="<?php echo get_field('logotipo');?>" alt="<?php echo get_the_title();?>"/>
<?php if(get_field('proyectos')): ?>
<ul>
<?php while(has_sub_field('proyectos')): ?>
<li>
<p class="nameproject"><?php the_sub_field('nombre_proyecto'); ?></p>
<p><?php the_sub_field('tipologia_proyecto'); ?></p>
</li>
<?php endwhile; ?>
</ul>
<?php endif; ?>
</div>
<?php
$i++;
endwhile; endif;
?>
The only way I found to do this (without JavaScript) was to place the nth item in the (n % 3) column. You may need to change the order of posts.
// set defaults
$index = 0;
$post_cols = array('', '', '');
// start the loop
while (have_posts()) {
the_post();
//store posts in columns array
ob_start();
get_template_part('content', get_post_format());
$post_cols[$index % 3] .= ob_get_contents();
ob_end_clean();
$index++;
}// end while
//output column contents
echo '<div class="row">';
foreach ($post_cols as $col) {
echo '<div class="col-md-4 post-col">'.$col.'</div>';
}
echo '</div>';
You'll also need to make sure to remove the margin-left on the items in the first column.
.post-col:nth-child(3n+3) {
margin-left:0;
}
In your code you have defined col-xs-12 for mobile screens. If you want the layout to be same for all screen size then define col- xs with less column
if you are trying to create a pinterest style layout .please check out Salvattore & masonary
Also check this thread in stackoverflow . will come useful .
Related
working on a site, and I have some difficulties. It's really hard or not done by php what I am trying to accomplish!
So, there is a section named 'references', and each item belongs to a row (out of 4 rows).
At my static page it looks like this:
<div id="references-tiles">
<div class="reference">
<div class="reference-figure malmberg"></div>
</div>
<div class="reference">
<div class="reference-figure malmberg"></div>
</div>
****<div class="references-row"></div>****
<div class="reference">
<div class="reference-figure port"></div>
</div>
<div class="reference">
<div class="reference-figure malmberg"></div>
</div>
****<div class="references-row"></div>****
<div class="reference">
<div class="reference-figure malmberg"></div>
</div>
</div>
The reference-row acts like a separator
Each reference has to be a post, unfortunately wordpress won't work this way
Loop through Post and display them one the same way (only the items)
<div id="references-tiles">
<?php
$query = new WP_Query( array( 'category_name' => 'References' ) );
if ($query->have_posts()) : while ($query->have_posts()) : $query->the_post();
$image = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID)); ?>
<div class="reference">
<div class="reference-figure" style="background-image: url('<?php echo $image[0]; ?>')"></div>
</div>
<?php endwhile; endif; ?>
</div>
I just can't figure out how to control in a way, that a reference item is added to a row.
I tried using some modulo statements like:
if ($referenceCount % 4 == 0)
elseif ($referenceCount % 3 == 0)
elseif ($referenceCount % 2 == 0)
else
But this wasn't working out because as long I am in the loop, each item can be devided but not added in an already existing row.
Is there a way? Maybe to loop through the loop, add each reference item in a array, and depending on how many items total, I can devid them. Or use the loop 4 times and depending on the modulo, add a reference-item to a row? But I guess this wil make the site a bit slower..
Sorry for bad English, I am not clear at al, I am happy to try en explain myself better!
Regards and thanks!
IT-student
You should add a counter to your loop.
<div id="references-tiles">
<?php
$query = new WP_Query( array( 'category_name' => 'References' ) );
// Add a counter vvvvv
if ($query->have_posts()) : $i = 1; while ($query->have_posts()) : $query->the_post();
$image = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID)); ?>
<div class="reference">
<div class="reference-figure" style="background-image: url('<?php echo $image[0]; ?>')"></div>
</div>
<!-- If the counter is evenly divisible by 2, add a new row -->
<?php if ( $i % 2 === 0 ) : ?>
<div class="references-row"></div>
<?php endif; ?>
<!-- Increment the counter -->
<?php $i++; endwhile; endif; ?>
</div>
You can use array_chunk on the returned $query array
NOTE: The examples uses foundation's grid system to better display the outcome.
<?php
/**
* The second argument for array_chunk takes the size of the chunks
* ie: the number of columns you want to display per row
*/
$columnsPerRow = 4;
$query = new WP_Query( array( 'category_name' => 'References' ) );
if($query->have_posts()) : foreach(array_chunk($query->get_posts(), $columnsPerRow) as $posts) : ?>
<div class="row">
<?php foreach($posts as $post) : setup_postdata($post); ?>
<div class="columns small-6 medium-4">
<?php
/**
* Fetch the post thumbnail
* to be used as a background
*/
$thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ));
?>
<div class="panel" style='background:url("<?php echo $thumbnail[0]; ?>")'> </div>
</div>
<?php endforeach; ?>
</div> <!-- end row -->
<?php
endforeach;
endif;
wp_reset_postdata();
?>
You don't need to use a counter, wordpress has a counter as it is in their loop.
<?php if ($query->current_post%2) { ?>
<div class="references-row"></div>
<?php } ?>
Make sure this code is inside the loop and before the endwhile.
I am building a website with ACF and I have two different categories of pages: articles and stories.
I would like build my page such that it is a list alternating articles in stories, but currently I'm getting all the articles first, then all the stories instead of them being interlaced.
You can see the website here http://www.ndstudio.no/wp-mindthegap/
I want the loop to be like this:
POST 1 (ARTICLE)
POST 2 (STORY)
POST 3 (ARTICLE)
POST 4 (STORY)
But at the moment it´s like this:
POST 1 (ARTICLE)
POST 2 (ARTICLE)
POST 3 (STORY)
POST 4 (STORY)
This is my code
<?php
$args = array(
'cat' => 5,
'post_type' => array( 'page' ),
'order' => 'ASC'
);
query_posts( $args );
// The Loop
while ( have_posts() ) : the_post();
?>
<?php $colour = get_field('colour'); ?>
<div class="<?php print $colour; ?>-wrap">
<div class="first-text-content">
<h1 class="title-page"><?php the_title(); ?></h1>
<?php
// check if the repeater field has rows of data
if( have_rows('block') ):
// loop through the rows of data
while ( have_rows('block') ) : the_row();
?>
<!-- <p><?php the_sub_field('type'); ?><p> -->
<?php
$type = get_sub_field('type');
$quote = get_sub_field('quote');
$text = get_sub_field('text');
if ($type == "text") {
?>
<?php the_sub_field('text'); ?>
<?php
} else if ($type == "quote") {
?>
<div class="quote"><?php the_sub_field('quote'); ?></div>
<?php
}
?>
<?php
endwhile;
else :
// no rows found
endif;
?>
</div>
</div>
<?php
endwhile;
// Reset Query
wp_reset_query();
?>
<!-- STORIES categories -->
<?php
$args = array(
'cat' => 4,
'post_type' => array( 'page' ),
'order' => 'ASC'
);
query_posts( $args );
// The Loop
while ( have_posts() ) : the_post();
?>
<div class="stories">
<div class="stories-length">
<div class="scroll-right"><img src="http://www.ndstudio.no/wp-mindthegap/wp-content/uploads/2015/05/scroll-right.png" /></div>
<img class="intro-image" src="<?php the_field('intro-image'); ?>" alt="" />
<div class="intro-column">
<h1 class="title-page"><?php the_title(); ?></h1>
<?php the_field('intro-text'); ?>
</div>
<?php
// check if the repeater field has rows of data
if( have_rows('content_block') ):
//consoleLog(get_field('block'));
// loop through the rows of data
while ( have_rows('content_block') ) : the_row();
?>
<!-- <p><?php the_sub_field('type'); ?><p> -->
<?php
// the_sub_field is printing the value, which is output into HTML
// get_sub_field is returning the value, which you'll store in a variable
$select = get_sub_field('select');
$textfield = get_sub_field('textfield');
$video = get_sub_field('video');
$quote = get_sub_field('quote');
$bgcolor = get_sub_field('bgcolor');
$image1 = get_sub_field('image1');
$image2 = get_sub_field('image2');
if ($select == "textfield") {
?>
<div class="text-column"><?php the_sub_field('textfield'); ?></div>
<?php
} else if ($select == "video") {
?>
<div class="video-row-2"><div class="article-video-2"><?php the_sub_field('video'); ?></div></div>
<?php
} else if ($select == "quote") {
?>
<div class="nautral-row"><div class="quotes"><?php the_sub_field('quote'); ?></div></div>
<?php
} else if ($select == "image1") {
?>
<div class="<?php print $bgcolor; ?>-row">
<img class="article-image" src="<?php the_sub_field('image1'); ?>" alt="" />
<?php
} else if ($select == "image2") {
?>
<img class="article-image" src="<?php the_sub_field('image2'); ?>" alt="" /></div>
<?php
}
?>
<?php
endwhile;
else :
// no rows found
endif;
?>
</div>
</div>
<?php
endwhile;
// Reset Query
wp_reset_query();
?>
Thank you so much for having a look.
Your current structure is:
Get Posts (A)
Render (A)
Get Posts (B)
Render (B)
Which is why it's following that pattern.
You need to either fetch and cache all the results before rendering:
Get Posts (A) -> Cache1
Get Posts (B) -> Cache2
Interleave/Merge Caches to make alternating Array
Render Merged Cache
Alternatively, cache the output.
Get Posts (A)
Render -> Cache
Get Posts (B)
Render -> Cache
Output Render Cache
Unless there is something Wordpress specific I don't know - those seem the two easiest approaches.
I am working on a WordPress project, using the Advanced Custom Fields plugin.
However I am getting a crazy infinite loop from my code, so I've obviously messed things up somewhere, however after a good two hours looking at it I can't see the problem.
<?php get_header(); ?>
<?php
// If the loop has posts
if (have_posts()) :
// For each post this page has
while (have_posts()) : the_post();
// Display the Flexible Content
while(has_sub_field('add_row')):
// If the content type is Tagline
if(get_row_layout() == 'tagline'): ?>
<div class="row paddingBottom paddingTop">
<div class="col-xs-12">
<h3 class="tagLine"><?php the_sub_field('tagline'); ?></h3>
</div>
</div>
<?php
// If the content type is a Featured Image
/*elseif ( get_row_layout() == 'featured_image' ): ?>
<div class="col-xs-12 textCenter">
<?php
$attachment_id = get_sub_field('featured_image');
$size = "full-width"; // (thumbnail, medium, large, full or custom size)
$image = wp_get_attachment_image_src( $attachment_id, $size );
?>
<img src="<?php echo $image[0]; ?>" alt="<?php the_title(); ?>" />
</div>
<?php*/
// If the content type is a horizontal rule
elseif ( get_row_layout() == 'horizontal_rule' ) : ?>
<div class="row">
<div class="col-xs-12">
<hr />
</div>
</div>
<?php
// If the content type is Columns
elseif ( get_row_layout() == 'columns' ):
// If there is at least one column section
if(get_sub_field('column')):
// For each column section
while(has_sub_field('column')): ?>
<div class="row paddingTop paddingBottom">
<?php
if(get_sub_field('column_content_type')):
$count_rows = 0;
// Counting
while(has_sub_field('column_content_type')):
$count_rows++;
endwhile;
// Loop
while(has_sub_field('column_content_type')): ?>
<div class="
<?php /*
if ( $count_rows == 1 ) :
echo "col-xs-12";
elseif ( $count_rows == 2 ) :
echo "col-xs-6";
elseif ( $count_rows == 3 ) :
echo "col-xs-6 col-sm-4";
elseif ( $count_rows == 4 ) :
echo "col-xs-6 col-sm-6 col-md-4";
endif; */
?>
"> <?php
// Title
if ( get_sub_field('title') ) : ?>
<h2 class="smallTitle"><?php the_sub_field('title');?></h2><?php
endif;
// Text Area
if ( get_sub_field('text') ) :
the_sub_field('text');
endif;
// Link
if ( get_sub_field('link') ) : ?>
<?php // eventually need to make it so you can change the link text ?>
<a class="textCenter" href="<?php the_sub_field('link'); ?>">
More info
</a> <?php
endif; ?>
</div> <?php
endwhile;
endif;
?>
</div>
<?php
endwhile; // end for each column section
endif; // end checking for at least one column section
endif; // end checking content type is columns
endwhile; // end flexible content
endwhile; // end for each post
endif; // end checking for at least one post
?>
<?php get_footer(); ?>
while(has_sub_field('column_content_type')):
$count_rows++;
endwhile;
That's your problem... But it could be one of many based on what I'm seeing. It looks like you think while loops work like if statements... All you are doing in that loop is incrementing it over and over. It will never end.
I think the mistake is
// Display the Flexible Content
while(has_sub_field('add_row')):
i think you need to use if(){
// Code
}
instead of "while"
I use a slider for my Wordpress featured articles. It selects a category and returns a custom amount of posts.
How do I make the first post that is displayed to be a custom one? Can I add an ID of a specific post directly in the slider code to make that post appear first, followed by the other ones that are returned by the original query?
For instance, on the page, the first post would be ID 6 (written in the source code manually) and the second, third and fourth posts are the ones returned by the query in the original code. How is this possible?
Someone suggested that this is very simple, all I need to do is to make another query before this to get the custom post, then close the query, reopen it to get the next query (that is in the slider code) and finally push the items into an array together. My very limited knowledge of PHP restricts me from understanding how to do this.
I know how to get a custom post, this code works:
<?php
$post_id = 6;
$queried_post = get_post($post_id);
?>
However, I do not know how I add this and the original query into an array. Do you?
Here is the full code for the slider:
<?php
$responsive = 'on' != get_option('henrik_responsive_layout') ? false : true;
$featured_auto_class = '';
if ( 'on' == get_option('henrik_slider_auto') ) $featured_auto_class .= ' et_slider_auto et_slider_speed_' . get_option('henrik_slider_autospeed');
?>
<div id="featured" class="<?php if ( $responsive ) echo 'flexslider' . $featured_auto_class; else echo 'et_cycle'; ?>">
<a id="left-arrow" href="#"><?php esc_html_e('Previous','henrik'); ?></a>
<a id="right-arrow" href="#"><?php esc_html_e('Next','henrik'); ?></a>
<?php if ( $responsive ) { ?>
<ul class="slides">
<?php } else { ?>
<div id="slides">
<?php } ?>
<?php global $ids;
$ids = array();
$arr = array();
$i=0;
$featured_cat = get_option('henrik_feat_cat');
$featured_num = (int) get_option('henrik_featured_num');
if (get_option('henrik_use_pages') == 'false') query_posts("showposts=$featured_num&cat=".get_cat_ID($featured_cat));
else {
global $pages_number;
if (get_option('henrik_feat_pages') <> '') $featured_num = count(get_option('henrik_feat_pages'));
else $featured_num = $pages_number;
query_posts(array
('post_type' => 'page',
'orderby' => 'menu_order',
'order' => 'ASC',
'post__in' => (array) get_option('henrik_feat_pages'),
'showposts' => (int) $featured_num
));
} ?>
<?php if (have_posts()) : while (have_posts()) : the_post();
global $post; ?>
<?php if ( $responsive ) { ?>
<li class="slide">
<?php } else { ?>
<div class="slide">
<?php } ?>
<?php
$width = $responsive ? 960 : 958;
$height = 340;
$small_width = 95;
$small_height = 54;
$titletext = get_the_title();
$thumbnail = get_thumbnail($width,$height,'',$titletext,$titletext,false,'Featured');
$arr[$i]['thumbnail'] = get_thumbnail($small_width,$small_height,'',$titletext,$titletext,false,'Small');
$arr[$i]['titletext'] = $titletext;
$thumb = $thumbnail["thumb"];
print_thumbnail($thumb, $thumbnail["use_timthumb"], $titletext, $width, $height, ''); ?>
<div class="featured-top-shadow"></div>
<div class="featured-bottom-shadow"></div>
<div class="featured-description">
<div class="feat_desc">
<p class="meta-info"><?php esc_html_e('Posted','henrik'); ?> <?php esc_html_e('by','henrik'); ?> <?php the_author_posts_link(); ?> <?php esc_html_e('on','henrik'); ?> <?php the_time(esc_attr(get_option('henrik_date_format'))) ?></p>
<h2 class="featured-title"><?php the_title(); ?></h2>
<p><?php truncate_post(410); ?></p>
</div>
<?php esc_html_e('Read More', 'henrik'); ?>
</div> <!-- end .description -->
<?php if ( $responsive ) { ?>
</li> <!-- end .slide -->
<?php } else { ?>
</div> <!-- end .slide -->
<?php } ?>
<?php $ids[] = $post->ID; $i++; endwhile; endif; wp_reset_query(); ?>
<?php if ( $responsive ) { ?>
</ul> <!-- end .slides -->
<?php } else { ?>
</div> <!-- end #slides -->
<?php } ?>
</div> <!-- end #featured -->
<div id="controllers" class="clearfix">
<ul>
<?php for ($i = 0; $i < $featured_num; $i++) { ?>
<li>
<div class="controller">
<a href="#"<?php if ( $i == 0 ) echo ' class="active"'; ?>>
<?php print_thumbnail( $arr[$i]['thumbnail']['thumb'], $arr[$i]['thumbnail']["use_timthumb"], $arr[$i]['titletext'], $small_width, $small_height ); ?>
<span class="overlay"></span>
</a>
</div>
</li>
<?php } ?>
</ul>
<div id="active_item"></div>
</div> <!-- end #controllers -->
If you choose to reply, please be detailed with code example, thank you.
line 39: replace that line with this one code below:
<?php if (have_posts()) : while (have_posts()) :
global $post;
if (!$first_time)
{
$post_id = 6;
$post = get_post($post_id);
$first_time = 1;
}
else the_post();
?>
Solution idea is simple:
Check for first-time loop
:firt loop - simply get needed post with "get_post()" function
:other loops - get posts from original query by "the_post()" function.
I am running a wordpress if while statement and would like my items to display in a column format.
I am currently using 960.gs which is your standard 960 grid system, and by default adds 10px padding to left and right, by simply passing a class of alpha or omega you can get rid of these.
How do I get php to execute a statment for every 1st one to add alpha and 4th one omega?
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="grid_4">
<?php $wp_query->is_home = false; ?>
<div class="entry">
<h3 style="margin-bottom:10px;"><?php the_title(); ?></h3>
<?php //the_excerpt() ?>
</div>
</div>
<?php endwhile; endif; ?>
Try maybe something like this. I wasn't sure what you meant by every 1st and 4th so I made it the way you can see. You should be able to customize it yourself.
<?php $counter = 0; ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php
$div = '<div class="entry';
if ($counter % 4 == 0)
$div .= " alpha";
else if($counter % 4 == 3)
$div .= " omega";
echo $div . '">';
?>
<div class="grid_4">
<?php $wp_query->is_home = false; ?>
<div class="entry">
<h3 style="margin-bottom:10px;"><?php the_title(); ?></h3>
<?php //the_excerpt() ?>
</div>
</div>
<?php $counter++; ?>
<?php endwhile; endif; ?>
Try this:
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="grid_4">
<?php $wp_query->is_home = false; ?>
<div class="entry <?php if (!($i++ % 4)) { ?>alpha<?php } ?> <?php if (!(($j++)+1 % 4)) { ?>omega<?php } ?>">
<h3 style="margin-bottom:10px;"><?php the_title(); ?></h3>
<?php //the_excerpt() ?>
</div>
</div>
<?php endwhile; endif; ?>
Looks kind of like a repeat of something I've seen recently. (Not your fault, it was poorly named and you wouldn't have been able to search on it). Help needed improving a foreach loop
I think what you're looking for would be more precisely described as class=alpha on row 4k+1, class=omega on row=4k
I'm not familiar with your if/while syntax, and the embedded PHP throws me off a little. But I think what you want to do:
is initialize a counter to 0 before the while loop ($i = 0). Increment it at the end of the loop ($i++)
I'm not sure where you want to put these classes, but put if ($i%4==1) class="alpha" and if(i%4==0) class="omega" (add php tags as appropriate, for some reason they werent showing up right for me).