Developing a custom thread cell bg code

[Boy_Wonder]

Okay as I figure it might be good for me to try and learn more code I'm asking for help here.

I know already its a code that's going to need a thread key. I know how I need it to work and I'm going to break it into front end back end because that's the closest I can work it out.

Front end

User inputs a url into a field under subject on new thread screen
 - How would I be able to do this and I'm assuming it would be a route check thing to make sure that the person is on the new thread page not replying (I believe a new thread has a slightly different url)

Insert post as normal hit post - the url would be sent to a key linked to that thread id 

When user browses thread list on that board each thread would have a different background on it making an 'image grid' type layout.

Currently managing to do this by CSS but that is very clunky to do for each new thread posted

Back End

When a new thread is posted and the user is viewing the post list utilisation of an if/else statement to allow for a default image to show if none set. 

Storage of urls is in a key
- how do I do this and get the info back for when needed?

Currently got:

Currently managed to get a background image to write to .threadlist by jquery this will be the else part of the if/else statement. 

From understanding (which is limited) would need to write a way of it referencing the key to check for a url to add in before able to write the if/else statement to accurately reflect this.

I would prefer examples to be given - I'm better at looking at code and working out from the code how it works row by row then been given a wall of text about the theory (And I would need it to be slow because I'm not a strong coder natively in anything other then html and css)

[Boy_Wonder]

All right posting an update here as I think I've got the hang of quite a bit of it I'm just stuck on a few last things


$(document).ready(function(){

 if(window.location.href.indexOf("thread/new") >= 0) {

   

     $( ".subject_line" ).append( "<br /><b>Thread Image URL:</b> " );

     $(".subject_line").append("<input type='text' name='threadbgurl' id='threadbgurl' height='30px' width='400px'> <br />");

     $(".subject_line").append("<i> Please input a url to an image that should be 230px wide and 270px tall</i>");

 }

   

$(".threadlist").css('background-image', 'url("http://storage.proboards.com/5781167/i/JCOdM8BfXCwxDeNqTYtV.png")');

});
(Edit - code update found a shorter way to do the input)

There's my code so far I've managed to do the following:

Add a new text field for the thread url to the subject line. Get a default background image to work by referencing the threadlist css. So now I could really do with someone able to sit and help me (or at least explain with examples) how to get the input in the new text area ((I'm guessing I'll need to give it a name)) to a key (That I've already got set up) and how to then get the information from the key so that if a thread has a threadlist background image it provides that or else reverts to the default option.

[Todge]

First up, you can append complete cells instead of adding in the HTML with separate functions, like this..


$(document).ready(function(){
    if(window.location.href.indexOf("thread/new") >= 0) {

        $( ".subject_line" ).append( "<b>Thread Image URL:</b> <i> Please input a url to an image that should be 230px wide and 270px tall<br />" );
        $(".subject_line").append($('<textarea></textarea>').attr({rows:'1', cols:'75', id:'threadlist_image'}));
    }

    $(".threadlist").css('background-image', 'url("http://storage.proboards.com/5781167/i/JCOdM8BfXCwxDeNqTYtV.png")');
});

Note I gave the textarea an ID of threadlist_image

To retrieve the content of that textarea you can simply use $('#threadlist_image').val();

[Boy_Wonder]

ty Todge - actually updated it to use an input field set as text - would it still be the same

[Todge]

Yup, just give the input an ID and grab it's value in exactly the same way.

[Boy_Wonder]

Thank you - okay can you check I've got this right while I try and work out how to set the key, store information in it for each thread and stuff so that if the text area is longer then '0 characters' it will deal with key stuff - which is what I'm really stuck on right now @_@ how to use the keys. (Currently got it commented out until I've worked that part out)


$(document).ready(function(){
 if(window.location.href.indexOf("thread/new") >= 0) {
   
     $( ".subject_line" ).append( "<br /><b>Thread Image URL:</b> " );
     $(".subject_line").append("<input type='text' name='threadbgurl' id='threadlist_image' height='30px' width='400px'> <br />");
     $(".subject_line").append("<i> Please input a url to an image that should be 230px wide and 270px tall</i>");
     /*if ($('#threadlist_image').val(); > 0) {
        //do something
     }
     
 */
 }
   
$(".threadlist").css('background-image', 'url("http://storage.proboards.com/5781167/i/JCOdM8BfXCwxDeNqTYtV.png")');
});


Okay I've sorta worked out I'll be using a foreach (or .each() ) to check each thread id against key data (that I'm still trying to work out how to set. So I hope no one minds me using this as a bit of a notepad even if I'm not sure on how to write it in code. I know that I'll likely be using an each key, and I -think- it'd be something like

(#thread.id).each() {
if (data stored on key for that thread id) {
$(".threadlist").css('background-image', 'url("url from key here")');
}
else{
$(".threadlist").css('background-image', 'url("http://storage.proboards.com/5781167/i/JCOdM8BfXCwxDeNqTYtV.png")');
}
}


Not sure how accurate that code is mind but that's the closest I can muddle out and make sense (and I'm open to people explaining it better).

Could anyone who's used keys help me grasp how to do the key related stuff please?

[Boy_Wonder]

Okay I'm back again, I've hunted all over because I did find a useful thread which I now can't find (Sadface because it made some sense to me!) that gave me an example of how to do some things with plugin keys including the syntax but okay I'm going to write out exactly what I need help with, what I know I need to do but can't work out 'how' if that makes sense. Nm I found it now.


<script>
pb.plugin.key('example_thread_key').set_on('thread_new', 'Hello world');
</script>

So that I know I'd need to change the 'example_thread_key' to the name of the key, and I believe it would need to be setting data at that point, however the data I'd want to be set would come from storing whatever was input into #threadlist_image input area.

I'd also want each new thread to append the data to it.

Then during the each statement (that I'm not sure if it would work right as I don't know how I can tell it to look through each thread-id without knowing if I can use a wildcard to check each class in the format of thread-* for example) I'd want it to be checking through the data stored on the key and putting it in place of where in the above mocked up code in my last post it just says url from key here

[Todge]

OK, let's go through what you have so far.. Everything will work up until this part..


$('#threadlist_image').val(); > 0

to get/check the length of the input value you need to tell it which one and specify that you want to check it's length..


$('#threadlist_image').val().get(0).length > 0

The each() function will expect to execute a function of it's own, so..


(#thread.id).each() {
if (data stored on key for that thread id) {
$(".threadlist").css('background-image', 'url("url from key here")');
}
else{
$(".threadlist").css('background-image', 'url("http://storage.proboards.com/5781167/i/JCOdM8BfXCwxDeNqTYtV.png")');
}
}

will also fail, instead, simply wrap the code in the each() function within a function..


$('#thread.id').each(){function(){
       if (data stored on key for that thread id) {
           $(".threadlist").css('background-image', 'url("url from key here")');
       }
       else{
           $(".threadlist").css('background-image', 'url("http://storage.proboards.com/5781167/i/JCOdM8BfXCwxDeNqTYtV.png")');
       }
   });
}

[Boy_Wonder]

Thanks for that todge - Would you be able to tell me if that's the correct way of telling it to check each thread id btw? As I was just stealing things from the proboards templating system to try and illustrate in a way that I was more familiar with

[Todge]

There are a couple of ways of getting the thread ID number, the old fashioned way, by looking at the current page's address, for example, the URL of this page is:-

support.proboards.com/thread/508056/developing-custom-thread-cell-code

with the ID number highlighted in red..

Or you can grab it with..


var threadID = proboards.data('route').params.thread_id;


As for searching through the key for the correct information, that is not necessary, each thread has it's own thread-key, so all you have to do is grab the info from the correct key..


var keyData = pb.plugin.key('example_thread_key').get(threadID);

[Boy_Wonder]

Ooh thanks for that todge - pretty much I'm using the thread id so it can find it on the thread list and link it in (I think I'd be able to use a thread key for that wouldn't I?)

Would you be able to explain how to store the data into the thread key that's been input front end by the user?

[Todge]

Yup, a thread key is ideal for what you are wanting to do.

To store the data use exactly what you posted above..


pb.plugin.key('example_thread_key').set_on('thread_new', 'Hello world');
Except you'd obviously not want to write 'Hello World' to the key, so simply replace that with with the value of your input.

You can do that directly with..


pb.plugin.key('example_thread_key').set_on('thread_new', $('#threadlist_image').val());


[Boy_Wonder]

Thank you ^_^

Then to recall the appropriate image would I need to use the each loop or just an if statement?

Edit to add the code so far:


$(document).ready(function(){

 if(window.location.href.indexOf("thread/new") >= 0) {

   

     $( ".subject_line" ).append( "<br /><b>Thread Image URL:</b> " );

     $(".subject_line").append("<input type='text' name='threadbgurl' id='threadlist_image' height='30px' width='400px'> <br />");

     $(".subject_line").append("<i> Please input a url to an image that should be 230px wide and 270px tall</i>");

     if ($('#threadlist_image').val().get(0).length > 0) {

         //do something

     pb.plugin.key('threadbg_FS').set_on('thread_new', $('#threadlist_image').val());



     }

     

 

 }

   var threadID = proboards.data('route').params.thread_id;

 

$('+ threadID + ').each(){function(){

   var keyData = pb.plugin.key('threadbg_FS').get(threadID);



       if ( ' + keyData + ') {

         //  $(".threadlist").css('background-image', 'url("url from key here")');

      // }

      // else{

           $(".threadlist").css('background-image', 'url("http://storage.proboards.com/5781167/i/JCOdM8BfXCwxDeNqTYtV.png")');

       }

   });

}

[Todge]

You should wrap the last part in an if statement to ensure it only runs on the thread listing page..

if(proboards.data('route).name == 'board')
{

}

Then grab each <tr> cell with an id of 'thread-##', and run your code using the each() function.

$('tr[id*="thread-"]').each(function(){

code here..

});

As this part will be running on the thread listing page, you cannot grab
the thread ID in the way mentioned earlier, as you're not in any
specific thread, but the thread numbers are part of the cell IDs you are
targeting...
You can then get the thread ID from the <tr> cell's ID with this..

var threadID = $(this).attr('id').split('thread-')[1];

[Boy_Wonder]

Thank you

Editing: As I keep the thread ids in a div would the tr be changed to div?