Use thread metadata to give thread "thumbnail"

[Nathan Lecompte]

I've installed the Official ProBoards Thread Meta Data plug-in and want to use it to give each thread (in the specific category) a thumbnail which would be displayed instead of the post title. I've managed to get most of it working, except setting the background image of the specific div in the thread. I can't seem to GET the meta data of the thread to set the background image. The id of the meta data is "thread_meta_projectthumb" and the div which displays the background is "proj_head".

This is what I'm using to set the background image:

<script>
   var bimg = $(".thread_meta_projectthumb").text();
   var bimg_n = bimg.substring(bimg.indexOf(':') +1);
   $('#proj_head').css({'background':'url("'+bimg_n+'")'});
</script>
The meta tag displays the value in the thread in the thread list (along with the tag "Project Name:", which is why my code only gets the value after the ":"). This value is displayed as plain text in a div with an id "thread_meta_projectthumb". My code tries to get the text from the div, however, this code is run on the thread page; but the thread doesn't seem to have the div, which is needed to set the background.

Is there a way I can get the thread meta data?

[Chris]

Jul 17, 2015 22:13:21 GMT -8 Nathan Lecompte said:

I've installed the Official ProBoards Thread Meta Data plug-in and want to use it to give each thread (in the specific category) a thumbnail which would be displayed instead of the post title. I've managed to get most of it working, except setting the background image of the specific div in the thread. I can't seem to GET the meta data of the thread to set the background image. The id of the meta data is "thread_meta_projectthumb" and the div which displays the background is "proj_head".

This is what I'm using to set the background image:

<script>
   var bimg = $(".thread_meta_projectthumb").text();
   var bimg_n = bimg.substring(bimg.indexOf(':') +1);
   $('#proj_head').css({'background':'url("'+bimg_n+'")'});
</script>
The meta tag displays the value in the thread in the thread list (along with the tag "Project Name:", which is why my code only gets the value after the ":"). This value is displayed as plain text in a div with an id "thread_meta_projectthumb". My code tries to get the text from the div, however, this code is run on the thread page; but the thread doesn't seem to have the div, which is needed to set the background.

Is there a way I can get the thread meta data?

It took awhile before it dawned on me that you were asking about accessing the data while in post viewing mode (as opposed to viewing a list of threads in a board or as search result). The key data is still there when viewing the actual posts in a thread but the plugin only writes to the page in thread list view so if you do it this way:



<script>
$(function () {
//grab the page info
var thread_id = proboards.dataHash.page//.thread.id;
//grab the metadata key
var metadata = proboards.plugin.key("thread_meta");
//if thread data exists in page data then we're on a page that is a thread (not search results)
if(thread_id && thread_id.thread && (thread_id = thread_id.thread.id)){
//see if the key exists and that data exists for the page thread within that key
if(metadata && ( metadata = metadata.get(thread_id))){
/* NOTE: using name/value pairs CSS format since Chrome appears to be having problems
applying the space-separated shorthand format for whatever reason
*/
$('#proj_head').css({
'background-color': 'tranparent',
'background-image': 'url("' + metadata.thread_meta_projectthumb + '")',
'background-repeat': 'no-repeat',
'background-attachment': 'scroll',
'background-position': 'left',
'background-size': 'cover'
});
}
}
});
</script>





On a side note, using background: url("") is why that page is taking much longer than usual to finish loading, if you do not want or wish to negate an existing background image use background-image: none; instead. Specifying an empty url like that causes the browser to download the entire page TWICE since it interprets that as background: url('http://techviewhd.freeforums.net/thread/238/test123-ignore') for that page. This has also been one of the causes for the "token forgery" error in the past (since the page is loading twice thus getting two different tokens) although I'm unsure if that particular bug was fixed.

[Nathan Lecompte]

Chris Thank you so much! I'll take your advice