Posted on by

Using Grid Layouts with Participants Database

If you’re looking for a compact and visually striking way to show records from Participants Database, a Grid is a great way to go. Modern browsers all support grid layouts using the CSS3 Grid display mode, and it makes it easy to get great grid layouts with a few simple CSS rules.

In this tutorial I’ll show you how to use a built-in template for the List display to show a grid layout for your list. There are a lot of ways to get this done, but what I want to provide here is a simple way to get a grid layout simply and quickly with enough explanation for someone with some HTML and CSS skills to set up their own grid.

Here is a demo of the grid layout: Participants Database List Grid

Setting Up the Basics

This tutorial is going to show you how to get a grid layout using the built-in “responsive” template because it provides the right kind of HTML structure. Instead of showing the data in a table, it places each record in it’s own container which can be formatted and arranged just using CSS.

Of course, more possibilities are available by using a custom template, and if you’ve got the skills and the need for that, it’s really the best way to go. However, in this tutorial, I wanted to show what is possible without a custom template.

First, we set the list shortcode to use the responsive template like this: [pdb_list template=responsive] This will give us the HTML structure needed to set up the grid.

Setting Up the Content for Each Grid Unit

You’ll need to decide which fields you want in each grid unit. You can put this in the shortcode, using the “fields” attribute to name the fields to include, and the order to include them in…for example: [pdb_list template=responsive fields="photo,first_name,last_name,city,state"]

This really works best if there is content for all the fields in all the records…especially an image…because it can be tricky to make them all look the same if they have missing pieces. The grid effect relies on them all having a similar appearance. For this reason, things like long chunks of text probably won’t work well. If you want to do something like that, you’ll need to use a custom template to help manage the text blocks.

Placing the CSS Rules

Participants Database provides a convenient location for your CSS rules in the plugin settings under the “Custom CSS” tab. You can copy and paste the rules we’ll be putting together here into that setting and they will only get loaded on a page with Participants Database content.

The Shortcode

For the purpose of this demonstration, we will place a special classname on the display so that only this special list display will be affected. Here is the complete shortcode used for this tutorial:

[pdb_list template=responsive fields="photo,first_name,last_name,city,state" class="pdb-list-grid"]

That will give us a classname of “pdb-list-grid” that we can use in our rules so they will only apply to this display.

Using CSS Grid

CSS Grid is a set of properties that can be used to define a content grid. Basically, you set the properties of the grid container and then (if needed) some properties for the grid units. If you want a good overview of the technology in general, I recommend this article over at CSS Tricks: A Complete Guide to Grid

CSS Grids are capable of a lot, it’s probably the most complex feature of CSS3, but we don’t need to do much here: just set up a grid where all of the elements are the same size and have the same internal layout.

At the bottom of this article is the stylesheet for this tutorial. If you look at the rule for “.pdb-list-grid .list-container” on line 15, you’ll see how the grid is set up. First, we make the container a grid container. The next declaration defines the columns. In this case, we are defining 3 equal columns using the “fr” unit. Free Space (fr) units are a convenient way to define column widths because they proportionally allocate the free space inside a container. This is useful because that means we can define the space between the elements to be anything we want without breaking the layout: the free space unit allocates the space that is left over after the space between the elements has been taken into account. In a fr unit, the number is a proportion: all three are set to 1, so they will all be the same width. If, for instance, one was set to 2, that column would be 2x the width of the ones set to 1.

The third declaration sets the gap between the grid items. The first value is the gap between the horizontal rows, the second is the gap between the columns. The row gap we set to a specific value because percentages won’t work for a vertical dimension. Using em as the unit makes the gap proportional to the font size. We set the column gap to 5% so that it will be proportional to the width of the overall grid—this will help make the grid layout more responsive.

Because we’ve used the fr units to define the column widths, we can change the column gap to anything we want, and we’ll always get 3 equal-width columns.

Modifying the CSS

You will need to have some understanding of CSS in order to adapt this to your own case, because many of the rules we include here are specific the the fields we are presenting and how we want to present them.  If you change the kind of fields that are shown, or the order you want them shown in, it probably won’t look right with the rules given here. You’re going to need to understand how to change it so your content grid looks the way you want.

The easy things to change are the number of columns and the gap between the units (each unit is one Participants Database record). For example, you could easily make it 4 columns with a declaration like this:

grid-template-columns: 1fr 1fr 1fr 1fr;

Check the CSS Tricks article I linked to above for more details on what you can do to change the layout.

Formatting Inside Each Unit

For the purposes of this tutorial, we are using only 5 fields from Participants Database: a photo, then on the next line we show the first and last name. The third line has the city and state. All of the rules from line 29 on are specific to laying out these fields in this way.

For instance, for a good-looking grid, we will want to standardize the size of the images. In many cases, the image sources will be of different sizes, so we use the rule on line 47 to set the size of the image to match the width of the grid unit.

The rest of the fields are floated so that they will sit next to each other on the left side of the container. Since we want the location fields to start a new line, we add a “clear” to the first location field: this is done on line 36. We are using the “nth-child” selector, so if the order or number of the fields is different in your case, you’ll need to change this.

Really, the best way to get full control over the layout is to use a custom template, so if you have the skills to take advantage of that I suggest you go that way. Several of the rules we use here (line 9 for instance) are needed because we are using a built-in template. If you used a custom template, you wouldn’t have to do any of that.

The CSS Rules

Here are the style rules we are using to set up our grid. By clicking on the link at the bottom of the code window, you can copy the rules and use them on your site as a starting point for your own grid CSS. One easy way to do that is to paste these rules into the “custom CSS” setting for Participants Database.

23 thoughts on “Using Grid Layouts with Participants Database

  1. Is there a way to use this grid, with multisearch? Having an incredibly difficult time styling that add-on…where the basic plugin was easy to style. Any thoughts/tutorials on styling MultiSearch?

    1. Hi Reid,

      The Combo Multisearch does have a “responsive” template available, you can use this with [pdb_list template=multisearch-responsive ]

      This template does not use CSS grid. If you want to use a CSS grid, you will need to create a custom template for that. If you’re familiar with php and HTML, it’s not hard, you need to compare the two templates: pdb-list-flexbox.php and pdb-list-multisearch-responsive.php and make a new template that uses the HTML structure of the flexbox template with the added functionality of the multisearch template.

      Using Participants Database Custom Templates

      1. hi Roland,

        Yeah, i’ve been using that shortcode. Even without using that template…the base output is less than desirable. So, i guess we do need to create something from scratch. I was hoping it would set up something similar to your screenshot (when you buy the plugin), but it does not, without creating a custom template as well? Is there a reason why this plugin has different functionality than the base? Just for my own edification. (i disabled all plugins too, and we cant change the theme so thats all i could guess to why its not displaying correctly.)

        The base plugin was really easy to style w/ CSS, so I guess it just seems weird to me. Thanks anyway.

        1. I’m not sure which template you were using that you say was easy to style, but the “multisearch-responsive” template is the same as the “responsive” list template, and the “multisearch” template is the same as the “default” list template.

  2. Hello Roland,

    Great article. I have used this in a website i am working on. What i would now like to do, is to have the participants to communicate with each other using a video and chat plugin. I have the users logging in using wordpress and was helped by a previous article of yours ( https://xnau.com/using-participants-database-with-wordpress-users/) so my question is : is there a way to select a participant and chat with them? Can the hidden username element be used for this purpose?

    1. You will need to use a custom template for this because you will need a custom link or some other custom code that will initiate the chat. In the template, you’ll have access to the participant record, which you can use to construct the link to initiate the chat. This can be in a template for the list display or the single record display. It may be helpful to create a field ( a link field maybe) that you will alter in your custom template to show the chat link.

      A more advanced approach is to create a custom form element.

  3. Hi Ronald,

    I have a question about the grid. The link to view the full profile is on the image, is it possible to make the whole block linkable? I mentioned earlier that I found it but that was only the subject about limiting the text field and not about this issue. I hope you can help me with this.

    Thanks!

    1. Something like this is possible with a custom template. You’ll be adding the single record link to every field. It’s not possible in HTML to wrap all of it in a single link.

      1. Thanks for your reply, does this also work with the grid layout? I found this snippet you made on Git Hub but I did not manage to let it work with a custom template on the grid.

        1. Yes, you can do this with any of the list templates. What was the snippet you saw?

        2. I saw this snippet:

          Thanks!

  4. Hello Roland,

    I want to use a free text line in the grid but I want it to be less characters than the normal 255. Is it possible to change the max characters of a text line?

    1. Hi Ronald,

      I also have another question about the grid. The link to view the full profile is on the image, is it possible to make the whole block linkable?

      Thanks!

    2. I already found this :-)

  5. How to display thumbnail images when using the following

    [pdb_list template=responsive fields="photo,first_name,last_name,city,state"]

    1. List displays do normally show thumbnail images in the sense that the size is controlled to fit into the list display. You can set the size of those images using your own CSS rules.

      If you want more control over image displays, including using a lightbox where clicking the image opens a full-size image, check out the Image Expansion Kit

  6. I have bought the Image Enhancement Kit and allow for multiple image uploads. How can I get the grid layout to show just the first image?

    1. OK, this requires a bit of CSS magic. The plan is we hide all of them, then show only the first one. You can put something like this in the Custom CSS setting for Participants Database:

      .pdb-list .mu-image-list > span {
          display: none;
      }
      .pdb-list .mu-image-list .pdbiex-image-field-wrap:first-child {
          display: inline-block;
      }
  7. Hi,

    I am using a grid and it is working great, except the results do not show the placeholder field that I have created for “View Details.” I have included the field ID in the shortcode, just as I have the photo, name, etc (the others all show up in the grid results). But for some reason the placeholder doesn’t show.

    What am I doing wrong? Thank you!

    1. You are 3 for 3 in finding bugs! What is happening is that the placeholder field is getting the ‘blank-field’ class (which it should not), and in the flexbox template, all elements with the blank-field class are hidden.

      What you need to do is add a custom CSS rule that makes the placeholder field visible. For example, if your placeholder field is named ‘placeholder’ you can make it show up with a rule like this:

      .pdb-field-placeholder.blank-field {
      display: block;
      }

      just replace ‘placeholder’ in the selector with the name of your placeholder field.

      You may want to hide the field title, you can also do that with a CSS rule.

      1. Perfect, thank you!

  8. Hello,
    Loving learning about the grid. I’m having an issue with the text PDB_List displaying in the first grid. All other cells display correctly.
    What have I done incorrectly?
    Thanks

    1. Are you using the latest version of the plugin?

Leave a Reply

Your email address will not be published. Required fields are marked *

Would you like to be notified of followup comments via e-mail? You can also subscribe without commenting.

23 thoughts on “Using Grid Layouts with Participants Database

  1. Is there a way to use this grid, with multisearch? Having an incredibly difficult time styling that add-on…where the basic plugin was easy to style. Any thoughts/tutorials on styling MultiSearch?

    1. Hi Reid,

      The Combo Multisearch does have a “responsive” template available, you can use this with [pdb_list template=multisearch-responsive ]

      This template does not use CSS grid. If you want to use a CSS grid, you will need to create a custom template for that. If you’re familiar with php and HTML, it’s not hard, you need to compare the two templates: pdb-list-flexbox.php and pdb-list-multisearch-responsive.php and make a new template that uses the HTML structure of the flexbox template with the added functionality of the multisearch template.

      Using Participants Database Custom Templates

      1. hi Roland,

        Yeah, i’ve been using that shortcode. Even without using that template…the base output is less than desirable. So, i guess we do need to create something from scratch. I was hoping it would set up something similar to your screenshot (when you buy the plugin), but it does not, without creating a custom template as well? Is there a reason why this plugin has different functionality than the base? Just for my own edification. (i disabled all plugins too, and we cant change the theme so thats all i could guess to why its not displaying correctly.)

        The base plugin was really easy to style w/ CSS, so I guess it just seems weird to me. Thanks anyway.

        1. I’m not sure which template you were using that you say was easy to style, but the “multisearch-responsive” template is the same as the “responsive” list template, and the “multisearch” template is the same as the “default” list template.

  2. Hello Roland,

    Great article. I have used this in a website i am working on. What i would now like to do, is to have the participants to communicate with each other using a video and chat plugin. I have the users logging in using wordpress and was helped by a previous article of yours ( https://xnau.com/using-participants-database-with-wordpress-users/) so my question is : is there a way to select a participant and chat with them? Can the hidden username element be used for this purpose?

    1. You will need to use a custom template for this because you will need a custom link or some other custom code that will initiate the chat. In the template, you’ll have access to the participant record, which you can use to construct the link to initiate the chat. This can be in a template for the list display or the single record display. It may be helpful to create a field ( a link field maybe) that you will alter in your custom template to show the chat link.

      A more advanced approach is to create a custom form element.

  3. Hi Ronald,

    I have a question about the grid. The link to view the full profile is on the image, is it possible to make the whole block linkable? I mentioned earlier that I found it but that was only the subject about limiting the text field and not about this issue. I hope you can help me with this.

    Thanks!

    1. Something like this is possible with a custom template. You’ll be adding the single record link to every field. It’s not possible in HTML to wrap all of it in a single link.

      1. Thanks for your reply, does this also work with the grid layout? I found this snippet you made on Git Hub but I did not manage to let it work with a custom template on the grid.

        1. Yes, you can do this with any of the list templates. What was the snippet you saw?

        2. I saw this snippet:

          Thanks!

  4. Hello Roland,

    I want to use a free text line in the grid but I want it to be less characters than the normal 255. Is it possible to change the max characters of a text line?

    1. Hi Ronald,

      I also have another question about the grid. The link to view the full profile is on the image, is it possible to make the whole block linkable?

      Thanks!

    2. I already found this :-)

  5. How to display thumbnail images when using the following

    [pdb_list template=responsive fields="photo,first_name,last_name,city,state"]

    1. List displays do normally show thumbnail images in the sense that the size is controlled to fit into the list display. You can set the size of those images using your own CSS rules.

      If you want more control over image displays, including using a lightbox where clicking the image opens a full-size image, check out the Image Expansion Kit

  6. I have bought the Image Enhancement Kit and allow for multiple image uploads. How can I get the grid layout to show just the first image?

    1. OK, this requires a bit of CSS magic. The plan is we hide all of them, then show only the first one. You can put something like this in the Custom CSS setting for Participants Database:

      .pdb-list .mu-image-list > span {
          display: none;
      }
      .pdb-list .mu-image-list .pdbiex-image-field-wrap:first-child {
          display: inline-block;
      }
  7. Hi,

    I am using a grid and it is working great, except the results do not show the placeholder field that I have created for “View Details.” I have included the field ID in the shortcode, just as I have the photo, name, etc (the others all show up in the grid results). But for some reason the placeholder doesn’t show.

    What am I doing wrong? Thank you!

    1. You are 3 for 3 in finding bugs! What is happening is that the placeholder field is getting the ‘blank-field’ class (which it should not), and in the flexbox template, all elements with the blank-field class are hidden.

      What you need to do is add a custom CSS rule that makes the placeholder field visible. For example, if your placeholder field is named ‘placeholder’ you can make it show up with a rule like this:

      .pdb-field-placeholder.blank-field {
      display: block;
      }

      just replace ‘placeholder’ in the selector with the name of your placeholder field.

      You may want to hide the field title, you can also do that with a CSS rule.

      1. Perfect, thank you!

  8. Hello,
    Loving learning about the grid. I’m having an issue with the text PDB_List displaying in the first grid. All other cells display correctly.
    What have I done incorrectly?
    Thanks

    1. Are you using the latest version of the plugin?

Leave a Reply

Your email address will not be published. Required fields are marked *

Would you like to be notified of followup comments via e-mail? You can also subscribe without commenting.