How to show posts not as a list

Resolved

(@overkill22)

Hi,
Thank you for the wonderful plugin! It is the most complete and customizable plugin to show the posts in a widget.

I have a problem and maybe you can help me.

I need to show the posts in a page, as a sequence of images.
I can set the widget so it will show me only the featured images of the posts and it is perfect.
But when I add it in an empty page, instead of showing me the pictures aligned horizontally, it will show me the pictures aligned vertically.

How it is now:

-------------------------------------------------------------
|                           page                            |
|   -----------                                             |
|   | POST_01 |                                             |
|   -----------                                             |
|   -----------                                             |
|   | POST_02 |                                             |
|   -----------                                             |
|   -----------                                             |
|   | POST_03 |                                             |
|   -----------                                             |
|   -----------                                             |
|   | POST_04 |                                             |
|   -----------                                             |
|                                                           |
-------------------------------------------------------------

how I would like it to be:

-------------------------------------------------------------
|                           page                            |
|   -----------   -----------   -----------   -----------   |
|   | POST_01 |   | POST_02 |   | POST_03 |   | POST_04 |   |
|   -----------   -----------   -----------   -----------   |
|   -----------   -----------   -----------   -----------   |
|   | POST_05 |   | POST_06 |   | POST_07 |   | POST_08 |   |
|   -----------   -----------   -----------   -----------   |
|   -----------                                             |
|   | etc..   |                                             |
|   -----------                                             |
|                                                           |
-------------------------------------------------------------

Hope it is clear.
Thank you very much!

https://wordpress.org/plugins/posts-in-sidebar/

Viewing 15 replies - 1 through 15 (of 19 total)

1 2 →

Plugin Author Aldo Latino
(@aldolat)

8 years, 8 months ago
Hi @overkill22,
you are very welcome! And thanks for your kind words! 🙂

You may arrange the output in the way you desire by adding the appropriate CSS styles in the Styles / Custom Styles section of the widget admin. In a general way, these rules work fine in a theme like Twenty Fifteen:
```
li.pis-li {
float: left;
width: 100px;
margin-right: 10px;
margin-bottom: 10px;
}
```
Edit the values according to your needs.

Please, take in mind that every WordPress theme adds its own rules, so I should take a look at your site. Could you tell me the URL?
Thread Starter overkill22
(@overkill22)

8 years, 8 months ago

Sure, the address is HERE

At the moment I’m trying different solutions.
I’ll keep the page published for a couple of hours.

Now I’m using one line with 3 columns, each one with a different Posts in Sidebar widget.
under that, one line with 1 column, with just one widget.

Thread Starter overkill22
(@overkill22)

8 years, 8 months ago

The result that I want is like in the first line.
The size of the images are also very good.
Using your CSS the images are resized as thumbnail.
Plugin Author Aldo Latino
(@aldolat)

8 years, 8 months ago
Copy this code and paste it in the Styles / Custom Styles field in the widget admin.
```
li.pis-li {
float: left;
padding-left: 15px;
padding-right: 15px;
width: 300px;
}
```
Change the values until you’re satisfied.

Take note that these styles will be applied to all Posts in Sidebar widgets. If you want to apply them only to this particular widget, assign these styles to the relevant ID, as explained in the introduction of Custom Styles section of the widget. The introduction says you the exact id (for example, #pis_posts_in_sidebar-8).

Let me know.
Thread Starter overkill22
(@overkill22)

8 years, 8 months ago

I’m not sure if the checkbox “Completely hide the widget if no posts are found”.
I tried to check or uncheck it but is still the same. In order to don’t see the “No posts yet.” write up, I had to delete it.

Plugin Author Aldo Latino
(@aldolat)

8 years, 8 months ago

When activated, that checkbox hides the widget if no posts are found. The text field, instead, lets you define a custom text when no posts are found: if you empty it, the widget won’t show anything (except widget title).

About the previous question, did you resolved?

Thread Starter overkill22
(@overkill22)

8 years, 8 months ago

ok, now it is much better!
is there a way to align the widget in the center of the page? now it is on the left…
If I change the CSS float: center, it vill do again the single column 🙁

Thread Starter overkill22
(@overkill22)

8 years, 8 months ago

When activated, that checkbox hides the widget if no posts are found. The text field, instead, lets you define a custom text when no posts are found: if you empty it, the widget won’t show anything (except widget title).

I checked it, but the text “no posts yet” is still showing.

Plugin Author Aldo Latino
(@aldolat)

8 years, 8 months ago

All the elements of each row are already centered in the page. If you refer to the central row with one visible element, there are three elements there, even if you see only one, so the only visible is aligned to the left.

Regarding the “No posts yet”, this function is working fine here (perhaps the builder you are using is not fully compatible with widgets).

Thread Starter overkill22
(@overkill22)

8 years, 8 months ago

Performance-wise, is it better to use a CSS to style the widget (there will be 3 widget in a page (one widget each line) with 3 different CSS. one each widget) or is it better to use 3 widget every line (total 9 widget in a page, but without CSS)?

No worries for the “no posts yet”, if it’s working at your side, it’s fine!

Plugin Author Aldo Latino
(@aldolat)

8 years, 8 months ago

Every widget, that makes queries (not only Posts in Sidebar), requires the server some extra work, so the fewer widgets you add, the better performance you have. I’d use the fewer widgets as possible.

Thread Starter overkill22
(@overkill22)

8 years, 8 months ago

Ok, that’s a good point.

I’m sorry to bother you so much… but I need a bit more help…

Now the page looks exactly as I want. BUT I’m using “pagebuilder by siteorigin” to divide the page into rows and columns.
Then I have in every row:

row 01: text widget
row 02: 3x Posts in Sidebar widgets (the row is divided into 3 columns)
row 03: text widget
row 04: 3x Posts in Sidebar widgets (the row is divided into 3 columns)
row 05: text widget
row 06: 3x Posts in Sidebar widgets (the row is divided into 3 columns)

The page is exactly as I want it. But a lot of widget in it.

If I have to change, the second option is to use the CSS and divide the page as below:

row 01: text widget
row 02: 1x Posts in Sidebar widgets (using CSS to show 3 posts in a row)
row 03: text widget
row 04: 1x Posts in Sidebar widgets (using CSS to show 3 posts in a row)
row 05: text widget
row 06: 1x Posts in Sidebar widgets (using CSS to show 3 posts in a row)

But just now, using the CSS, I had some problems visualizing the content on a mobile device, plus the 3 posts (images) instead to be centered in the page, they were aligned to the left side.

If you have time and can help me, I can rebuild now the page following the second option, so you can see… let me know…

Plugin Author Aldo Latino
(@aldolat)

8 years, 8 months ago

It should be easy to format the page using the 2nd method and following what I wrote before.

Anyway I am here to help you; only consider that I’m not in front of my computer all the time. 🙂
Thread Starter overkill22
(@overkill22)

8 years, 8 months ago
Ok, so I built 2 different pages.
The first one is with the first method, with the 3 widgets in a row: PAGE 1

The second one with the second methos, with 1 widget in a row + CSS:PAGE 2

The CSS that I used, I changed the #panel-1579-2-0-1 with the specific number for each widget:
```
#panel-1579-2-0-1 {
float: left;
padding-left: 15px;
padding-right: 15px;
width: 300px;
}
```
But at the moment, in the PAGE 2 there are this issues:
1) the posts are in vertical
2) in the mobile view, the images are going outside the screen. this is not happening in PAGE 1

So, I’m not sure if I used the CSS code properly.
Please check the pages and tell me what you see.
At the moment PAGE 1 is perfect, both laptop and mobile view.

THANK YOU ! ! !
Thread Starter overkill22
(@overkill22)

8 years, 8 months ago

EDIT:

2) in the mobile view, the images are going outside the screen.

problem solved. I deleted the width: 300px; from the CSS, and adjust the size using the setting under The featured image of the post.

Now the only problem is how to put the 3 images in one row, and cetralize them.

Viewing 15 replies - 1 through 15 (of 19 total)

1 2 →

The topic ‘How to show posts not as a list’ is closed to new replies.