show recent post in a row

Yes, I believe that’s possible, except for the title length. The plugin doesn’t have columns, so that can be created with CSS. For example:

[loop type="post" num="4"]
    <div class="col_1_of_4">
        [content field="thumbnail"]
        [content field="excerpt" words="50"]
    </div>
[/loop]

In the CSS, something like:

.col_1_of_4 {
    display: inline-block;
    width: 25%;
}

I could add a parameter to display title length, if that’s important.

thx ??

Hi Eliot,

I’m having similar issues. I’d like to display posts in a grid format and tried the above suggestion, but I’m missing something because posts still display vertically. If I add codes for columns 2, 3 and 4 of 4, the loop repeats from the very beginning, beneath the previous loop.

How can I get posts to display horizontally and continuously if I want to display all the posts in a given taxonomy term? (I’m good with the given taxonomy term part.)

For example:

Post 1, Post 2, Post 3
Post 4, Post 5, Post 6

And this would update automatically every time I add a new post to the term, most recent first.

This is the base code which works well:

[loop type="post" taxonomy="x" value="y"]
[content field="title"]
[content field="image"]
[/loop]

I thought of creating columns myself with a table, but then I would have the same posts repeating in each column, and if I target specific posts, it wouldn’t be updated automatically…

Any suggestions? Thanks so much for the help!

Progress!

The following shortcode & CSS combo works to create columns:

<div class="u">
[loop type="v" taxonomy="w" value="x"]
[content field="y"]
[content field="z"]
[/loop]
</div>

.u {
column-count: 3;
-moz-column-count: 3;
-webkit-column-count: 3;
}

BUT there’s still a problem… Columns are being created but the content fields aren’t grouping together, so that field y is at the bottom of column 1 and field z is at the top of column 2, etc.

Any clue how to group the content fields together so that they don’t split across multiple columns?

You can see in my code that the div is placed outside the loop. When I place it inside the loop as suggested in the first reply above, each content field becomes a cell in a row (so that the content fields are displayed horizontally and the loop vertically). No good…

Is there any way to place or force breaks, perhaps?

Also, the columns are formatted as:
Post 1, Post 3, Post 5
Post 2, Post 4, Post 6

Which isn’t exactly ideal. Wondering if the loop can be returned horizontally instead of vertically?

Thanks in advance for any help offered!

Try something like this for Bootstrap 3.x

<div class="row">
	[loop type="post" taxonomy="x" value="y" count="3"]
	<div class="col-md-4">
		[content field="title"]
		[content field="image" size="thumbnail"]
	</div>
	[/loop]
</div>
<div class="row">
	[loop type="post" taxonomy="x" value="y" count="3" offset="3"]
	<div class="col-md-4">
		[content field="title"]
		[content field="image" size="thumbnail"]
	</div>
	[/loop]
</div>

If you don’t have Bootstrap in your theme, try including it yourself
or use a plugin for it.

Thanks for the helpful comment, kalligator, that’s pretty much how I do it.

habannah, sorry for the late reply – I’ve been so busy these days.. I think you’re in the right direction, the columns are created in CSS. I personally use floats, something like..

.row {
    clear:both;
}

.col-1_3 {
    width: 33.333%;
    float:left;
}

Then it’s basically the same as how kalligator described. You can set up a loop for each row, using offset, and each column div is inside the loops.

Thank you both for your replies! My apologies as well for the delayed response — we’re all busy so no worries, right? ??

I have no idea what Bootstrap is and I’d rather not install yet another plugin if I don’t have to…

I think what I did might be similar to what Eliot suggested. Here’s how I finally got it to work:

First I created a special field with a TinyMCE editor to format post titles, thumbnails, and excerpts exactly how I wanted, making sure the images were the exact same size and that there was the exact same amount of text being displayed for each excerpt. It seems that the columns were breaking automatically, adjusted based on the size of post excerpts. I wasn’t sure at the time if having more than one content field was affecting anything, but now I think that step may be unnecessary.

However, I also put each excerpt in a div to control how they break. Let’s call it “div class u”.

So this custom content shortcode:

<div class="v">
[loop type="w" taxonomy="x" value="y" count="9"]
[content field="z"]
[/loop]
</div>

With this CSS:

.v {
column-count: 3;
-moz-column-count: 3;
-webkit-column-count: 3;
}

.u {
-moz-column-break-after: always;
-webkit-column-break-after: always;
column-break-after: always;
break-after: always;
}

.u .attachment-post-thumbnail.wp-post-image {
-moz-column-break-before: avoid;
-webkit-column-break-before: avoid;
column-break-before: avoid;
-moz-column-break-after: always;
-webkit-column-break-after: always;
column-break-after: always;
}

element {
-moz-column-break-after: always;
-webkit-column-break-after: always;
break-after: always;
}

Now it works pretty well, except that the display is still:
Post 1, Post 3, Post 5
Post 2, Post 4, Post 6

Not the end of the world, but I will play with your code Eliot and see if it fixes things. In the meantime, I would really appreciate it if you could take a look at my code, which I’m fairly happy with, and let me know if any of it is useless/unnecessary. I’m not actually sure that all those avoid and always break befores and afters are doing what I think they’re doing… Lol.

Thanks so much for the help! Cheers!

Well, I’ve never had to use column-count, but it’s more for “newspaper-style” columns. It behaves just how you described, it fills one column vertically with content, then next column, and so on.

For filling columns horizontally, I recommend the simple float method. With the shortcodes you provided, I would do it like this:

<div class="v">
    [loop type="w" taxonomy="x" value="y" count="9"]
        <div class="u">
            [content field="z"]
        </div>
    [/loop]
</div>

In the CSS:

.v:after {
    content:'';
    display:block;
    clear: both;
}

.u {
    width: 33.333%;
    float: left;
}

The first part is so that at the end, it clears the float and starts on a new row.

Thanks for that code, Eliot. It didn’t work on my first try so I’ve bookmarked this page and will come back to it a little later to work on it some more. For now I’ve gone back to the code that was working. Either way, IMO, this is resolved ?? Thanks again for all your help!