Pull Participant Center Uploaded image to elsewhere

Robert Pegg 2

I wish to pull the image a participant uploads to their TR fundraising page.  I don't see a rhyme or reason to the naming convention of the images (so pulling directly isn't possible).  I thought I could ajax the page and scrape the image to the embedded PC's homepage but I am having CORS issues (embedded PC and personal funraising page are on different domains and one is encrypted; the other not).  It seems I can't figure out a way to reference the personal page through HTTPS.  The following does a redirect to the Personal Page but removes the SSL layer (you can see I am starting with an https url):

<script>

jQuery(document).ready(function() {

    jQuery.ajax({

       url: 'https://secure2.convio.net/cco/site/TRC?px=[[S1:cons_id]]&pg=personal&fr_id=[[S80:trID]]&pgwrap=n',

       dataType: "html",

       success: function(data) {        

        var sSource = jQuery("#personal_page_image_div img", data).attr("src");

        jQuery("#pulledimg").attr("src",sSource);

       }

    }); 

});

</script>
<img src="" id="pulledimg" width="285" height="400"/>


Is there a way to hit the TR personal page via SSL?

Robert Pegg 2

Or is there a way to simply grab the src of the #photo-thumbnail-example element (seem to be having trouble referencing it)?

Romany Nassief

If you are embedding the image within PC context, you can use getParticipants API call that require auth token for logged in participant.


However, if you still want to resolve your CORS issue with jQuery request, you can try any proxy to pass accessing none HTTPS from HTTPS page. Below an example with YQL (Yahoo Query Language)

 

$.getJSON(

  'https://query.yahooapis.com/v1/public/yql',{

    q: 'select * from html where url="http://convio.cancer.ca/site/TR?px=1663862&pg=personal&fr_id=22449&pgwrap=n" and xpath="//div[@id=\\'personal_page_image_div\\']/img"',

    format: 'json'

}).done(function( data ) {

  $("#pulledimg").attr("src",data.query.results.img['src']);

});

Robert Pegg 2

Romany Nassief:

If you are embedding the image within PC context, you can use getParticipants API call that require auth token for logged in participant.


However, if you still want to resolve your CORS issue with jQuery request, you can try any proxy to pass accessing none HTTPS from HTTPS page. Below an example with YQL (Yahoo Query Language)

 

$.getJSON(

  'https://query.yahooapis.com/v1/public/yql',{

    q: 'select * from html where url="http://convio.cancer.ca/site/TR?px=1663862&pg=personal&fr_id=22449&pgwrap=n" and xpath="//div[@id=\\'personal_page_image_div\\']/img"',

    format: 'json'

}).done(function( data ) {

  $("#pulledimg").attr("src",data.query.results.img['src']);

});

 

Does getParticipants expsoe the image url?

 

Romany Nassief

Sorry, I mean getPersonalPhotos

Daniel Hartanto

Hi All,


If I recall correctly in the past,  that "getPersonalPhotos" API only pull uploaded photo of that logged-in person but can't be used to retrieve/display other people's photos. Furthermore the API itself need to be called with login session token (auth token)  hence that was the reason why (as alternative) -- I was loading these personal pages into a DIV placeholder (through jQuery.load() + make sure you call the personal page TR URL sans pagewrapper through &pgwrap=n )


Here's actual implementation of the above mentioned -- that five honoree pictures that otherwise belongs to participants registered on different teamraisers on this landing page are pulled in that fashion.

http://main.diabetes.org/site/PageServer?pagename=FOTY_homepage  


check from "View Source" following related function called loadFathers()  


this implementation is within LO environment, but I think that could be displayed in an actual iframe if need to be rendered on different end cross domain since the iframe is just actually calling the pagebuilder page that does the jQuery.load() still within LO) -- that should likely address any CORS concern. Using a pagebuilder also gives flexibility if you want to call the page as a secure page or regular page since the URL used within jQuery.load for that page is relative.


Just a thought, but let see if that could be applicable to your needs.


regards,

Daniel


EDIT ADD ON:


Other tips (unrelated) on Personal Page  you can call a teamraiser Personal Page in its secure URL counterpart by just adding "S" before the "TR" of the URL -- only if need be.


Example:


regular Teamraiser Personal Page URL:
http://main.diabetes.org/site/TR/StepOut/StepOutContent?px=1830701&pg=personal&fr_id=11524


If you are to add S  before the T  on that /TR/ portion, LO will automatically display the page using its https counterpart, and in this example our secure URL of that same page is:
https://donations.diabetes.org/site/STR/StepOut/StepOutContent?px=1830701&pg=personal&fr_id=11524



P.s. @Romany -- that YQL looks interesting; I'll probably need to explore that going further -- thanks for sharing the tips there!

 

Romany Nassief:

Sorry, I mean getPersonalPhotos

 

Will Hull

Hey there,

If you need this for the purposes of Open Graph head data, you could use <meta property="og:image" content="https://[[S29:SECURE_DOMAIN]]/[insert your shortname here][[E130:"[[C4:graphic_upload]]" ".." "" replaceall ]]" /> as the code in your meta area.

I typically use this as my code in the head when building out TeamRaiser sites:

 

<!-- Begin Open Graph Content --> [[?x[[S334:pg]]x::xpersonalx::<meta name="og:title" content="[[E48:[[S42:0:fr-id]]:cons.first_name:screenname]] [[E48:[[S42:0:fr-id]]:cons.last_name:screenname]]'s [[E42:[[S42:0:fr-id]]:title:true]] Personal Fundraising Page" /><meta name="og:description" content="Please support me and donate to my page as I fundraise for the [[E42:[[S42:0:fr-id]]:title:true]] event" /><meta name="og:url" content="[[S8]]"><meta property="og:image" content="https://[[S29:SECURE_DOMAIN]]/[insert your shortname here][[E130:"[[C4:graphic_upload]]" ".." "" replaceall ]]" />::[[?x[[S334:pg]]x::xteamx::<meta name="og:title" content="Welcome to the [[E48:[[S334:fr_id]]-[[S1:cons_id]]:team-name]] [[E42:[[S42:0:fr-id]]:title:true]] Team Fundraising Page" /"><meta name="og:description" content="Join or Donate to the [[E48:[[S334:fr_id]]-[[S1:cons_id]]:team-name]] Team for the [[E42:[[S42:0:fr-id]]:title:true]] fundraising event" /"><meta name="og:url content="[[S8]]"><meta property="og:image" content="https://[[S29:SECURE_DOMAIN]]/[insert your shortname here][[E130:"[[C4:graphic_upload]]" ".." "" replaceall ]]" />::<meta name="og:title" content="[[E42:[[S42:0:fr-id]]:title:true]]"><meta name="og:description" content="A [[S0:SITE_NAME]] Peer-to-Peer Fundraising Event."><meta name="og:url" content="[[S8]]"><meta name="og:image" content="https://[[S29:SECURE_DOMAIN]]/[insert your shortname here]/images/content/pagebuilder/slide-1-[[?x1x9x::x[[S4]]x::[[S334:FR_ID]]::[[S42:0:fr-id]]]].jpg">]]]] <!-- End Open Graph Content -->

This conditional says, if you are on the personal page then display the personal page image and content as Open Graph data, if not, then display team Open Graph image and data, then if not, then display this generic info (e.g. the slide on a greeting page for instance). You may want to give this a try.

I hope this provides you with a path to the image on a personal/team page to render it where needed when visiting a personal or team page.

Where it says, "[insert your shortname here]" in the code above, you want to replace that with your own Luminate Online shortname. It is in your URL just after the secure part of your domain when when logged in on the back end, (e.g. https://secure3.convio.net/[shortname is here]/...).

Thanks,

Will

Internet Solutions Consultant (Luminate Online Deployments)
will.hull@blackbaud.com