Hi there,
Is it possible to have an Alternating Post Layout when using table layout?
On this text post we feature six featured posts: hidden link
Is it possible to have every second post the opposite way round, by that I mean...Barbondale as is....The Bothy would have image on the right and the text on the left...and so on.
Worth an ask.
Thank you.
Hello and thank you for contacting the Toolset support.
Please correct me if I am wrong, you want to have the following layout:
- Barbondale at the right
- The Bothy at the left
- The Dairy at the right
- Arresting View at the left
It seems that each section uses the bootstrap grid to put the text at the right and the image at the left, and this could be easy to style in the opposite.
hidden link
You should use "odd/even" in the "index" attribute of "wpv-item" inside your loop. Check this section of article https://toolset.com/documentation/user-guides/views/digging-into-view-outputs/#loop-shortcode-wpv-item-and-the-index-parameter
And use a different markup(styled in the opposite) or use CSS styling(hidden link).
If I took a closer look at your website, I'll check how the view is created an I might advise you better. Let me know if I should activate a private reply to let you share credentials to your website.
Morning Jamal,
Thank you for your reply,
Yes you got it, I am after creating an alternating layout of...
- Barbondale at the right
- The Bothy at the left
- The Dairy at the right
- Arresting View at the left
I have had a look at the documentation links you sent to and be fair they mean little to me. Trying to understand anything regarding Toolset has always been a challenge and nothing ever seems straight forward. I guess its flexibility means there are so many options which can be overwhelming at times.
Happy to share credentials with you so you if you could find the time to help me further?
Many thanks, Pete
Hello Pete,
Yes, please, allow me temporary access to check how are your views and I might suggest the correct code to use for styling the sections. Your next reply will be private to let you share credentials safely.
** Please make a database backup before sharing credentials. **
Hi Pete and thank you for the credentials. I know understand your use case better.
Currently, the "6 Luxury Places Post Promo" view defines also a Content Template "Loop item in 6 Luxury Places Post Promo"(id: #18252) in the second editor section of the view, check this screenshot hidden link
Then the view uses this content template inside the loop with ([wpv-post-body view_template="loop-item-in-6-luxury-places-post-promo"]):
[wpv-items-found]
<!-- wpv-loop-start -->
<table width="100%" class="wpv-loop js-wpv-loop">
<wpv-loop wrap="1" pad="true">
[wpv-item index=1]
<tr>
<td>
[wpv-post-body view_template="loop-item-in-6-luxury-places-post-promo"]
</td>
[wpv-item index=other]
<td>
[wpv-post-body view_template="loop-item-in-6-luxury-places-post-promo"]
</td>
[wpv-item index=2]
<td>
[wpv-post-body view_template="loop-item-in-6-luxury-places-post-promo"]
</td>
</tr>
[wpv-item index=pad]
<td></td>
[wpv-item index=pad-last]
<td></td>
</tr>
</wpv-loop>
</table>
<!-- wpv-loop-end -->
[/wpv-items-found]
I suggest:
1. Go to Toolset->Content Template and duplicate "Loop item in 6 Luxury Places Post Promo", check this screenshot hidden link
2. Name it "Loop item in 6 Luxury Places Post Promo - Inversed", its slug would be "loop-item-in-6-luxury-places-post-promo-inversed".
3. Change HTML markup according to Bootstrap grid documentation(you should switch the "col-sm-8" and "col-sm-4") to align the columns differently.
4. I think that you will need to update the styles too. Check this screenshot hidden link
Then, you will need to update the view(6 Luxury Places Post Promo) loop code to use index "odd/even" instead of the current example, you won't need index=1/other, because you are not styling the first or other section differently, you won't use index=pad/pad-last because you are not wrapping results in rows(3 in a row for example). The code should be:
[wpv-items-found]
<!-- wpv-loop-start -->
<table width="100%" class="wpv-loop js-wpv-loop">
<wpv-loop wrap="1" pad="true">
[wpv-item index=odd]
<tr>
<td>
[wpv-post-body view_template="loop-item-in-6-luxury-places-post-promo"]
</td>
[wpv-item index=even]
<td>
[wpv-post-body view_template="loop-item-in-6-luxury-places-post-promo-inversed"]
</td>
</tr>
</wpv-loop>
</table>
<!-- wpv-loop-end -->
[/wpv-items-found]
I hope this helps. Let me know if you have any doubts.
Hi Jamal,
Thanks for taking the time to look into this for me. I'm working on something else at the moment however will do as you recommend a little later.
One thing is, it uses a table because using a Bootstrap grid did not work for this layout, for some reason BS didn't like what I was doing at the images and text box went odd the further down the page. Another support ticket suggested using BS however no matter what I did it wouldn't work.
Happy to try what you suggest and see the results, from there we can see the issues.
Will get back to you latter however apprentice the time diff and your response 🙂
Pete
Thanks Pete 🙂
I'll set this ticket as waiting for your feedback until you can try my suggestion. The ticket should be open for 3 weeks.
All the best.
Jamal
Morning Jamal,
Hope you are well and staying safe.
Ok attempted to carry out your instructions. Hmmmmm...
I didn't understand why I need to do: 1. Go to Toolset->Content Template and duplicate "Loop item in 6 Luxury Places Post Promo", check ..
I presumed I'd just make another 'new view' this so I could duplicate and duplicate in the future.
I did this all the same however didn't understand what you meant by...
3. Change HTML markup according to Bootstrap grid documentation(you should switch the "col-sm-8" and "col-sm-4") to align the columns differently.
I have not updated styles as, so far nothing is broken or needs adjusting.
I did update: update the view(6 Luxury Places Post Promo) loop code to use index "odd/even".
I can see the odd and even ref in the code, I can also see this uses the inversed content template you asked me to duplicate and rename.
However nothing has changed on the post: hidden link
So I guess I'm missing something....sorry.
Would you mind letting me know what I am missing when you have a moment?
Many thanks, Pete
Hi Pete,
For (1), yes, you can just create another content template. I suggested duplicating because it will copy all information of the view(query, search, options, view, css, etc.), so you won't need to enter that manually 🙂
For (3), Toolset can load Bootstrap 3 or 4 styles. Currently, you are using Bootstrap 3. If you check its documentation you can understand how to create columns on a 12 columns grid: hidden link
The following example will create an 8-size column on the left then a 4-size column on the right:
<div class="row">
<div class="col-sm-8">8-size column on the left</div>
<div class="col-sm-4">4-size column on the right</div>
</div>
For your current view, and because "Loop item in 6 Luxury Places Post Promo" can be modified inside "6 Luxury Places Post Promo", I created another Content template "Loop item in 6 Luxury Places Post Promo - Normal" and used it.
I also changed a class "feat-bg" to "feat-bg-even" in "Loop item in 6 Luxury Places Post Promo - Inversed" and updated its styles a little. To put text at the left and the image at the wright, I used (.col-sm-push-4 and .col-sm-pull-8) as described in bootstrap documentation in this section hidden link
Then I updated "6 Luxury Places Post Promo" loop code to use the new Content Template as follow:
<wpv-loop>
[wpv-item index=odd]
<tr>
<td>
[wpv-post-body view_template="loop-item-in-6-luxury-places-post-promo-normal"]
</td>
</tr>
[wpv-item index=even]
<tr>
<td>
[wpv-post-body view_template="loop-item-in-6-luxury-places-post-promo-inversed"]
</td>
</tr>
</wpv-loop>
Please check if this helps. You can, finally, customize the styles of each Content Template in the CSS section.
Hey Jamal,
You know that's pretty much it, looks just as I was hoping...thank you 🙂
Can you clarify....Toolset has never been straightforward and while obvious to you, it can get just sooooo complicated.
-----------------
You've created 2 custom templates....I've never don this before. What's in there is a result of me creating views.
I guess you have done this for a reason?
Moving forward, if I wish to use this layout for other posts, do I just duplicate the View and rename it?
Do I do this 'and' duplicate the 2 custom templates and rename those too?
OR as I suspect just duplicating the view and renaming it be fine, as this will still use the 2 custom templates just filter differently when I change the query filter?
-----------------
On phone view, every even ( 2 and 4 ) the content go's off the page. Is this something I need to mess with CSS of is this something else?
-----------------
Finally, yes finally 🙂
I have searched high and low for this answer...is there a way of setting the length of exeprts for desktop, tablet and then phone?
Worth an ask.
Many thanks for your continued help.
Regards, Pete
Hi Pete, Awesome 🙂
For your first question, I created another content template for a reason in fact. When we create a View, and use the loop wizard, by default an option is checked to let the user create a content template to be used in the view. This is the content template that you can edit on the next section on the view, or as a standalone content template. For your case, it was "Loop item in 6 Luxury Places Post Promo".
So I created two content templates:
- Loop item in 6 Luxury Places Post Promo - Normal
- Loop item in 6 Luxury Places Post Promo - Inversed
Which I used inside the view loop, one on the index odd, and the other on even.
Duplicating is just a quick way to create a new Content Template with predefined settings. It is equivalent to creating a blank template and entering all the options. So, you do the way that suits you.
Your original content template, "Loop item in 6 Luxury Places Post Promo", has custom styles, these styles use media queries to customize the style per screen(desktop/tablet/mobile). You can read more about media queries here hidden link
To adapt your view for other screens, you will need to tweak the styles for each resolution. Check this screenshot hidden link
Hey Jamal,
Hope you're well, keeping safe and could enjoy your weekend.
Can I ask just, more a question on why something is?
I have duplicated the alternating layouts for another post, just to test I could.
In the view for Luxury Escapes in Cartmel 18898
Under Templates for the View there is a small section called Post Loop - Inversed.
And yet in Our Top Six Dog Friendly Places 18251
There isn't this section, this the one you set up for me.
Now both work and all good however just wondering what am I doing when I replicate this layout?
Many thanks, Pete
Hi Pete,
For support rules, we are able to handle only one issue at the time. This helps us to bring you a better service and also helps other users to find all the information here exposed.
For that reason, as this is a different question, I created another ticket to answer it:
- https://toolset.com/forums/topic/why-different-number-of-templates-for-this-view/
I have to kindly ask you to mark this ticket as resolved and let us continue in the one.
Best regards,
Jamal
My issue is resolved now. Thank you!
