*New thread request* blog post layout not displaying in live version

[jhayles]

Here is the new thread you requested. I can’t do a secure note until I post this…

[prakash_s]

Hello @jhayles,

Thanks for writing to us.

I checked your site’s blog page it seems that your custom blog layout is working fine at my end. It might be the browser cache issue at your end. I would suggest you clear your browser cache and then check it again.

Thanks

[jhayles]

It looks like I’m seeing the layout adjust based on screen size. The widest option gives me the three posts aligned horizontally, which is great. But if you look at the screenshot from my builder, I designed three posts across, then below that I want a large post on the left, then smaller post on the right (like the screenshot shows from the builder).

But it’s not translating to look the same live. What am I missing here?

[ruenel]

Hello @jhayles,

You need to check the column layout of the “Posts” row element. At the moment, it is still set to 3 columns in other screen sizes.

You will have to make sure that in xl, large and medium screens, it is set to 2/3 + 1/3 layout:

XL:

Large:

Medium:

Hope this helps.

[jhayles]

I am so confused. In the builder I have the main image, then a 3 column post and then a 2 column post under that. That’s the layout I want…main image, three posts, then 2 posts under that, then a pagination.

What am I missing with this? Why does the builder look different than the live version?

Please feel free to log into my account and fix it. I don’t know what else to do…

[friech]

Hi Josh,

Thanks for creating a new post. Is this the layout that you’re after?

Your Looper provider and looper consumer are both set to 3, I did go ahead and re-set it to 5.

Hope it helps,
Cheers!

[jhayles]

It’s close…the top column with three posts is correct. But the 2 column post should display the first post as a 2/3, then the second post will be next to that. If you look at my screenshot I have the correct layout chosen on the options, but it’s not displaying it correctly.

Can you tell me why the builder is showing something different than the live version? This is so confusing…

[tristup]

Hi Josh,

I have checked the layout and found that the Column layout for the Xl screen size is still 3 Column as shown in the screenshot below.

I went ahead and set it to the Layout expected and now it the output is coming as you want.

Thanks

[jhayles]

That is not what I mentioned that I want…I want three posts under the main picture, then two posts under that.

This was my previously posted screenshot:

On that screenshot the top row is correct. That’s what I want. However, the row below that should be the two posts, but using the first post as a 2/3 and then the post next to that is smaller.

Does that make sense?

[marc_a]

Hi @jhayles,

I just check your layout builder and change the looper consumer from the two post columns to 2. I believe this is the layout you are looking for. See secure note for the screenshot.

Hope that helps.

Thank you.

[jhayles]

That’s it! Thank you. A couple of questions:

1. Does the Looper Provider Post Amount need to match the number of Posts I want in that particular column? For example, for the three posts I would set the Looper Post Amount to 3. And for the column that has two posts I would set the Looper to 2. Is that right?

2. I noticed you created another Layout. Which one do I delete? I don’t need both of them.

3. If I wanted to add a third row of posts and have it display, say three more posts, what’s the easiest way to do that?

[marc_a]

Hi @jhayles,

1.) Yes, it does. You should set the amount of Looper Post per column to match your design.

2.) You should delete the Layout builder name “Post Archive Layout (1)”

3.) If you are trying to say that you want a load more button and it will show up in the 3rd column then that will require some customization which I believe is outside the scope of our theme support. If you are referring to something else, would you mind sharing more information?

Thank you.

[jhayles]

1. I’m still confused…you said I should put the number of posts I want to show up inside a row to match the row design. But in your setup you have 5 Posts as the count in the Looper Provider that’s inside the column labeled “2 column post.” And you don’t have a Looper at all on the “3 column posts” part of the design? Why did you put a Looper with 5 Posts inside the second part of the layout design? (See screenshot).

3. I just mean, can I duplicate one of the sections if I want more posts on the page? For example, can I duplicate the first row of three posts, and move it to the very bottom (right above the pagination) and have it show three more posts? If so, do I need to do a Looper for that section?

[ruenel]

Hello @jhayles,

Let’s go back here:

1. Does the Looper Provider Post Amount need to match the number of Posts I want in that particular column? For example, for the three posts I would set the Looper Post Amount to 3. And for the column that has two posts I would set the Looper to 2. Is that right?

2. If I wanted to add a third row of posts and have it display, say three more posts, what’s the easiest way to do that?

Before I will reply to the above questions, here a few things I want you to keep in mind:
a.) You are editing the Post Archive Layout. This layout will be the layout of your blog index and all other archive pages.
b.) There will be 10 post items to be displayed in your blog index or all other archive pages by WordPress default. You can check this setting in Settings > Reading > Blog pages show at most.
c.) When editing an archive layout, you do not need to have a Looper Provider because the blog index or all archive pages runs a loop behind the scenes. This is why you only have to set your Looper Consumer.

#1. Does the Looper Provider Post Amount need to match the number of Posts I want in that particular column? For example, for the three posts I would set the Looper Post Amount to 3. And for the column that has two posts I would set the Looper to 2. Is that right?

• Yes, it needs to match the number of columns if you want to display 3 column post items. Because if you set more than 3 items, you would likely have another row below it.

For example, if you set the Looper Consumer items to “All”, you will have 10 post items displayed in 3 columns by 4 rows. Why 10 items? Because of the WordPress default post items as I pointed out earlier.

If you set the Looper Consumer items to “5”, you will have 5 post items displayed in 3 columns by 2 rows.

Why this is happening?
You will have to take into account that in your row settings, you have set the column layout to have 3 columns. But then, you have set the (Post) column as a Looper Consumer which means the columns will be generated dynamically. Depending on the number of Looper Consumer items, the columns will display according to the column layout set in the row settings. This is the part where you get confused. To make it short, if you want to display 3 post item columns, you will have to set the Looper Consumer to 3 items only.

#3. If I wanted to add a third row of posts and have it display, say three more posts, what’s the easiest way to do that?
You can just simply duplicate the first section. Then you will have the following layout:

3column section
1st column		2nd column		3rd column


2column section
1st column		2nd column

3column section
1st column		2nd column		3rd column

There is nothing wrong with this layout. You will an issue later on though. If you count the number of items, you have a total of 8 items. There is pagination at the bottom. On the live page of the blog index or archive page, as soon as you click on page 2, you find out that one post item is missing. And that is because out of 10 items, you only displayed 8 items. To prevent this from happening, you will have to go to Settings > Reading and set the “Blog pages show at most” option to 8 items only.

Because of the complexity of your layout, we end up adding 3 sections with 3 Looper Consumers. This can lead to conflict that does not display the correct number of post items for the last page of the blog index or archive page. Normally, there should only be 1 Looper Consumer for the layout which is why I created another demo layout that uses the Grid/Cell with only 1 Looper Consumer in it. The layout that you wanted was then accomplished using custom CSS.

If you ever wonder, what if I set a Looper Provider and set it to “Recent Posts”. This is also okay. The problem with this is that, as soon as you click on page 2, you will not be getting the expected next set of posts. You will just get the same post items thus creating a conflict with the pagination.

Hope this helps.

[jhayles]

Thank you for doing the layout for me. What I’m not understanding is why my layout is so complex that you had to customize it with code, and using that grid layout you did? I’ve never seen that grid option before. Where can I learn about that? And, will ThemeCo make it easier to set up a blog down the line? This was a lot of confusion and complications for what should be a simple blog layout…

[tristup]

Hi @jhayles,

The Looper Provider always shows the data in a uniform format as explained by my colleague, and what you are trying to acheive was not a uniform structure and that is why it becomes a little complex. You can find the details about the Grid element used by my colleague in the following article.

Grid | Themeco Docs

The Layout Builder is an advanced feature that helps you to customize your Blog and other archive pages which were not available with the previous versions of the theme. We have already provided a few pre-built templates which help you to set up your blog and other pages in an easy way, but it requires modifications when it comes to a custom design.

Thanks