Tell us what you are trying to do?
I'm creating an archive page for a CPT. I completed the design of the Archive Loop that displays all posts using Blocks. But I want to add a separate view above the archive loop so that I can display differently styled "featured posts". When I try to do this I get an error about not being able to add nested views. As far as I'm concerned I'm not trying to nest views, I want a separate view above the archive loop. On a standard post/page, I can add 2 separate views, one above the other, without any problem. But on an archive page I get the error.
Is there a way to have 2 views on an archive page? One that could display a selection of "featured posts" in one style, and then display remaining posts in another style?
hidden link
Thanks!
Hi,
Thank you for contacting us and I'd be happy to assist.
Your observation is correct and currently, it is not possible to create a new view inside a WordPress Archive edit screen.
A workaround can be to create the desired post view on a separate page and once it is ready, you can insert it in the WordPress Archive as an existing view through the "Views" block.
regards,
Waqar
Thanks, that has helped. There is an issue though, the archive loop(Remainder) is a 3 column grid and the standard(Featured) view above it is supposed to be a 1 column grid. But as you can see at the link above, the standard view (Featured posts) is displaying as a 3 column grid on the front end even though it's set to 1 column and appears as 1 column in the back end.
How can I fix this?
Hello?
I also tried adding a full width (1 column grid) post slider to the bottom of the archive...
hidden link
But as you can see, it too is stuck as a 3 column grid.
I thought maybe the 2 views were tied to the archive's layout, a 3 column grid. But I found that I can successfully change the grid for the archive, to 5 for example, but the 2 views remain as 3 column grids.
Really need help solving this...
By the way, I keep getting an error message when trying to post here in the support system... "ERROR: Are you sure you wanted to do that?"... and my post doesn't show up.
As you can see in the image, the top view should be 1 column, but on the front end it displays as 3 column.
The 1 column post slider at the bottom sometimes displays as a 3 column and sometimes as 1. I don't know why.
Thanks for writing back and for sharing these details.
I was able to reproduce this behavior on my test website too. If the View and Archive on a page are both using the grid loop output style, the view's number of columns is not consistent with what is set in its settings.
We appreciate you brought this forward and I've passed these findings to the concerned team for further review.
For now, you can use some custom CSS code to make sure that the featured posts on the top are shown in a single column:
( you can include this CSS code in the Archive's "Custom CSS" field - screenshot: hidden link )
.wpv-view-output .wp-block-toolset-views-view-editor .js-wpv-view-layout .js-wpv-loop-wrapper .tb-grid {
grid-template-columns: minmax(0, 1fr);
grid-auto-flow: row;
}
As for the slider below the archive's posts, it is always showing in one column for me.
If you check the page again, I think you'll see that the bottom slider is now stuck in 3 column layout instead of 1. I think it switches back and forth from 1 column to 3 column depending on what was the last page saved... the archive(which changes columns to 3) and the page where the view was created(which changes the columns to 1).
I see that the slider view is also showing in three columns output now.
But the custom CSS code that I previously shared should make it a single column too.
Can you please include it and then check the page?
Thanks Waqar, the CSS works! Can I ask though, what if I wanted 2 columns? Can that be done easily with CSS also?
Thanks for the update and glad that it works.
For two columns, you can update that custom CSS code to:
.wpv-view-output .wp-block-toolset-views-view-editor .js-wpv-view-layout .js-wpv-loop-wrapper .tb-grid {
grid-template-columns: minmax(0, 0.5fr) minmax(0, 0.5fr);
grid-auto-flow: row;
}
Before closing the ticket, I just wanted to report that there were also other bugs related to this I think.
For example, inside the 1 column grid view, I added a Container and set it's max-width to 50% and placed a Heading block inside it. When displayed on the front end, the Container stretched 100%. I could not get the container to be 50% of the width of it's parent Grid Cell.
So I tried removing the Container and replaced it with a 2 column Grid and put a Heading block in the left Grid Cell in hopes of getting a 50% width. This failed as well as the left Grid Cell stretched 100% across the width of it's parent Grid Cell.
So anyway, there appears to be several spacing/alignment/width issues when inserting a View into an Archive page.
I had to use non-Toolset blocks to achieve the layout I wanted, even though the Toolset blocks should have been adequate.
Thanks
Oh, and the pause slider on mouse hover feature also doesn't seem to work when adding it via a View to an Archive page.
Any grid block elements inside the view would be affected by the custom CSS code that was added for the view's grid loop columns. That could have been fixed by making that CSS code more precise. But it is fine if you've used different blocks for now.
For the report about the pause on mouse hover option, I've created a new ticket and will follow-up on it shortly.
( ref: https://toolset.com/forums/topic/split-pause-slider-on-mouse-hover/ )
You're welcome to start a new ticket for each new question or concern.
My issue is resolved now. Thank you!
