[Resolved] Display different number of columns (Desktop, tablet, mobile) using view

[Author]

Posts

[graemeH-3]

I want to make a page that links to each (top level) term in my custom taxonomy.

Not to the sub taxonomy terms, though I will want to find a way to do this on the top level term archive pages also

I found this post,
https://toolset.com/forums/topic/display-custom-taxonomies-2/#post-1806959

In reply 1806959 it shows exactly what I want to do, he has a page showing links to each of those top level taxonomy terms.

Currently I'm trying to do this with a views block and I dont see anyway at all to make this happen.

In the post I linked to it says that you need to install the legacy views plugin to do this, is this still not updated or can I do this now hopefully with the views block somehow?

I've switched the settings to ,

Show both the legacy and Blocks interface and let me choose which to use for each item I build

And still I don't see anyway how I am supposed to be able to do this?

Or maybe with some short code, it seems like there must be a way to code in some javascript or something that defines which taxonomy and then display all top level term archive page links?

Next, like I mentioned I will want to do the same thing from term archive pages to their sub term archive pages.

Thanks

[Minesh]

Hello. Thank you for contacting the Toolset support.

Using Toolset Blocks you can create view for only post types and archives. Toolset blocks do not support yet taxonomy and user kind views.

To create taxonomy or user view, you will have to create those views using the classic views. Here is the Doc about how you can use both blocks and classic views:
=> https://toolset.com/course-lesson/enabling-legacy-version-of-toolset-views/

Here is a tutorial about how you can create a taxonomy view for parent terms (you will only need to follow step 2 with the following Doc where steps given to create taxonomy view):
=> https://toolset.com/2021/11/how-to-build-a-custom-category-tree-with-toolset/

[graemeH-3]

Thanks Minesh this is extremely helpful.

I'm now having trouble making the results display in 2-4 clean columns.

I cant seem to find any good examples searching support for this.. Some are 404 and others don't address it directly. It would be cool if there were a library of styling examples for loops like this.

I can see I can select table view in the Loop Wizard, though this leaves the lines of the table, and doesn't adjust number of columns on mobile to desktop. It also makes ascending order of terms from left to right through the columns, instead of top all the way down each one column at a time.

I looked at the bootstrap Loop Wizard option, but it says I need to check and choose with my theme, I'm using Generate Press, I'm not sure if that Wizard option would work for me or not as I'm not sure what to select for the bootstrap in settings.

Is there some way to accomplish this in the block editor of the page where I am inserting this short code as a Field & Text block?

Is there some code I need to add to Search and Pagination, or Loop Editor or Output Editor?

I think it would likely make sense doing 2 columns mobile, 3 tablet, 4 desktop, there's around 50 terms total.

Or just if, there was a way to limit say each column to 13 terms, and then say span width of screen with however many columns it needs to display all.

I just am not much of a coder, but I've been trying to modify things without getting much result.

Adding in column HTML seems tricky with the loop being there..

Help please 🙂

Thank you again!

[Minesh]

You can load the bootstrap from the Toolset. For that you should activate the option:
=> Toolset => Settings => General tab => Bootstrap loading => Set bootstrap 3.

To display the different columns per device you can setup your loop output accordingly:
=> https://toolset.com/documentation/legacy-features/views-plugin/view-layouts-101/#bootstrap

For example - your view's loop output should look like:

<div class="container wpv-loop js-wpv-loop">
	<wpv-loop wrap="4" pad="true">
		[wpv-item index=1]
		<div class="row ">
			<div class="col-md-3 col-sm-4 col-xs-6">
				[wpv-taxonomy-title]
				
			</div>
		[wpv-item index=other]
			<div class="col-md-3 col-sm-4 col-xs-6">
				[wpv-taxonomy-title]
				</div>
		[wpv-item index=4]
			<div class="col-md-3 col-sm-4 col-xs-6">
				[wpv-taxonomy-title]
				
			</div>
		</div>
		[wpv-item index=pad]
			<div class="col-sm-3"></div>
		[wpv-item index=pad-last]
			<div class="col-sm-3"></div>
		</div>
	</wpv-loop>
	</div>

- This should output the taxonomy title ( 2 columns mobile, 3 tablet, 4 desktop)

More info:
=> hidden link

[graemeH-3]

Fantastic!

Thanks Minesh once again super helpful on this.

That seems to work for the column set up.

Really interesting reading about bootstrap css too.

Only thing now is I'm trying to organize the taxonomy terms output alphabetically.

It does this already, but from column to column, which isn't the traditional way to read through an alphabetical list.

I want to show them alphabetically from top to bottom of column 1, then the next terms top to bottom alphabetically into column 2 and 3, etc.

Right now they show up from left to right through the columns, ie. all the A terms going across the top of all the columns, then B's cross left to right and so on.

Looking at the bootstrap css options, I can't really tell a way to do this, it's like I need to consider each taxonomy term as it's own "row" and then put the rows into columns 1 to 4 in that order.

Can you guide me at all on how I could do something like this?

Once again mega helpful thank you!

[Minesh]

As per our support policy, we entertain only one question per ticket. This helps other users searching on the forum as well as help us to write correct problem resolution summery for the original issue reported. May I kindly ask you to open a new ticket for every new question you may have.

Regarding: organize the taxonomy terms output alphabetically.
- Toolset view loop run through the columns to make a row and then move to next row and fill the next row columns that is how it works normally, even wordpress loop will work the same way.

This is not something with control of Toolset and it may require custom CSS code which is beyond the scope of our support policy.

However, here is the link that may help you:
=> https://stackoverflow.com/questions/40696823/how-to-convert-bootstrap-rows-to-columns-by-viewport-size

If you need custom programming for your project, you are welcome to contact any of our certified partners:
=> https://toolset.com/contractors/

[graemeH-3]

Thanks for all the help, noted on the new topics.

I just have so many questions sometimes 😛

Really appreciate the help, things are really coming together !

G