Post loop on page

Hi wayoflinux. Welcome to the Hueman formu. I’m not familiar with the SiteOrigin PageBuilder or the Post Loop widget. I checked the SiteOrigin support page, and see some threads in the forum, but didn’t find any documentation. If you can provide a link to some, or explain how the widget works, that would help. And a link to your site would also be helpful. When you say “it always appears single column”, is that in the same layout as the Standard Blog layout in the theme?

Hi,

Sorry, I though the URL would be visible.

So I created a page to show what i mean.

This is he expected result, the standard Blog page on my site. The featured item is large at the top and below the rest are organised in two columns, as usual:

https://wayoflinux.com/the-tao-of-linux-blog/

Next you see a normal page, where widgets have been added. First the AlxPosts widget from the theme itself, after that the Post Loop widget (I think it1s from Jetpack).

Both of these show the post loop basically full-width, no columns, whatever i do.

https://wayoflinux.com/blogrolltest/

I poked around the little. So contents.php does not concern the layout of columns, it only has the article bit. obviously the specific layout gets added somewhere else, and the widgets will not get that.

the solution seems easy, make a page template, which is just like that of the blog itself, and create a page with that template. I guess (although I don’t know how exactly that would work with the PageBuilder, so it might be difficult).
Problem is, I have not got enough experience with either WordPress or PHP for this…

Any help would be appreciated!

Thanks (and sorry about the delayed reply)!

On your blog page the post display is controlled in index.php, based on the state of the Theme Options > Blog > Standard Blog List option. The widgets use their own loop and display posts in a single column, presumably because they’d normally be used in a sidebar. So, for alx-posts, you could copy that file to a child theme and change the html to display two columns. But that’s pretty messy. And you’d need to do the same thing with the PostLoop code, wherever that is. So, a much easier alternative is to style them using css. Try this and see how it works:

/* display content area widget posts in two columns */
.entry .alx-posts li,
.entry .widget_siteorigin-panels-postloop article  {
  width: 48%;
  float: left;
  margin: 20px 5px;
}

Not sure how that will play out in responsive mode. You might have to tweak the width and margins, or create a media query.

Excellent advice thank you!

I think the media queries are already set up in responsive.css which comes with the theme, so further tweaking would be straight-forward enough.

Thanks for that, I will do it as soon as I see a PC,from closer than 5 yards. Will let you know how it went.:)

Hello,

So it is working. ??
It also needed the .post class to be marked, and I added a media query so on small screens the original scaling would happen.

Here’s my final solution:

/* display content area widget posts in two columns, on large screens only */

@media only screen and (min-width: 719px) {
#panel-85-1-0-2 .widget_siteorigin-panels-postloop article .post,
.entry #panel-85-1-0-2 .alx-posts li
{
  width: 50%;
  float: left;
  margin-bottom: 20px;
}
}

The #panel-85-1-0-2 id is there as i wanted this to happen only in that specific place. The solution was so simple, I would not have even thought of it. ??

(On a side-note, for anyone who cares, I could not yet make this happen using the same logic on the Post Loop widget, whatever I tried, so it remains a theme-, and widget-specific solution for now.)

Thanks again, you were of great help! Marking as resolved.