4-column grid view

This support ticket is created Il y a 8 années et 6 mois. 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.

No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.

Marqué : Views plugin

This topic contains 5 réponses, has 2 voix.

Last updated by hugoC-3 Il y a 8 années et 6 mois.

Assisted by: Ivan.

Auteur

Publications

octobre 21, 2015 at 8:15 am #341351

hugoC-3

Following instructions in https://toolset.com/forums/topic/outputting-the-grid-layout-to-column-classes-instead-of-a-table/ I tried to create a 4-column grid loop for my Genesis theme as follows:

[wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->
<wpv-loop wrap="4" pad="false">
[wpv-item index=1]
<div class="one-fourth first">[wpv-post-body view_template="Loop item in Opleidingen"]</div>
[wpv-item index=other]
<div class="one-fourth">[wpv-post-body view_template="Loop item in Opleidingen"]</div>
[wpv-item index=4]
<div class="one-fourth last">[wpv-post-body view_template="Loop item in Opleidingen"]</div>
</wpv-loop>
<!-- wpv-loop-end -->
[/wpv-items-found]
[wpv-no-posts-found][wpml-string context="wpv-views"]<strong>No posts found</strong>[/wpml-string][/wpv-no-posts-found]
[wpv-layout-end]

But the result is that the 2nd and following items appear nested inside the previous one and thus appear in 1 column on the left. What am I doing wrong?

octobre 21, 2015 at 12:17 pm #341410

Ivan

Supporter

Languages: Anglais (English )

Hello Hugo,

Solution from this topic is very old (from 2013) and bootstrap css classes are changed since then.
Can you please submit debug information so I can see which version of View you currently have (https://toolset.com/faq/provide-debug-information-faster-support/)

Below is code example how your code should looks like if you have latest version of Views.

[wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->
<wpv-loop wrap="4" pad="false">
[wpv-item index=1]
<div class="row ">
<div class="col-sm-3">[wpv-post-body view_template="Loop item in Opleidingen"]</div>
[wpv-item index=other]
<div class="col-sm-3">[wpv-post-body view_template="Loop item in Opleidingen"]</div>
[wpv-item index=4]
<div class="col-sm-3">[wpv-post-body view_template="Loop item in Opleidingen"]</div>
</div>
</wpv-loop>
<!-- wpv-loop-end -->
[/wpv-items-found]
[wpv-no-posts-found][wpml-string context="wpv-views"]<strong>No posts found</strong>[/wpml-string][/wpv-no-posts-found]
[wpv-layout-end]

If you have any other question feel free to ask me.

Thanks, Ivan

octobre 21, 2015 at 12:52 pm #341422

hugoC-3

OK, thanks, but I'm still having the same problem of divs nesting when they shouldn't.

Please note that I don't use Bootstrap, but the Genesis columns classes like

.five-sixths, .four-sixths, .four-fifths, .one-fifth, .one-fourth, .one-half, .one-sixth, .one-third, .three-fourths, .three-fifths, .three-sixths, .two-fourths, .two-fifths, .two-sixths, .two-thirds {
    float: left;
    margin-bottom: 20px;
    margin-left: 2.5641%;
}

Here is my debug information (I use the altest version of Views):

{"core":{"Wordpress":{"Multisite":"No","SiteURL":"http:\/\/localhost:8888\/wordpress-cvo","HomeURL":"http:\/\/localhost:8888\/wordpress-cvo","Version":"4.3.1","PermalinkStructure":"\/%year%\/%monthnum%\/%day%\/%postname%\/","PostTypes":"post, page, attachment, revision, nav_menu_item, wp-types-group, wp-types-user-group, view, view-template","PostSatus":"publish, future, draft, pending, private, trash, auto-draft, inherit"},"Server":{"jQueryVersion":"1.11.3","PHPVersion":"5.5.18","MySQLVersion":"5.5.38","ServerSoftware":"Apache\/2.2.29 (Unix) mod_fastcgi\/2.4.6 mod_wsgi\/3.4 Python\/2.7.8 PHP\/5.5.18 mod_ssl\/2.2.29 OpenSSL\/0.9.8zg DAV\/2 mod_perl\/2.0.8 Perl\/v5.20.0"},"PHP":{"MemoryLimit":"256M","UploadMax":"32M","PostMax":"32M","TimeLimit":"30","MaxInputVars":"1000"}},"plugins":{"active_plugins":{"better-font-awesome\/better-font-awesome.php":{"Name":"Better Font Awesome","PluginURI":"http:\/\/wordpress.org\/plugins\/better-font-awesome","Version":"1.4.3","Author":"MIGHTYminnow \u0026 Mickey Kay","AuthorURI":"mickey@mickeykaycreative.com","TextDomain":"better-font-awesome","DomainPath":"\/languages","Network":false,"Title":"Better Font Awesome","AuthorName":"MIGHTYminnow \u0026 Mickey Kay"},"genesis-columns-advanced\/genesis-columns-advanced.php":{"Name":"Genesis Columns Advanced","PluginURI":"http:\/\/www.outermostdesign.com","Version":"1.0.3","Author":"Nick Diego","AuthorURI":"http:\/\/www.outermostdesign.com","TextDomain":"genesis-custom-headers","DomainPath":"","Network":false,"Title":"Genesis Columns Advanced","AuthorName":"Nick Diego"},"genesis-featured-page-advanced\/genesis-featured-page-advanced.php":{"Name":"Genesis Featured Page Advanced","PluginURI":"http:\/\/www.outermostdesign.com\/","Version":"1.8.1","Author":"Nick Diego","AuthorURI":"http:\/\/www.outermostdesign.com\/","TextDomain":"genesis-featured-page-advanced","DomainPath":"","Network":false,"Title":"Genesis Featured Page Advanced","AuthorName":"Nick Diego"},"genesis-responsive-slider\/genesis-responsive-slider.php":{"Name":"Genesis Responsive Slider","PluginURI":"http:\/\/www.studiopress.com","Version":"0.9.5","Author":"StudioPress","AuthorURI":"http:\/\/www.studiopress.com","TextDomain":"genesis-responsive-slider","DomainPath":"\/languages","Network":false,"Title":"Genesis Responsive Slider","AuthorName":"StudioPress"},"media-library-assistant\/index.php":{"Name":"Media Library Assistant","PluginURI":"http:\/\/fairtradejudaica.org\/media-library-assistant-a-wordpress-plugin\/","Version":"2.14","Author":"David Lingren, Fair Trade Judaica","AuthorURI":"http:\/\/fairtradejudaica.org\/our-story\/staff\/","TextDomain":"media-library-assistant","DomainPath":"\/languages","Network":false,"Title":"Media Library Assistant","AuthorName":"David Lingren, Fair Trade Judaica"},"post-type-switcher\/post-type-switcher.php":{"Name":"Post Type Switcher","PluginURI":"http:\/\/wordpress.org\/extend\/post-type-switcher\/","Version":"1.5","Author":"johnjamesjacoby","AuthorURI":"http:\/\/johnjamesjacoby.com","TextDomain":"","DomainPath":"","Network":false,"Title":"Post Type Switcher","AuthorName":"johnjamesjacoby"},"regenerate-thumbnails\/regenerate-thumbnails.php":{"Name":"Regenerate Thumbnails","PluginURI":"http:\/\/www.viper007bond.com\/wordpress-plugins\/regenerate-thumbnails\/","Version":"2.2.4","Author":"Viper007Bond","AuthorURI":"http:\/\/www.viper007bond.com\/","TextDomain":"","DomainPath":"","Network":false,"Title":"Regenerate Thumbnails","AuthorName":"Viper007Bond"},"types\/wpcf.php":{"Name":"Types","PluginURI":"http:\/\/wordpress.org\/extend\/plugins\/types\/","Version":"1.8.7.1","Author":"OnTheGoSystems","AuthorURI":"http:\/\/www.onthegosystems.com","TextDomain":"","DomainPath":"","Network":false,"Title":"Types","AuthorName":"OnTheGoSystems"},"wp-views\/wp-views.php":{"Name":"WP Views","PluginURI":"https:\/\/toolset.com\/?utm_source=viewsplugin\u0026utm_campaign=views\u0026utm_medium=plugins-list-full-version\u0026utm_term=Visit plugin site","Version":"1.10.1","Author":"OnTheGoSystems","AuthorURI":"http:\/\/www.onthegosystems.com","TextDomain":"","DomainPath":"","Network":false,"Title":"WP Views","AuthorName":"OnTheGoSystems"}},"mu_plugins":[],"dropins":[]},"theme":{"Name":"Dynamik-Gen","ThemeURI":null,"Author":"\u003Ca href=\u0022https:\/\/cobaltapps.com\/\u0022\u003EThe Cobalt Apps Team\u003C\/a\u003E","AuthorURI":null,"Template":"genesis","Version":"1.9","TextDomain":null,"DomainPath":null},"extra-debug":{"types":{"add_resized_images_to_library":0,"register_translations_on_import":1,"images_remote":0,"images_remote_cache_time":"36","help_box":"by_types","hide_standard_custom_fields_metabox":"show","postmeta_unfiltered_html":"on","usermeta_unfiltered_html":"on"},"views":{"views_template_loop_blog":"0","wpml_fix_urls":true,"wpv_bootstrap_version":"1","wpv_custom_conditional_functions":[],"wpv_custom_inner_shortcodes":[],"wpv_debug_mode":"","wpv_debug_mode_type":"compact","wpv_map_plugin":"","wpv_show_edit_view_link":1,"wpv_show_hidden_fields":"","wpv_saved_auto_detected_framework":""}}}

octobre 21, 2015 at 12:57 pm #341426

Ivan

Supporter

Languages: Anglais (English )

Hi Hugo,

Sorry, I didn't noticed that you are using Genesis.

I would like to request temporary access (wp-admin and FTP) to your site to take better look at the issue. You will find the needed fields for this below the comment area when you log in to leave your next reply. The information you will enter is private which means only you and I can see and have access to it.

Also, can you please tell me View name, and URL in front end where I can see the problem.

Thanks, Ivan

octobre 22, 2015 at 8:57 am #341696

Ivan

Supporter

Languages: Anglais (English )

Hello Hugo,

Problem was in small bug inside View loop template, it seems like you forget to close "media" div.
This is correct code:

<a href="[wpv-post-url]">
<div class="media">
  <div class="media__image">
    [wpv-post-featured-image size="custom-thumb-1" class="img-responsive" style="max-width: 100%;"]</div>
  <div class="media__body">
    <p>[wpv-post-title output="sanitize"]</p>
  </div>
 </div>
</a>

Problem is already fixed on your website.

Thanks, Ivan

octobre 22, 2015 at 3:54 pm #341821

hugoC-3

Thx!

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