Posted 9 months ago #
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
Posted 7 months ago #
You might be able to do this via just CSS but, if not, you could do it with a YARPP template:
Posted 7 months ago #
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; ?>
Posted 7 months ago #
assign width css satements to the related-posts class, with a bit of tweaking you should get it to lie in 2 columns.
Posted 7 months ago #
Alternatively you could do it with PHP, but that would involve you modifying that template yourself.
Posted 7 months ago #
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?
Posted 7 months ago #
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.
Posted 6 months ago #
I don't see where your example fit into the above code...?
with invalid html output by the plugin (or modificatins to it) http://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:
http://pastebin.com/vigwVnKU
Posted 6 months ago #
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)
Posted 6 months ago #
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?
Posted 6 months ago #
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 http://pastebin.com/vigwVnKU back into your plugin file?
somewhere, the changes get lost in the ether ;-)
Posted 6 months ago #
Done.
Perhaps the code is executed prior to the page - try from here: http://www.ross.no/communicate/tag/noctilucent-clouds/
no change - somehow, your site/plugin is using the related posts code from somewhere where it did not get edited ;-(
Posted 6 months ago #
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.
Posted 6 months ago #
Do you use Firebug to debug here?
Did you change the code since yesterday, as I only used the code from yesterday.
Posted 6 months ago #
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.
Posted 6 months ago #
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.
Posted 6 months ago #
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
Posted 6 months ago #
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/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.
Posted 6 months ago #
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; }
Posted 6 months ago #
Thanks again - works like a charm.
Your help is much appreciated - check you gmail :-)
You must log in to post.
