Banner selection in profile

[hellsblizzz]

Hello ,

I use to have this great feature for my members back on v4. They could change the main banner in there Profile to multible banners i placed in . I lost the code at first but recently i found it back on my old pc. I tried it on v5 but it dosnt seem to work,unless its broken or maybe i made a mistake . 

Anyway i would like to ask if its possible to make a plugin about it on v5. I searched the whole libary but cant really find something simular . If its already there and i missed it could somebody please show me the direction. 

Small note : im not talking about banners on diferant boards. But a selection in your profile like you would for example be able to change a forum theme.

Here is the OLD V4 code and i believe it was written back than by Peter (not sure) 



Global header: 
inWhat this script does is let's your members select a different banner to show in the welcome table. It is selectable from the profile, and it will remember the selection next time he/she visits.



Please read the instructions carefully.





<script type="text/javascript">

<!--



// Created by PopThosePringles



// URL to the blank image (added in skin area).

var theBlank = "http://www.4d5.net/v4images/blank.gif";



// List all the banners to show in drop down

var iBanners = [

   ["Select Banner", "DEFAULT BANNER URL"],

   ["Banner 1", "URL 1"],

   ["Banner 2", "URL 2"],

   ["Banner 3", "URL 3"],

   ["Banner 4", "URL 4"]

];



if(document.getElementsByTagName("img").item(0).src == theBlank){

   document.getElementsByTagName("img").item(0).id = "banselect";

}



function getCook(){

   if(document.cookie.match(/banid=(\d+)/)){

       return RegExp.$1;

   } else {

       if(document.getElementById("banselect")){

           document.getElementById("banselect").src = iBanners[0][1];

       }

       return null;

   }

}



if(document.getElementById("banselect")){

   if(getCook() != null){

       document.getElementById("banselect").src = iBanners[getCook()][1];

   }

}



//-->

</script>





Ok, first thing, and most important part of the code is the logo image. Enter a blank 1 x 1 pixel image as the logo. You can do this by going to admin > skins > modify skin, enter the blank image url into the logo field. Once you have done that, add that blank image url into the script. Change theBlank variable so it has your blank image url. Make sure you get the right, otherwise the script will not work.



Next part would be to add your default banner, this will be the one that will show up when the user hasn't selected one. Enter this into the first one of the array...



["Select Banner", "DEFAULT BANNER URL"],



Next add the other banners in, just replace URL X with the URL. If you wish to add more then what's there, add another ["Banner 4", "URL 4"]. So for example, if I wanted to add 2 more banners I would have this...



var iBanners = [

   ["Select Banner", "DEFAULT BANNER URL"],

   ["Banner 1", "URL 1"],

   ["Banner 2", "URL 2"],

   ["Banner 3", "URL 3"],

   ["Banner 4", "URL 4"],

   ["Banner 4", "URL 5"],

   ["Banner 4", "URL 6"]

];



Simple :)



All you need to do now is add that code into your Global headers.











Now, this code below is the one that allows the members to select the banner from their profile. You shouldn't need to touch this, so all you need to do is add it to your Main footer.





<script type="text/javascript">

<!--

/*

Banner selection from profile - Created by Peter



This code cannot be reposted anywhere other than SSDesigns or ProBoards Support.



This header must stay intact.

*/



var iBBDesTxt = "Select a banner you wish to have show in the welcome table instead of the default one.";



function setCookie(name,value,expires,domain){

document.cookie = name + "=" + encodeURI(value) + ((expires == null) ? "" : "; expires=" + expires.toGMTString()) + ((domain == null) ? "" : "; domain=" + domain);



}



function doBanSelect(){

   var iTable = document.getElementsByTagName("table");

   var bSel = document.createElement("select");

   var iBFont = document.createElement("font");

   var bDesc = document.createTextNode("Banner:");



   iBFont.size = "-2";

   var iBBDes = iBFont.cloneNode(true).appendChild(document.createTextNode(iBBDesTxt));

   iBFont.size = "-1";

   iBFont.appendChild(bDesc);



   bSel.onchange = function(){

       var iDomain = location.hostname;

       var ExpDate = new Date ();



       ExpDate.setTime(ExpDate.getTime() + (180 * 24 * 3600 * 1000));



       setCookie("banid", this.selectedIndex, ExpDate, iDomain);

   }



   for(b = 0; b < iBanners.length; b ++){

       bSel.options[bSel.options.length] = new Option(iBanners[0], b);

       if(b == parseInt(getCook())){

           bSel.options.selected = true;

       }

   }



   for(t = 0; t < iTable.length; t ++){

       if(iTable.item(t).width == "650" && iTable.item(t).innerHTML.match(/Show Age:/)){

           var nRow = iTable.item(t).insertRow(iTable.item(t).rows.length);

           var nCell = nRow.insertCell(0);

           nCell.appendChild(iBFont);

           nCell = nRow.insertCell(1);

           nCell.appendChild(bSel);

           nCell = nRow.insertCell(2).appendChild(iBBDes);

       }

   }

}



if(location.href.match(/=modifyprofile&user=/) && document.modifyForm){

   doBanSelect();

}



//-->

</script>sert code here
Main footer: 

insert co<script type="text/javascript">

<!--

/*

Banner selection from profile - Created by Peter



This code cannot be reposted anywhere other than SSDesigns or ProBoards Support.



This header must stay intact.

*/



var iBBDesTxt = "Select a banner you wish to have show in the welcome table instead of the default one.";



function setCookie(name,value,expires,domain){

document.cookie = name + "=" + encodeURI(value) + ((expires == null) ? "" : "; expires=" + expires.toGMTString()) + ((domain == null) ? "" : "; domain=" + domain);



}



function doBanSelect(){

   var iTable = document.getElementsByTagName("table");

   var bSel = document.createElement("select");

   var iBFont = document.createElement("font");

   var bDesc = document.createTextNode("Banner:");



   iBFont.size = "-2";

   var iBBDes = iBFont.cloneNode(true).appendChild(document.createTextNode(iBBDesTxt));

   iBFont.size = "-1";

   iBFont.appendChild(bDesc);



   bSel.onchange = function(){

       var iDomain = location.hostname;

       var ExpDate = new Date ();



       ExpDate.setTime(ExpDate.getTime() + (180 * 24 * 3600 * 1000));



       setCookie("banid", this.selectedIndex, ExpDate, iDomain);

   }



   for(b = 0; b < iBanners.length; b ++){

       bSel.options[bSel.options.length] = new Option(iBanners[b][0], b);

       if(b == parseInt(getCook())){

           bSel.options[b].selected = true;

       }

   }



   for(t = 0; t < iTable.length; t ++){

       if(iTable.item(t).width == "650" && iTable.item(t).innerHTML.match(/Show Age:/)){

           var nRow = iTable.item(t).insertRow(iTable.item(t).rows.length);

           var nCell = nRow.insertCell(0);

           nCell.appendChild(iBFont);

           nCell = nRow.insertCell(1);

           nCell.appendChild(bSel);

           nCell = nRow.insertCell(2).appendChild(iBBDes);

       }

   }

}



if(location.href.match(/=modifyprofile&user=/) && document.modifyForm){

   doBanSelect();

}



//-->

</script>

de here

Anyway i hope im not wasting peoples time . But this was a great add to my forum back than . I would love to see it back in a easy to use plugin.

Thank you for reading.

[P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓]

Jul 31, 2015 4:20:10 GMT -8 hellsblizzz said:

Hello ,

I use to have this great feature for my members back on v4. They could change the main banner in there Profile to multible banners i placed in . I lost the code at first but recently i found it back on my old pc. I tried it on v5 but it dosnt seem to work,unless its broken or maybe i made a mistake . 

Anyway i would like to ask if its possible to make a plugin about it on v5. I searched the whole libary but cant really find something simular . If its already there and i missed it could somebody please show me the direction. 

Small note : im not talking about banners on diferant boards. But a selection in your profile like you would for example be able to change a forum theme.

Here is the OLD V4 code and i believe it was written back than by Peter (not sure) 




Main footer: 

insert co<script type="text/javascript">

<!--

/*

Banner selection from profile - Created by Peter



This code cannot be reposted anywhere other than SSDesigns or ProBoards Support.



This header must stay intact.

*/



var iBBDesTxt = "Select a banner you wish to have show in the welcome table instead of the default one.";



function setCookie(name,value,expires,domain){

document.cookie = name + "=" + encodeURI(value) + ((expires == null) ? "" : "; expires=" + expires.toGMTString()) + ((domain == null) ? "" : "; domain=" + domain);



}



function doBanSelect(){

var iTable = document.getElementsByTagName("table");

var bSel = document.createElement("select");

var iBFont = document.createElement("font");

var bDesc = document.createTextNode("Banner:");



iBFont.size = "-2";

var iBBDes = iBFont.cloneNode(true).appendChild(document.createTextNode(iBBDesTxt));

iBFont.size = "-1";

iBFont.appendChild(bDesc);



bSel.onchange = function(){

var iDomain = location.hostname;

var ExpDate = new Date ();



ExpDate.setTime(ExpDate.getTime() + (180 * 24 * 3600 * 1000));



setCookie("banid", this.selectedIndex, ExpDate, iDomain);

}



for(b = 0; b < iBanners.length; b ++){

bSel.options[bSel.options.length] = new Option(iBanners[0], b);

if(b == parseInt(getCook())){

bSel.options.selected = true;

}

}



for(t = 0; t < iTable.length; t ++){

if(iTable.item(t).width == "650" && iTable.item(t).innerHTML.match(/Show Age:/)){

var nRow = iTable.item(t).insertRow(iTable.item(t).rows.length);

var nCell = nRow.insertCell(0);

nCell.appendChild(iBFont);

nCell = nRow.insertCell(1);

nCell.appendChild(bSel);

nCell = nRow.insertCell(2).appendChild(iBBDes);

}

}

}



if(location.href.match(/=modifyprofile&user=/) && document.modifyForm){

doBanSelect();

}



//-->

</script>

de here

Lynx Do you think you could revamp this old code in order to get it working on v5 and repack it as a plugin with banner image options in the manage section?

(Also if you don't want to take this up: PopThosePringles is actually Peter of the monetary system and he might be willing to update it but is usually really busy)



<script type="text/javascript">

<!--



// Created by PopThosePringles



// URL to the blank image (added in skin area).

var theBlank = "http://www.4d5.net/v4images/blank.gif";
//This is still an active link so no change is necessary


// List all the banners to show in drop down

var iBanners = [

["Select Banner", "DEFAULT BANNER URL"],

["Banner 1", "URL 1"],

["Banner 2", "URL 2"],

["Banner 3", "URL 3"],

["Banner 4", "URL 4"]

];
//Add to manage plugin section


if(document.getElementsByTagName("img").item(0).src == theBlank){

document.getElementsByTagName("img").item(0).id = "banselect";

}
//Change to select Proboards banner's source and change it's id


function getCook(){

if(document.cookie.match(/banid=(\d+)/)){

return RegExp.$1;

} else {

if(document.getElementById("banselect")){

document.getElementById("banselect").src = iBanners[0][1];

}

return null;

}

}



if(document.getElementById("banselect")){

if(getCook() != null){

document.getElementById("banselect").src = iBanners[getCook()][1];

}

}



//-->




</script>


I think that if you changed those targeted areas and made his instructions more automated, I believe this could make a good repack as long as you gave peter credit as the original developer of the code.

[Lynx]

P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓,

I'll give it a try, but this might be more advanced than what I'm ready for. I actually made a new forum for just doing this type of thing though (my B.A.N. forum is getting overloaded with plugins), so I'm working on new stuff on CND (Codes and Designs - link in sig).

Also, for management, would it be better to use an auto form for new entries of Banner Name and Banner URL, or have a fixed amount for max? If an auto form would work, how would I take this:

var iBanners = [

["Select Banner", "DEFAULT BANNER URL"],

["Banner 1", "URL 1"],

["Banner 2", "URL 2"],

["Banner 3", "URL 3"],

["Banner 4", "URL 4"]

];

and make it useable to read entries from the auto form?

Oh, and I did leave Peter's headings in as well as credit him in the About tab.

[P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓]

Aug 1, 2015 8:10:53 GMT -8 Lynx said:

P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓,

I'll give it a try, but this might be more advanced than what I'm ready for. I actually made a new forum for just doing this type of thing though (my B.A.N. forum is getting overloaded with plugins), so I'm working on new stuff on CND (Codes and Designs - link in sig).

Also, for management, would it be better to use an auto form for new entries of Banner Name and Banner URL, or have a fixed amount for max? If an auto form would work, how would I take this:

var iBanners = [

["Select Banner", "DEFAULT BANNER URL"],

["Banner 1", "URL 1"],

["Banner 2", "URL 2"],

["Banner 3", "URL 3"],

["Banner 4", "URL 4"]

];

and make it useable to read entries from the auto form?

Oh, and I did leave Peter's headings in as well as credit him in the About tab.

what an autoform does, it lets you create as many fields as you want, and organize it in an array with nearly no maximum. 
So you will create an autoform, name it, add two regular old text fields in the autoform, name the fields Name and Image
Then you will reference the autoform by

 var yourautoform = proboards.plugin.get('Plugin_Name').Tab_Title.Autoform_Name
for(a=0; a<yourautoform.length; a++)

{pb.window.alert(yourautoform[a].Field_Title_In_Autoform) }


Now the reason you may be a little confused is because an autoform is a JSON Object (actually all variables are)
Any variable that requires a . to go down the organizational list is an object. 
But they have that easy selection on the right in order to help assist that process.
Basically an object is organized like a data tree. A folder with subfolders etc.
proboards.plugin.get('Plugin_Name') is The main folder where data can be stored.
You can store data in there by using the . So it's like creating new folders from there.

A plugin manage section creates a sub folder for each tab that is created in that section. Then a sub folder for every field in that tab. And an autoform creates a subfolder on top of that.

So now you have the rundown.

An array is like a list with no end accessed by  [] and an index number.
The first item starts with 0 and the last ends with the length-1 (because 0 takes a spot)

So this is a combination of an array inside a JSON object holding a json object holding a string.
By setting the variable yourautoform, you removed the first json object
By using an index, you remove the string
by using the . Field_Title  you have removed the last object and directly access the string in the autoform in order

[Lynx]

Aug 1, 2015 12:16:59 GMT -8 P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ said:

what an autoform does, it lets you create as many fields as you want, and organize it in an array with nearly no maximum. 
So you will create an autoform, name it, add two regular old text fields in the autoform, name the fields Name and Image
Then you will reference the autoform by

 var yourautoform = proboards.plugin.get('Plugin_Name').Tab_Title.Autoform_Name
for(a=0; a<yourautoform.length; a++)

{pb.window.alert(yourautoform[a].Field_Title_In_Autoform) }


Now the reason you may be a little confused is because an autoform is a JSON Object (actually all variables are)
Any variable that requires a . to go down the organizational list is an object. 
But they have that easy selection on the right in order to help assist that process.
Basically an object is organized like a data tree. A folder with subfolders etc.
proboards.plugin.get('Plugin_Name') is The main folder where data can be stored.
You can store data in there by using the . So it's like creating new folders from there.

A plugin manage section creates a sub folder for each tab that is created in that section. Then a sub folder for every field in that tab. And an autoform creates a subfolder on top of that.

So now you have the rundown.

An array is like a list with no end accessed by  [] and an index number.
The first item starts with 0 and the last ends with the length-1 (because 0 takes a spot)

So this is a combination of an array inside a JSON object holding a json object holding a string.
By setting the variable yourautoform, you removed the first json object
By using an index, you remove the string
by using the . Field_Title  you have removed the last object and directly access the string in the autoform in order


 var yourautoform = proboards.plugin.get('Plugin_Name').Tab_Title.Autoform_Name
for(a=0; a<yourautoform.length; a++)

{pb.window.alert(yourautoform[a].Field_Title_In_Autoform) }



A couple of things on this that's got me scratching my head:

(1) Field_Title_In_Autoform - there's 2 fields: Name and Image (Variable ID's match field names but in all lowercase). Which field title is used? (see image below of UI setup right now for that)

(2) pb.window.alert - doesn't that pop up an alert window? I'm missing something, because I'm not seeing it's purpose if that's what it's doing.

Autoform UI current setup:



Also, snippets of your above explanations came out like this (3 double sets of font BBCode):

Any variable that requires a[font color="#1979e6"] [/font][font color="#e61919"].[/font] to go down

You can store data in there by using the [font color="#e61919"]. [/font][font color="#ffffff"]So it's like creating new folders from there.
[/font]A plugin

by using the [font color="#f81a1a"]. [/font][font color="#ffffff"]Field_Title  [/font][font color="#f3f3f3"]you have removed the last object and directly access the string in the autoform in order
[/font]


Not sure what the double sets of [font color=] are for. The first one (first set) looks like it just has a space in it. The second ones (in 2nd and 3rd sets) are just changing your text color - didn't even see So it's like creating new folders from there. until after I hit the quote button for my reply.

[P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓]

Aug 1, 2015 17:52:58 GMT -8 Lynx said:

Aug 1, 2015 12:16:59 GMT -8 P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ said:

what an autoform does, it lets you create as many fields as you want, and organize it in an array with nearly no maximum. 
So you will create an autoform, name it, add two regular old text fields in the autoform, name the fields Name and Image
Then you will reference the autoform by

 var yourautoform = proboards.plugin.get('Plugin_Name').Tab_Title.Autoform_Name
for(a=0; a<yourautoform.length; a++)

{pb.window.alert(yourautoform[a].Field_Title_In_Autoform) }


Now the reason you may be a little confused is because an autoform is a JSON Object (actually all variables are)
Any variable that requires a . to go down the organizational list is an object. 
But they have that easy selection on the right in order to help assist that process.
Basically an object is organized like a data tree. A folder with subfolders etc.
proboards.plugin.get('Plugin_Name') is The main folder where data can be stored.
You can store data in there by using the . So it's like creating new folders from there.

A plugin manage section creates a sub folder for each tab that is created in that section. Then a sub folder for every field in that tab. And an autoform creates a subfolder on top of that.

So now you have the rundown.

An array is like a list with no end accessed by  [] and an index number.
The first item starts with 0 and the last ends with the length-1 (because 0 takes a spot)

So this is a combination of an array inside a JSON object holding a json object holding a string.
By setting the variable yourautoform, you removed the first json object
By using an index, you remove the string
by using the . Field_Title  you have removed the last object and directly access the string in the autoform in order


 var yourautoform = proboards.plugin.get('Plugin_Name').Tab_Title.Autoform_Name
for(a=0; a<yourautoform.length; a++)

{pb.window.alert(yourautoform[a].Field_Title_In_Autoform) }



A couple of things on this that's got me scratching my head:

(1) Field_Title_In_Autoform - there's 2 fields: Name and Image (Variable ID's match field names but in all lowercase). Which field title is used? (see image below of UI setup right now for that)

(2) pb.window.alert - doesn't that pop up an alert window? I'm missing something, because I'm not seeing it's purpose if that's what it's doing.

Autoform UI current setup:



Also, snippets of your above explanations came out like this (3 double sets of font BBCode):

Any variable that requires a[font color="#1979e6"] [/font][font color="#e61919"].[/font] to go down

You can store data in there by using the [font color="#e61919"]. [/font][font color="#ffffff"]So it's like creating new folders from there.
[/font]A plugin

by using the [font color="#f81a1a"]. [/font][font color="#ffffff"]Field_Title  [/font][font color="#f3f3f3"]you have removed the last object and directly access the string in the autoform in order
[/font]


Not sure what the double sets of [font color=] are for. The first one (first set) looks like it just has a space in it. The second ones (in 2nd and 3rd sets) are just changing your text color - didn't even see So it's like creating new folders from there. until after I hit the quote button for my reply.

The double quotes are an accident. It was just to emphasize that a period manipulates data and it's a symbol not a period in a sentence. 
The clip I gave you was an example.
Your autoform looks good.
The force option isn't really the best for autoforms, it basically means one line in the form has to be filled out. 
So I'm assuming it will look something like

var ibannertemp = proboards.plugin.get('Plugin_Name').manage_banners.banners_to_use
var ibannertemp2 = new Array()
ibannertemp2 = ["Select Banner",ibannertemp[0].image]//["Select Banner", "DEFAULT BANNER URL"],

for(a=1; a<ibannertemp.length; a++)
{ibannertemp2[a]=[ibannertemp[a].name,ibannertemp[a].image] }
var iBanners = ibannertemp2



Just replace 'Plugin_Name' with the one that is generated with the plugin
You can find out by inserting any of the variables on the right screen area and looking at what it pastes in the code.
That should declare and set iBanners to your autoform.

[Lynx]

I'm not getting something right - nothing is showing up in my profile under any of the tabs (while editing profile) for the selection box to choose what banner. I've even just tossed a couple of Imgur hosted images just in case it needed something to display. Nothing.

Can I PM you, P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓, of what the entire JS looks like so far?

[P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓]

Aug 2, 2015 8:10:52 GMT -8 Lynx said:

I'm not getting something right - nothing is showing up in my profile under any of the tabs (while editing profile) for the selection box to choose what banner. I've even just tossed a couple of Imgur hosted images just in case it needed something to display. Nothing.

Can I PM you, P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓, of what the entire JS looks like so far?

you could export me an editable copy and send me a link as well as give me the site it's running on via pm or just the code and the site

[Lynx]

Editable Plugin: (attachment removed)

Active on: codesndesigns.boards.net/

[P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓]

Aug 2, 2015 12:28:45 GMT -8 Lynx said:

Editable Plugin: (This is NOT a working copy. This is for P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ (or any other coder) to look at)

Site active on: codesndesigns.boards.net/

// Created by PopThosePringles

// URL to the blank image (added in skin area).

var theBlank = "http://www.4d5.net/v4images/blank.gif";



// List all the banners to show in drop down
var ibannertemp = pb.plugin.get('banner_select_profile_repack').settings.banners_to_use

var ibannertemp2 = new Array()

if(ibannertemp[0]==undefined){console.log('No Banners in Manage Section');}

else{

ibannertemp2 = ["Select Banner",ibannertemp[0].image]//["Select Banner", "DEFAULT BANNER URL"],



for(a=1; a<ibannertemp.length; a++)

{ibannertemp2[a]=[ibannertemp[a].name,ibannertemp[a].image] }

var iBanners = ibannertemp2



if(document.getElementsByTagName("img").item(0).src == theBlank){

   document.getElementsByTagName("img").item(0).id = "banselect";

}

}

This is the modified portion. The ibannertemp was actually supposed to be settings and I added an error message if no banners were under the manage plugin section. 
if(document.getElementsByTagName("img").item(0).src == theBlank){

document.getElementsByTagName("img").item(0).id = "banselect";

}

Now your part is to modify what's in red so that it targets and changes the source of the proboards banner to theBlank and the id
I would suggest doing this with jquery

[P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓]

p.s. Always read the console when you don't understand what's going on

[Lynx]

P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ - I sent you a PM.

hellsblizzz - I'm trying to get the bugs worked out. Hopefully soon. Sorry for the wait.

[hellsblizzz]

Dont worry about me , i am already glad you guys are doing this. Cant wait for the result.

[Lynx]

hellsblizzz,

You can track the progress in this thread. That's where I'll update the progression. Feel free to post here, though, if you've got any questions.

[Lynx]

hellsblizzz,

It's done! Support thread and Download here.

To any Moderator: Please mark this as Completed. Thank you.