Displaying Recent Posts in a Horizontal Row

  • Resolved daretoeatapeach

    (@daretoeatapeach)


    7 years, 8 months ago

    Hi! I love how your plugin uses shortcodes and lets me see the code as I’m building it. However, I’m not a CSS commando, so I’m not sure the best way to do this.

    When I added the recent posts shortcode with thumbnails, it still displays them as an ordered vertical list. But I want to create the typical boxes with thumbnails that display left to right.

    So I added columns and added the recent posts within that, but if I put them in the first column they’d all just be in column one. So I reduced the loop to one, and that will show one post in each column. This would work, but of course it shows the same post over and over.

    Is there a way to specify that I want the Recent Posts to display the most recent post -1 or -2 (that is, the second-most recent post, third most recent)? That way the columns solution would work perfectly!

    Otherwise, how should I get the Recent Posts to display as a horizontal list, instead of a vertical list? That is, magazine style. The Vertical list doesn’t really work with the thumbnails turned on.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author UIUX Lab

    (@uiuxlab)

    HI there!

    You could check out this demo, It is horizontal. Are you looking for it?

    Demo: https://uiux.cc/wp-theme-demo/nailme/recent-posts-with-custom-template/

    ———–

    I’m sorry. It seems to have a bug that will automatically add <p> tags that can not be horizontal. I will fix it and update a new version.. ??

    Temporarily, you can try a simple way to implement it first. Like this:

    https://www.dropbox.com/s/ix4m0wx5lmn1xre/post2.jpg?dl=0
    https://www.dropbox.com/s/jjk4f9r1tcot6c7/post-2_2.jpg?dl=0

    Best Regards!

    • This reply was modified 7 years, 7 months ago by UIUX Lab.
    • This reply was modified 7 years, 7 months ago by UIUX Lab.
    • This reply was modified 7 years, 7 months ago by UIUX Lab.
    • This reply was modified 7 years, 7 months ago by UIUX Lab.
    • This reply was modified 7 years, 7 months ago by UIUX Lab.
    Plugin Author UIUX Lab

    (@uiuxlab)

    Hi, I upgraded plugin to 1.4.6. And fixed some bugs.

    You can try a simple way to implement horizontal layout. Like this:

    https://www.dropbox.com/s/mblolhi5qqxykah/post-ok.jpg?dl=0

    Thank you for your feedback ??
    Cheers!

    Thread Starter daretoeatapeach

    (@daretoeatapeach)

    Hi! Thank you so much for doing that! <3

    Alas, it hasn’t worked for me yet. I had already removed the list options, because I was trying to do my own CSS and was trying to get the text to float around the images. So I’d replaced the before and after css with a class called .kbrecent (if you have a designated class for the plugin, I could use that instead).

    .kbrecent img {
    float:left;
    margin-right:10px;
    }

    (This is working fine, but I thought it best to be thorough.)

    Anyway, I tried it the way you suggested, and it worked, but I don’t think people will click on the articles without the titles. If I put the titles in as you have them, they float in a row.

    [uix_recent_posts show=’5′ before='<div=”kbrecent”>’ after='</div>’][p][uix_recent_posts_title][uix_recent_posts_thumbnail][/p][/uix_recent_posts]

    This doesn’t look good of course. Is it possible to have the titles either above or below the images, but still have the images flowing left to right?

    Before I realized you’d written back, I had been working with this:

    [uix_recent_posts show=’5′ before='<div class=”kbrecent”>’ after='</div>’]<h2>[uix_recent_posts_title]</h2>[uix_recent_posts_thumbnail][uix_recent_posts_excerpt][/uix_recent_posts]

    This is one column, no left to right. But it looks great if anyone is looking for one column with headers and excerpt text. Just thought I’d leave that for anyone else who is reading your support page. If I could get that, or that without the excerpts, to float multiple columns it would be perfect.

    I also have another question, but I’ll start a new topic to keep your support threads organized. =)

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Displaying Recent Posts in a Horizontal Row’ is closed to new replies.