Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Related posts in conditional columns. WordPress

  • SOLVED

I have the following script that displays my related posts based on the category.

<?php // begin related posts based on categories
$orig_post = $post;
global $post;
$categories = get_the_category($post->ID);
if ($categories) {
$category_ids = array();
foreach($categories as $individual_category) $category_ids[] = $individual_category->term_id;

$args=array(
'category__in' => $category_ids,
'post__not_in' => array($post->ID),
'posts_per_page'=> 4, // Number of related posts that will be shown.
'caller_get_posts'=>1
);

$my_query = new wp_query( $args );
if( $my_query->have_posts() ) {
echo '<div id="related_posts"><h3>Related Articles:</h3><ul>';
while( $my_query->have_posts() ) {
$my_query->the_post();?>


<li>
<div class="relatedcontent">
<h3><a href="<? the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a>:</h3></div>
<div class="relatedthumb"><a href="<? the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_post_thumbnail('large', array('class' => 'aligncenter')); ?></a></div>
</li>
<? }
echo '</ul></div>';
}
}
$post = $orig_post;
wp_reset_query(); // end related posts based on category ?>


This currently displays the 4 most recent related posts based on the same category in a list and uses the large images size. I would like the script to be modified so that:

If there is only one related post it is displayed in size 'large' and in a list as above however
if there are 2-4 related posts they are displayed in size 'medium' and in a 2 column layout.

Please also provide the css for cross browser usage.

Answers (3)

2013-05-17

Daniel Yoen answers:

Hello,

try this :

PHP :
<?php

$orig_post = $post;
global $post;
$categories = get_the_category($post->ID);
if ($categories)
{
$category_ids = array();
foreach ($categories as $individual_category)
$category_ids[] = $individual_category->term_id;
$args = array(
'category__in' => $category_ids,
'post__not_in' => array(
$post->ID
),
'posts_per_page' => 4,
'caller_get_posts' => 1
);
$my_query = new wp_query($args);
if ($my_query->have_posts())
{
$thumb = $cond = null;
$count = $my_query->post_count;

switch($count)
{
case 1:
$cond = "one";
$thumb = "large";
break;
case 2:
$cond = "two";
$thumb = "medium";
break;
case 3:
$cond = "three";
$thumb = "medium";
break;
case 4:
$cond = "four";
$thumb = "medium";
break;
}

echo '<div id="related_posts"><h3>Related Articles:</h3><ul>';
while ($my_query->have_posts())
{
$my_query->the_post(); ?>

<li class="<?php echo $cond; ?>">
<div class="relatedcontent">
<h3><a href="<?php the_permalink();?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a>:</h3>
</div>

<div class="relatedthumb"><a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_post_thumbnail($thumb, array('class' => 'aligncenter'));?></a></div>

</li>
<?php
}
echo '</ul></div>';
}
}
$post = $orig_post;
wp_reset_query();

?>


CSS :
#related_posts{
position: relative;
width: 100%;
overflow: hidden;
}
#related_posts ul{
position: relative;
width: 125%;
}
#related_posts ul li{
float: left;
}
#related_posts ul li img{
width: 100%;
}
#related_posts ul li.one{
width: 100%;
float: none !important;
}
#related_posts ul li.two{
width: 45%;
margin-right: 10%;
}
#related_posts ul li.three{
width: 32%;
margin-right: 4%;
}
#related_posts ul li.four{
width: 24%;
margin-right: 4%;
}


hope this help :-)


julesphoto comments:

Great solution Daniel!

2013-05-17

Arnav Joy answers:

try this , it will display medium thumbnails


<?php // begin related posts based on categories

$orig_post = $post;

global $post;

$categories = get_the_category($post->ID);

if ($categories) {

$category_ids = array();

foreach($categories as $individual_category) $category_ids[] = $individual_category->term_id;



$args=array(

'category__in' => $category_ids,

'post__not_in' => array($post->ID),

'posts_per_page'=> 4, // Number of related posts that will be shown.

'caller_get_posts'=>1

);



$my_query = new wp_query( $args );

$num_posts_found = $my_query->found_posts;

if( $my_query->have_posts() ) {

echo '<div id="related_posts"><h3>Related Articles:</h3><ul>';

while( $my_query->have_posts() ) {

$my_query->the_post();?>





<li>

<div class="relatedcontent">

<h3><a href="<? the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a>:</h3></div>

<div class="relatedthumb"><a href="<? the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>">


<?php
if( $num_posts_found == 1)
the_post_thumbnail('large', array('class' => 'aligncenter'));
else
the_post_thumbnail('medium', array('class' => 'aligncenter'));

?>

</a>

</div>

</li>

<? }

echo '</ul></div>';

}

}

$post = $orig_post;

wp_reset_query(); // end related posts based on category ?>

2013-05-17

Luis Abarca answers:

Change size of thumbnail and add special class for li's

<?php
// begin related posts based on categories

global $post;

$orig_post = $post;
$categories = get_the_category($post->ID);

if ( $categories ) {

$category_ids = array();

foreach($categories as $individual_category) {
$category_ids[] = $individual_category->term_id;
}

$args = array(
'category__in' => $category_ids,
'post__not_in' => array($post->ID),
'posts_per_page' => 4, // Number of related posts that will be shown.
'caller_get_posts' =>1
);

$my_query = new WP_Query( $args );

if ( $my_query->have_posts() ) {
echo '<div id="related_posts"><h3>Related Articles:</h3><ul>';

$thumb_size = 'medium';

if ( $my_query->post_count < 2) {
$thumb_size = 'large'
}

while( $my_query->have_posts() ) {
$my_query->the_post();

?>
<li class="<?php echo $thumb_size ?>">
<div class="relatedcontent">
<h3><a href="<? the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a>:</h3></div>
<div class="relatedthumb"><a href="<? the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_post_thumbnail($thumb_size, array('class' => 'aligncenter')); ?></a></div>
</li>
<?php
} // endwhile

echo '</ul></div>';
} // endif $my_query
} // endif $categories

$post = $orig_post;

wp_reset_query();

// end related posts based on category ?>


Luis Abarca comments:

Then add this styles to show 2 columns


li.medium {
float: left;
size: 48%;
}