WordPress.org

Ready to get started?Download WordPress

Forums

Yet Another Related Posts Plugin (YARPP)
[resolved] YARPP 3.3.1: list in two columns, or more. (31 posts)

  1. Morten Ross
    Member
    Posted 2 years 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

  2. mitcho (Michael Yoshitaka Erlewine)
    Member
    Plugin Author

    Posted 2 years ago #

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

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

  3. Morten Ross
    Member
    Posted 2 years 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; ?>
  4. kevin heath
    Member
    Posted 2 years ago #

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

  5. mitcho (Michael Yoshitaka Erlewine)
    Member
    Plugin Author

    Posted 2 years ago #

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

  6. Morten Ross
    Member
    Posted 2 years 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?

  7. kevin heath
    Member
    Posted 2 years 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.

  8. Morten Ross
    Member
    Posted 2 years ago #

    I don't see where your example fit into the above code...?

  9. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    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

  10. Morten Ross
    Member
    Posted 2 years ago #

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

  11. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    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)

  12. Morten Ross
    Member
    Posted 2 years 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.

  13. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    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?

  14. Morten Ross
    Member
    Posted 2 years ago #

    Yes it does.

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

  15. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    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 ;-)

  16. Morten Ross
    Member
    Posted 2 years ago #

    Done.

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

  17. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

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

  18. kevin heath
    Member
    Posted 2 years 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.

  19. Morten Ross
    Member
    Posted 2 years ago #

    Do you use Firebug to debug here?

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

  20. kevin heath
    Member
    Posted 2 years 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

  21. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    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.

  22. Morten Ross
    Member
    Posted 2 years 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'); ?>">

  23. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    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.

  24. Morten Ross
    Member
    Posted 2 years 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

  25. Morten Ross
    Member
    Posted 2 years 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/

  26. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    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.

  27. Morten Ross
    Member
    Posted 2 years 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.

  28. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    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.

  29. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    the px unit is missing in this line:

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

  30. Morten Ross
    Member
    Posted 2 years ago #

    Thanks again - works like a charm.

    Your help is much appreciated - check you gmail :-)

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic