[Plugin: Participants Database] Display pdb_list individually and not as a table

I did a hack here: https://www.jhcband.org/members/index.php some time ago. It does not work with some of the functions and needs some old files (I have the files and instructions/notes on my home computer)

I found a plug in called “DB-Toolkit” that looks like it can use the fields from the PDb to create a page. It looks to be a bit advanced but pretty straight forward.

Now that summer is rolling down and I have some time I’ll be teaching myself how to use it. I think it will be a better option than my hack.

~Julie

I obsessed over it all day, my old hack does not support the search feature and I needed the look for a mobile page. Here is my solution, I have NO IDEA how it looks across browsers but it looks great on my iPhone!! Now that I have the solution I can work on tweaking it to work across browsers… (my page has info I can’t post in a public forum)

I surrounded my shortcode with a custom class and gave it the following CSS:

‘
<style type=”text/css”>
.jhcb_members a:link, .jhcb_members a:hover, .jhcb_members a:active, .jhcb_members a:visited {
text-decoration:none;
color:#3e3e3e;
}
.jhcb_members .PDb-list-image {
width:100px;
height:150px;
float:left;
padding:5px;
background-image:url(‘url-removed’);
background-repeat:no-repeat;
background-position:50% 50%;
}

.jhcb_members td:nth-child(1){display:inline-block;float:left;}
.jhcb_members td:nth-child(2){display:inline-block;float:left;}
.jhcb_members td:nth-child(3){display:inline-block;float:left;min-width:140px;}
.jhcb_members td:nth-child(4){display:inline-block;float:left;min-width:240px;}
.jhcb_members td:nth-child(5){display:inline-block;float:left;min-width:240px;}
.jhcb_members td:nth-child(5):before{content:”Home: “;font-weight:bold;}
.jhcb_members td:nth-child(6){display:inline-block;float:left;min-width:240px;}
.jhcb_members td:nth-child(6):before{content:”Cell: “;font-weight:bold;}
.jhcb_members td:nth-child(7){display:inline-block;float:left;min-width:240px;}
.jhcb_members th {display:none;}
.jhcb_members {
display:block;
width:344;
height:auto;
padding:0px;
text-align:left;
color:#3e3e3e;
}
</style>
<div class=”jhcb_members”>[pdb_list sort=true list_limit=100 filter=’status=Active’ fields=”member_photo, first_name, last_name, instrument, phone, cell_phone, email” orderby=”last_name” order=”asc”]</div>
‘

The trick is that since the nth-child is based on the table itself, not the column name, you will have to make the CSS specific to each table you want to use it on.

Wow, that’s some pretty impressive CSS there! Well, if it works, great. I’m just kinda sorry I haven’t been able to the the update out which will allow you to create a template and display the data any way you want. It’s coming, though, I’m back to working on it now.

***UGH*** 2 words… IE Sucks! (or is that technically 3?)

Thank You xnau. I live in a resort town also so I understand the computer time vs good weather balance… if the weather is good, the computer can wait. When you work on the template have you considered a V-Card option? They are easy to make but I’m not sure how to make the program know where to put what from a database where we can name fields whatever we want.

I looked at this in some browsers, Fire Fox and Safari will collapse, but IE won’t. I changed the inline-block to inline-table, still no luck. More coffee then back to work. I’ll be sending link to the board memebers, one has an android so I’ll know how it works on an android later today, hopefully.

I added
‘
.jhcb_members table {display:block;width:360px;}
‘
to above to render it correctly but it still wont wrap in IE6,7,&8.

Looking for hack.

~Julie

Here is my hack
https://jhcband.org/wordpress/active-member-public
I looked at it on Safari, Fire Fox, IE 7 & 8 on win XP, I’ll look at it on the others tomorrow.
This isn’t exactly ‘by the book’ but it will work for now.

This will not work with the search. I started with the pdb_list short code document from last spring (this hack does not work with the latest version) made a copy and renamed it. changed the table output to div’s instead td’s, & gave them a class.

I added the function to the main PHP to call the short code then used something like the code above. I had to do some conditional styles for lte IE 8. For the birthdays I used some PHP inside the shortcode.

I hope this helps.
~ J