Use Genesis column classes

This thread is resolved. Here is a description of the problem and solution.

Problem:
How to make a View output work with Genesis column classes?

Solution:
Genesis requires a particular a form of markup and classes for its columns, in contrast to the Bootstrap markup that the Views Loop Wizard will generate.

You need to manually set out the required markup and classes as shown in the example below: https://toolset.com/forums/topic/use-genesis-column-classes/#post-512490

This support ticket is created 7 years ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
-	7:00 – 14:00	7:00 – 14:00	7:00 – 14:00	7:00 – 14:00	7:00 – 14:00	-
-	15:00 – 16:00	15:00 – 16:00	15:00 – 16:00	15:00 – 16:00	15:00 – 16:00	-

Supporter timezone: Europe/London (GMT+01:00)

Tagged: Views plugin, WordPress Archives

This topic contains 2 replies, has 2 voices.

Last updated by Daniella 7 years ago.

Assisted by: Nigel.

Author

Posts

April 11, 2017 at 8:15 pm #512373

Daniella

I am trying to: apply Genesis column classes (hidden link) to this page, hidden link.

The View Code in the loop is: [wpv-layout-start]
[wpv-items-found]

<table width="100%" class="wpv-loop js-wpv-loop">
<wpv-loop wrap="2" pad="true">
[wpv-item index=1]
<tr>
<td>
[wpv-post-body view_template="Loop item in Destination"]
</td>
[wpv-item index=other]
<td>
[wpv-post-body view_template="Loop item in Destination"]
</td>
[wpv-item index=2]
<td>
[wpv-post-body view_template="Loop item in Destination"]
</td>
</tr>
[wpv-item index=pad]
<td></td>
[wpv-item index=pad-last]
<td></td>
</tr>
</wpv-loop>
</table>

[/wpv-items-found]
[wpv-no-items-found]
[wpml-string context="wpv-views"]No items found[/wpml-string]
[/wpv-no-items-found]
[wpv-layout-end]

How can this be accomplished? Thanks!

April 12, 2017 at 7:28 am #512490

Nigel

Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+01:00)

Hi Daniella

You need your Loop Output section to output markup as per the link you shared. Currently you are using a table-based layout, which you will need to replace.

It depends on how many columns you need. In the example below I am using 3 columns.

[wpv-layout-start]
	[wpv-items-found]
	<!-- wpv-loop-start -->
	<wpv-loop wrap="3" pad="false">
		[wpv-item index=1]
			<div class="one-third first">
				[wpv-post-title]
			</div>
		[wpv-item index=other]
			<div class="one-third">
				[wpv-post-title]
			</div>
		[wpv-item index=3]
			<div class="one-third">
				[wpv-post-title]
			</div>
	</wpv-loop>
	<!-- wpv-loop-end -->
	[/wpv-items-found]
	[wpv-no-items-found]
		<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
	[/wpv-no-items-found]
[wpv-layout-end]

If you wanted to change this to four columns, for example, you would need to do the following:

- change wrap="3" in the wpv-loop tag
- change the "one-third" class to "one-quarter" in each occurrence

If you were only using two columns you could omit the index=other block.

April 12, 2017 at 12:21 pm #512651

Daniella

Wonderful! (I was making it harder than it needed to be.) Thanks.

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.