YARPP 3.3.1: list in two columns, or more.
-
Hi,
Using thumbnails or lists it is visually best to utilize all the space, not just one column as per default.
As you can see here, it leaves a lot of space unused:
http://www.ross.no/communicate/2011/08/01/noctilucent-clouds-3/How can I enable a 2-column display, preferably template-independent?
Thanks,
Morten
-
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:
http://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:
http://pastebin.com/UyJ0PVpdthis 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; }
- The topic ‘YARPP 3.3.1: list in two columns, or more.’ is closed to new replies.