YARPP 3.3.1: list in two columns, or more.

You might be able to do this via just CSS but, if not, you could do it with a YARPP template:

https://mitcho.com/blog/projects/yarpp-3-templates/

I am using a YARP template (yarp-template-post-thumbnail.php), but it does not give such an option and I need help to code a two-column layout.

This is the content of the template:

<h3> Related Posts</h3>
<?php if ($related_query->have_posts()):?>
<ul class="related-posts">
    <?php while ($related_query->have_posts()) : $related_query->the_post(); ?>
    <li>  <?php $postimageurl = get_post_meta($post->ID, 'image', true); if ($postimageurl) { ?>
            <a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/thumb.php?src=<?php echo $postimageurl; ?>&h=150&w=300&zc=1&q=100" alt="<?php the_title(); ?>" width="300" height="150"/><br /></a>
            <?php } else { ?>
            <a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/thumb.php?src=<?php bloginfo('stylesheet_directory'); ?>/default.jpg&h=100&w=100&zc=1&q=100" alt="<?php the_title(); ?>" width="200" height="100"/></a>
            <?php } ?>
            <a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></li>

            <p class="post_meta"><span class="details"><?php _e('Archived in ', 'woothemes' ); ?> <?php the_category(', ') ?></span></p>

    <?php endwhile; ?>
</ul>
<?php else: ?>
<p>No related posts.</p>
<?php endif; ?>

assign width css satements to the related-posts class, with a bit of tweaking you should get it to lie in 2 columns.

Alternatively you could do it with PHP, but that would involve you modifying that template yourself.

I would like to continue to use the above template/code, but I’m not a coder, so my question is how to tweak/code so that it displays in 2 columns?

I use microkid related posts rather than yarp but this should give you a basic outline of css to get columns just change the width until you get the look you want.

#related-posts ul li{list-style-type: none; font-size: 12px; padding-left: 10px; display: inline-block;
width: 170px; text-align: center;
vertical-align: top;}

As I say I don’t have yarp so you may need to do some adjustments to the above code for your own installation.

I don’t see where your example fit into the above code…?

with invalid html output by the plugin (or modificatins to it) https://validator.w3.org/check?uri=http%3A%2F%2Fwww.ross.no%2Fcommunicate%2F2011%2F08%2F01%2Fnoctilucent-clouds-3%2F&charset=%28detect+automatically%29&doctype=Inline&group=0 as indicated for instance here:
Line 762, Column 33: document type does not allow element "p" here; assuming missing "li" start-tag

it is quite impossible to use css to format the output into two columns.

re-organize the code:
https://pastebin.com/vigwVnKU

I tried your revised code and added the styles in .css, but still only one column…..

unfortunately, you removed the code again, so I have no chance to check what fine tuning might be needed ;-(

(code suggestion was evaluated with firefox web developer add-on)

I haven’t removed or changed anything. I have tested only on offline local testbed.

I have uploaded your revised code to live site now, so you can check it.

I would have expected a change in the html structure of the related posts output, using my suggested code – and I can’t see it in your example link.

the code does not seem to get used for this section.

is that code section a part of the plugin?
is there a possibility that the plugin does not use this particular code?

Yes it does.

Check now – I have renamed the file, so the plugin refers to a non-existing file.

I see – no images in the ‘related posts’ section.

can you put the code from the pastebin https://pastebin.com/vigwVnKU back into your plugin file?

somewhere, the changes get lost in the ether ??

Done.

Perhaps the code is executed prior to the page – try from here: https://www.ross.no/communicate/tag/noctilucent-clouds/