Participant List with Profile Images on TR Entry Page

JP Provencal · June 2016

I'm working with a client that is managing an event in TeamRaiser where there is no public registration. Agency staff manually register the participants on the adminsitraive side of the event.

The client is now wnating the TR entry page to display a list of the active participants along with thier profile images as loaded on their personal pages. The goal is that you can click on the particpants image and get taken to their personal page.

My goal is to have this list generate dynamically for the client rather than telling them they have to hand code the list. So my challenges to date are that I can't find an S tag to generate anyting remotley tied to this... so I'm now looking at the API.

My colleague at the office used the getTopParticipantsData to pull the list of all participants on our event, their names and thier ids. Using this data we can construct thier link to thier Personal page.

Then he tried using the getPersonalPhotos to pull the participants picture... no go. Looks like we are needing to authenticate as the participant to get the aip to return the participants photo.

Are we missing somehting?

Daniel Hartanto · June 2016

No API would accomodate that so far I am aware of (API only returns photo for logged in user)

Thus, Javascript (jQuery load) would be one candidate to achieve that, like what I did here (note make sure you exclude the wrapper when loading those personal pages in iframe DIVs through the use of &pgwrap=n to clear up all those overheads that might otherwise impact your site load performance), and have jQuery retrieve the img srcs from those DIV containers into the place you want it to be -- This might not be ideal if you are loading let say tons of personal page photos in a page (i.e. like a crowdrise layout etc)

http://main.diabetes.org/site/TR/FatheroftheYear/FOTYContent?pg=entry&fr_id=11279

Now another alternative as I read your upload process, you stated that "Agency staff manually register the participants on the adminsitraive side of the event. " -- in that case you have more flexibility in terms of having the staff trained to retrieve the uploaded image URL (since that's the only thing we need to locate the image and use them into those img src).

With that said, once they are trained to retrieve the uploaded img src you could create an empty custom Teamraiser page, and train them to put those raw text data in a delimiter notion format (no handcode HTML here) or future iteration you could create a widget to convert that into JSON object that you could then use Javascript to parse the desired data into (save the page from having to perform multiple jQuery loads of those personal pages just to grab the img src performance wise).

I have been doing that kind of in-house solution for several of our sites.

Here's one actual use case where I am using it to build the Route Table -- the data are taken from custom TR page and that page purpose is to hold that raw data text that staff put that themselves after they have been trained the pattern to follow (these are non technical staff) as you can see here: http://main.diabetes.org/site/TR?pg=informational&fr_id=11756&type=fr_informational&sid=23670&pgwrap=n

And here's the landing page with the route data presented either in a "table look and feel" or "accordion" when screen resizes to a mobile dimension
http://main.diabetes.org/site/TR/TourdeCure/TourAdmin?fr_id=11756&pg=entry

Hope that helps

Daniel

EDIT Add On:

Just some question -- is the objective to pull photos of only Top Participants or the entire participants that happened to be registered for that event?

Brian Mucha · June 2016

With that said, once they are trained to retrieve the uploaded img src you could create an empty custom Teamraiser page, and train them to put those raw text data in a delimiter notion format or create a JSON object that you could then use Javascript to parse the desired data into (save the page from having to load multiple personal pages just to grab the img src performance wise). I have been doing that kind of in-house solution for several of our sites.

It's a roll-your-own-api.

You could put that JSON in a reusable page instead, and embed that in the event PageWrapper. Then you'd save the lookup to the custom page, it would be right there. You might wrap it in an STag conditional so you don't serve it where it isn't needed.

Daniel Hartanto · June 2016

yuppie, "roll-your-own-api" all the way

(wasn't even aware of that discussion, thanks Brian!)

Yup, no need to have to always put that into a custom TR page (but in that particular cases of ours, we restrict non-tech staffs from accessing pagebuilder component, so their only option currently is that custom TR page editable on their own through that EMC component.

Next iteration on DIY after this phase is to create a little front-end form powered by javascript that would allow them to parse input in a much more controlled environment (preventing human errors typo etc) and convert that into JSON, where they just then have to copy paste the generated JSON into either pagebuilder / or that custom TR page.. (if only time is a plenty here.. but def will share)

Andrew Blossom · November 2016

Just as an additional bit of information, I used the following JS to parse the participant list output by [[S36:top_participants_list,FR_ID,0,0,list,sum,NUMBER_OF_PARTICIPANTS,title]], extract the image url provided by the participant and then add it back into the participant list:

$(".indicator-list-row").each(function() {

var jqxhr = $.ajax({

type: 'POST',

url: $("a.indicator-link", this).attr('href')+"&pgwrap=n",

dataType: 'html',

context: document.body,

global: false,

async:false,

success: function(data) {

return data;

}

}).responseText;

imageUrl = $(jqxhr).find("#personal_page_image_div img").attr("src");

if (imageUrl.length){

imageUrl = imageUrl.replace("../","REPLACE WITH YOUR BASE URL");

}

else{

imageUrl = 'URL_TO_DEFAULT_AVATAR'

}

Then you can set whatever you want to imageUrl (in my case, it was the background-image of a div). It's far from perfect but is a good base to build on.

Participant List with Profile Images on TR Entry Page

Comments

Categories