YARPP 3.3.1: list in two columns, or more.

no change – somehow, your site/plugin is using the related posts code from somewhere where it did not get edited ;-(

Hi

In the code you posted right at the top:

<ul class=”related-posts”> change it just to normal

then above that code put:

(div class=”related-posts”> close the div below the closing

then set the wdith of the .related-posts{width=600px;} – or whatever you page width is.

then set your individual listings width – .related-posts ul li {width: 280px; float: left;} – obviously change the width to what ever size you need to to give you your 2 columns. If you set margins and paddings then you’ll need to change the width etc.

Do you use Firebug to debug here?

Did you change the code since yesterday, as I only used the code from yesterday.

Hi

In the code you posted right at the top:

<ul class=”related-posts”> change it just to normal ul

then above that code put:

(div class=”related-posts”> close the div below the closing /ul

then set the wdith of the .related-posts{width=600px;} – or whatever you page width is.

then set your individual listings width – .related-posts ul li {width: 280px; float: left;} – obviously change the width to what ever size you need to to give you your 2 columns

still the same code in the same pastebin as yesterday;

I do use firefox web developer add-on (my personal preference above Firebug – just a bit different)

to see if the file you are working on, is used for the related posts, add something obvious such as a few capital letters or similar – something that should immediately stick out on the site.

In firebug I do see the revised code.

The code before your change:
<li> <?php $postimageurl = get_post_meta($post->ID, 'image', true); if ($postimageurl) { ?>

Is now:

<li class="echo (($oddeven == 'even') ? 'odd' : 'even'); ?>"> <?php $postimageurl = get_post_meta($post->ID, 'image', true); if ($postimageurl) { ?>

And Firebug displays as: <li class="echo (($oddeven == 'even') ? 'odd' : 'even'); ?>">

well – you are on the right file – some new code appeared in your site.

i just discovered a bad mistake in my code:
change this:
<li class="echo (($oddeven == 'even') ? 'odd' : 'even'); ?>">
to:
<li class="<?php echo (($oddeven == 'even') ? 'odd' : 'even'); ?>">

and also make sure to shift the closing </li> tag to after the </span></p>

and please add the extra styles for instance to custom.css of your theme.

Wuhuuuuuuu ?? !!!!

Awesome.

Thank you sooooooo much.

I really appreicate you taking the time and effort!

The best part is… I had given up on this and let go ??

Morten

I just noticed a new behavior.

The “Leave a Reply” section is included in the two-column layout for the related posts, and thus will no longer be listed below the related posts – it mingles when there are uneven amount of related posts – example:
https://www.ross.no/communicate/2011/09/26/northern-lights-aurora-borealis/

The “Leave a Reply” section is included in the two-column layout for the related posts, and thus will no longer be listed below the related posts – it mingles when there are uneven amount of related posts

my mistake – forgot to add the html to the pastebin.

this should fix it:
https://pastebin.com/UyJ0PVpd

this adds a ‘clear’ div after the list (the css is already with the other styles), and also fixes a mistake in the ‘odd’ ‘even’ class output.

Awesome – many thanks!

One tiiiny tweak request. I’d like the right margin to be right-aligned, so that left and right margin is equal. A spacing between the two column is also OK, as I ajust with image sizing. Maximum size now will not compensate right margin unless I resize to such a degree tat images merge a cross column. Current max is 195*345.

could be done by setting fixed width and a 10px margin to separate the images to the new styles:

for instance:

.related-posts li.odd { float:left; width: 345px; clear:left; margin-right:10px; }
.related-posts li.even { float:left; width: 345px; }

if you keep the images at a width of 345px, this might work.

the px unit is missing in this line:

.related-posts li.even { float:left; width: 345px; }

Thanks again – works like a charm.

Your help is much appreciated – check you gmail ??

cheers – much appreciated ??

you have truly magnificent images in you site ??

ps: don’t forget to add the px unit here:

.related-posts li.even { float:left; width: 345px; }