[SOLVED (againx2)] - BBcode to link to images as mouse over?

[anewhobby]

Hi there.

I am looking for a simple (or so it would seam) mod..... I am willing to pay a reasonable fee... It is a non-profit for fun site so if you ask to much I will just say no.. but I am willing to entertain any fair offer.

Description

I run a small site for collector card games. We are looking for a mod that can be used to easy posting and reading of Cards. The idea is this...

to have a BBcode like this when posting a thread
blah blah [c]card name[/c] blah blah

then the card in the thread appears as "blah blah card name blah blah". The idea though is that the image of the card is a MOUSE OVER. So when Mouse Over the bold text you in fact see a pop up of the image associated with it...

There are heaps of cards as well. I have scans of them all.

Any help on this mod would be awesome or even if you know any kind of thing I could use instead... so far we have just been using url links to the cards, but a lot of users do not bother using them. I tried using smiles but as you know that posts in the post the entire image of the card.. making the threads increasingly heavy.

Option 2 Description

If this is to hard maybe I could use Aliases.. . as in when ever a user types in certain text, smf will automatically replace it with other text... so the user types...

blah blah card name blah blah

and SMF replaces card name with.... blah blah card name blah blah

or something like that.. again would be better if instead of linking it is a pop up like I described above.

Permissions

No real permissions... anyuser can use the bbcode and see the images. But I would need something in the admin panel to set it all up. Though I would be happy even if I needed to manually edit a file instead of having a interactive admin thing for adding cards.

Feature Set

um.. sorry but I answered that in the description area... If you need more info.. please respond in here or PM me.



Anyway.. thanks for reading.. please get back to me as soon as possible
Cheers

[Arantor]

http://custom.simplemachines.org/mods/index.php?mod=2227 will already do some of that for you if not everything.

[anewhobby]

yea that is pretty close.. but it also puts the images themselves in the post... can it also be used to only show the text, and "expando" the image on mouse over....

Also how easy is it to use... we need a auto replace thing like i mentioned or a simple bbcode like [c]card name[/c] otherwise no one will ever use it (if for example they have to type some long massive line of code as well as finding and copy/pasting the url to the image into the thread)

[Arantor]

You could ask the author about modifying it to do that.

I believe the code is simply [expando]img link[/expando] - but there's a button on the page, they just have to click then paste.

[anewhobby]

yea, so the poster need to know the urls for every card as well.... . . .

[Arantor]

Hmm, so it's a lot more than just the mouseover of images.

The real problem with doing this is that it would have to have a database of every card in the game you're working on. Speaking as someone who once started to write a site around that, it's a huge amount of effort to go and set up. I seem to recall getting about 30% of the way through the Magic: The Gathering card list before circumstances (like a hard drive failure) ended the project, after several months of time spent.

[anewhobby]

I imagine it would work exactly like the smiles work.... except as a mouse over and displaying the text. I see no real problems in setting it up... especially if you can upload "packs" like you can with smilies...

[Arantor]

Ah, so you want someone to build you an admin system so you can go add it all yourself?

It is going to be a lot of work to create but more than doable.

[anewhobby]

well i do not mind as long as it works. I would be happy to edit a file manually instead of using some kind of fancy admin thing... I am sure if anyone wishes to attempt this mod will have a better idea on how to make it work than I would....

But as I see it... you would need a database of all the card names, witch also contains the associated image file.

Then you would need some kind of bbcode that looks in the database of card names and loads the appropriate image.. with could be simply loaded though a javascript or something... like that warcraft wowhead mod that a lot of sites use for itemstats.

[Arantor]

That's exactly the problem: you need that database. Using MTG as an example, there are well over 10,000 unique cards in the MTG set now. The count numbers into the thousands for others too.

Then you have to have that many images too, which is not a small amount of storage (even assuming 20K per card image, which is pretty small, 200,000K = 200 MB)

Building the mod isn't that hard. Building the database of card names and assembling all the images is a huge investment of time. I spent a long enough period of time just pulling semi-automated dumps from Gatherer, and still only got a fraction through the set.

[Liam.]

Reading through yours and Arantors discussion, I get a wide picture of this (and I myself ran a card forum (for YuGiOh) for a while), and think I could have a go at doing this. What is your budget?

[anewhobby]

Reading through yours and Arantors discussion, I get a wide picture of this (and I myself ran a card forum (for YuGiOh) for a while), and think I could have a go at doing this. What is your budget?

I would prefer to discuss costs privately with you in a PM or email.... but like I said this is a "for fun" site... I will pay anything fair.. but I am not a rich man. Even if I pay for it I would like the mod released publicly to the SMF community.

[Liam.]

Coming back to this, what card game are you doing it for (yes, I've started work on this mod).

[anewhobby]

Call of Cthulhu The Living Card Game...  and to a lesser extent Call of Cthulhu The Collector's Card Game....

You can get a list of the card images here - http://dl.free.fr/rXPtTDCpi

and I can get you XML lists of the cards.. as the game is only a year old there isn't billions of cards out yet... but if you get the mod working .. I can fill in all the card and link information.. and that I prob should as they released new cards regularly

<----- EDIT

I do not think it will be to hard to do.. you do not need database acess or any of that I am sure it can all be done with a simple BBcode...

Basically there are tonst of free javascript code we could use and put in the header to make the mouse over thing work. Then the BBcode is used to call that javascript, use the user inputs to define a variable, and add that variable to a hardcoded URL?

I imagine all i need to do is take the card name the user puts in to the bbcode and use that to load the image...

So...

These are some examples of the cards.

Bag Man	Dagon	Servant of Noderis

So all the images are stored in /cards/card name.jpg

So all the bbcode needs to do is call the javascript in the header and place "card name" in the hardcodes line with would read something like this /cards/%variable.jpg

Dose that make any sense?

<------ edit

Here is a simple javascript that dose the job - http://www.dynamicdrive.com/dynamicindex4/imagetooltip.htm

This script dose not work for my needs ... but it is close.. as this one has a hardcoded array as well as some weird text area no need... Still I mean you would know better.. but if it can somhow use the name form the bbcode input form the user (card name) to plug that into the script.. . I still think this could work?

[anewhobby]

Where can I find some information on writing my own bbcodes?

[Liam.]

Ahh, I get it, and the XML List may come in useful, so if you can upload that please

[Arantor]

There are no guides on it that I know of, but it's pretty straightforward.

Just need three questions answered before I can help you:
1. What should it do? It might need some tricky footwork in how the bbcode parser works.
2. Does it add a button into the editor?
2a. If so, what version of SMF are you targetting? The method is different between 1.1.10, 2.0 RC1.2 and 2.0 RC2 (as I found )

[Arantor]

Actually some level of DB access WILL be required to store all the cards, because loading an XML file per card... BAD idea on so many levels.

[anewhobby]

1) It just need to call a javascript I have added to the header.... and bold the text.
2) No

Basically I prefer to use SMF but i may have to move to phpbb3

Here is what I want the BBcode to do

http://www.phpbb.com/community/viewtopic.php?f=72&t=1854805#p11212005

and here is how to do it in phpbb3

http://www.phpbb.com/community/viewtopic.php?f=72&t=1854805#p11214365

[anewhobby]

I got someone on the phpbb3 fourms to work out a method for doing this for me.....

http://www.phpbb.com/community/viewtopic.php?f=72&t=1854805#p11214365

If someone can adapt this for smf2.. then that would be awesome!!

[Arantor]

You didn't need to make another thread for this.

Merging with your original thread before I answer.

EDIT: Merged.


Right, this does seem to be a little bit different to what you originally requested.

Also, unlike phpBB, it's not quite as simple as dropping that JS file into the forum. Some themes and mods already rely on it.

That said, let's see what we can do. NOT TESTED.

First up, adding the JS. Put the JS file it refers to (any recent jQuery should do) into your theme's scripts/ folder.

Look in your theme's index.template.php file, and look for the entry with <script> already there.

Before that, add:

Code Select Expand

<script src="', $settings['theme_url'], '/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
this.screenshotPreview = function(){   
   /* CONFIG */
     
      xOffset = 10;
      yOffset = 30;
     
      // these 2 variable determine popup\'s distance from the cursor
      // you might want to adjust to get the right result
     
   /* END CONFIG */
   $("a.screenshot").hover(function(e){
      this.t = this.title;
      this.title = "";   
      var c = (this.t != "") ? "<br/>" + this.t : "";
      $("body").append("<p id=\'screenshot\'><img src=\'', $settings['theme_url'], '/cards/"+ this.rel +"' alt=\'image preview\' />"+ c +"</p>");                         
      $("#screenshot")
         .css("top",(e.pageY - xOffset) + "px")
         .css("left",(e.pageX + yOffset) + "px")
         .fadeIn("fast");                 
    },
   function(){
      this.title = this.t;   
      $("#screenshot").remove();
    });   
   $("a.screenshot").mousemove(function(e){
      $("#screenshot")
         .css("top",(e.pageY - xOffset) + "px")
         .css("left",(e.pageX + yOffset) + "px");
   });         
};


// starting the script on page load
$(document).ready(function(){
   screenshotPreview();
});
</script>
<style>

#screenshot{
   position:absolute;
   display:none;
   }

</style>

You will also have to put the cards/ directory will all the images in it into your theme's directory.

Then in Subs.php, find:

Code Select Expand

array(
'tag' => 'code',

Immediately before that add:

Code Select Expand

array(
'tag' => 'c',
'type' => 'unparsed_content',
'before' => '<a class="screenshot" rel="$1.jpg">',
'after' => '</a>',
'test' => '([a-zA-Z0-9\'\ \-]+)\]',
'block_level' => false,
),

[anewhobby]

Do you wish me to put the "cards" dir in the root of the themes dir or place it in the images of the current default theme?

[Arantor]

Themes/themedir/cards should contain all the images.

[anewhobby]

Ok... I can not get it to work.... here is what i did... I am doing a test on a fresh install of SMF 2.0 RC2

1) made a dir in sit.url.com/themes/default so it is sit.url.com/themes/default/cards
2) From themes/default I downloaded the index.template.php file and editied it.... there was NO <script> in it anywhere so I just put the script stuff you posted in the very top of the file.
3) I downloaded from site.url/sources subs.php .. there was TWO places that had the code you asked me to look for... I placed the code you gave me above the first instance of it.
4) I went and downloaded the jquery.js from the site.... it came down as jquery-1.3.2.min.js
5) I renamed it to jquery.js and placed it in sit.url.com/themes/default/scripts
6) i went into admin and cleared the cache.

The pages load fine with no errors.. but when i use the [c]card name[/c] nothing happens.

Have I done everything correctly?

[Arantor]

No, there's only one edit to be made in Subs.php.

As for Themes/default/index.template.php, there are several instances of <script>. If you can attach the files you have I'll take a look.

[anewhobby]

Um... here is the index.template.php file and unless I am mistaken there is NO <script> anywhere in it.

Also here is the unedited subs.php from the source dir and as you can see unless i am mistaken there are two places with that have 'tag' => 'code', in it.. one at line 1049 the other at line 1093

Thanks for all your help btw.

[Arantor]

Yes, there are two places, which I forgot, and which is ultimately why [c] doesn't do anything - you haven't told the bbcode parser there's a new tag. Should be added after the first one.

As for the index.template.php edit, find:

Code Select Expand

<script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/script.js?rc2"></script> and add it directly above that.

[anewhobby]

Yes, there are two places, which I forgot, and which is ultimately why [c] doesn't do anything - you haven't told the bbcode parser there's a new tag. Should be added after the first one.

As for the index.template.php edit, find:

Code Select Expand

<script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/script.js?rc2"></script> and add it directly above that.

Ok so search index.template.php for the code above and paste in the javascrip thing you said in your 1st post....

and in subs... just paste in the code above the first instance of tag' => 'code', ?

Is that correct?

[Arantor]

Yes, that should be correct.

[anewhobby]

hmmm still not working mate thanks for you time.. but if you can help a bit more would be great....

here is the edited file for index.template.php

but i get this error message...

[Arantor]

Argh, I screwed up the edit.

It should have been:

Code Select Expand

<script src="', $settings['theme_url'], '/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
this.screenshotPreview = function(){   
   /* CONFIG */
     
      xOffset = 10;
      yOffset = 30;
     
      // these 2 variable determine popup\'s distance from the cursor
      // you might want to adjust to get the right result
     
   /* END CONFIG */
   $("a.screenshot").hover(function(e){
      this.t = this.title;
      this.title = "";   
      var c = (this.t != "") ? "<br/>" + this.t : "";
      $("body").append("<p id=\'screenshot\'><img src=\'', $settings['theme_url'], '/cards/"+ this.rel +"\' alt=\'image preview\' />"+ c +"</p>");                         
      $("#screenshot")
         .css("top",(e.pageY - xOffset) + "px")
         .css("left",(e.pageX + yOffset) + "px")
         .fadeIn("fast");                 
    },
   function(){
      this.title = this.t;   
      $("#screenshot").remove();
    });   
   $("a.screenshot").mousemove(function(e){
      $("#screenshot")
         .css("top",(e.pageY - xOffset) + "px")
         .css("left",(e.pageX + yOffset) + "px");
   });         
};


// starting the script on page load
$(document).ready(function(){
   screenshotPreview();
});
</script>
<style>

#screenshot{
   position:absolute;
   display:none;
   }

</style>

Should have been a \ before the ' of image preview.

[anewhobby]

Thank you again.. ok the pages loads fine now .. but i still get nothing happening with the bbcode ... just apears as text on the thread.... i have attached the subs.php file as you asked...

I edited Subs.php in the site.url/source dir..... and placed you edit above the 1st iteration of that code you asked me to search for,...

Test Thread

(Again thanks for you time.. i really appreciate it)

[Arantor]

What code are you trying to test it with?

[anewhobby]

.... code?

I am just typing [c]Dagon[/c] the card name is Dagon and the image file in the cards dir is called Dagon.jpg

I used the code

Code Select Expand

array(
'tag' => 'c',
'type' => 'unparsed_content',
'before' => '<a class="screenshot" rel="$1.jpg">',
'after' => '</a>',
'test' => '([a-zA-Z0-9\'\ \-]+)\]',
'block_level' => false,
),
placed in the subs.php file in the /source dir off the root ... I placed the code after the first search hit for 'tag' => 'code', @ line 1057

Looks like everything is working.. apart form the BBcode..... if we can just get that working it would be great.. I did a test using the HTML tag to manually insert the code..

example:- http://cocdeckbase.com/index.php?topic=15.msg23#msg23

Code used for card Dagon

Code Select Expand

<strong><span style="color: blue;" class="bbc_color"><a class="screenshot" rel="Dagon.jpg">Dagon</a></span></strong>

So yea the bbcode just needs to make that line using the tag [c]Dagon[/c].. if we can get a blue underline as well would be 100% perfect

[anewhobby]

SOLVED

I think i have it all worked out... by just randomly (with out knowing what i was doing) copy and pasting from other BBcodes in the subs.php file I have got it to work...

The code I did was fixed by Arantor for security reasons

The BBcode is this....

Code Select Expand

array(
'tag' => 'c',
'type' => 'unparsed_content',
'content' => '<strong><span style="color: blue;" class="bbc_color"><a class="screenshot" rel="$1.jpg">$1</a></span></strong>',
                                                 // !!! Should this respect guest_hideContacts?
'validate' => create_function('&$tag, &$data, $disabled', '$data = preg_replace("/[^a-zA-Z0-9\'\ \-]/", "", $data);'),
),

Thanks for the help guys... i really appreciate it.........

Making a text item that you can hover the mouse over to load a image popup

• Go to http://jquery.com/ and download the jquery javascript.. by clicking on the big DOWNLOAD button.
• rename the download to jquery.js
• upload the script into root/themes/{your_theme}/
• Create a dir called cards and place it in root/themes/{your_theme}/
  

Open:- /themes/{yourtheme}/index.template.php

FIND

Code Select Expand

<script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/script.js?rc2"></script>

Add BEFORE

Code Select Expand

<script src="', $settings['theme_url'], '/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
this.screenshotPreview = function(){   
   /* CONFIG */
     
      xOffset = 10;
      yOffset = 30;
     
      // these 2 variable determine popup\'s distance from the cursor
      // you might want to adjust to get the right result
     
   /* END CONFIG */
   $("a.screenshot").hover(function(e){
      this.t = this.title;
      this.title = "";   
      var c = (this.t != "") ? "<br/>" + this.t : "";
      $("body").append("<p id=\'screenshot\'><img src=\'', $settings['theme_url'], '/cards/"+ this.rel +"\' alt=\'image preview\' />"+ c +"</p>");                         
      $("#screenshot")
         .css("top",(e.pageY - xOffset) + "px")
         .css("left",(e.pageX + yOffset) + "px")
         .fadeIn("fast");                 
    },
   function(){
      this.title = this.t;   
      $("#screenshot").remove();
    });   
   $("a.screenshot").mousemove(function(e){
      $("#screenshot")
         .css("top",(e.pageY - xOffset) + "px")
         .css("left",(e.pageX + yOffset) + "px");
   });         
};


// starting the script on page load
$(document).ready(function(){
   screenshotPreview();
});
</script>
<style>

#screenshot{
   position:absolute;
   display:none;
   }

</style>

----------------------------------------------------------------------------------------------------------------------

Open:- root/Source/Subs.php

FIND 1ST OCCURRENCE OF

Code Select Expand

'tag' => 'code',

Add BEFORE

Code Select Expand

array(
'tag' => 'c',
'type' => 'unparsed_content',
'content' => '<strong><span style="color: blue;" class="bbc_color"><a class="screenshot" rel="$1.jpg">$1</a></span></strong>',
                                                 // !!! Should this respect guest_hideContacts?
'validate' => create_function('&$tag, &$data, $disabled', '$data = preg_replace("/[^a-zA-Z0-9\'\ \-]/", "", $data);'),
),

-------------------------------------------------------------------------------------------------------------------

NOTES:-

You can change the name of the cards dir if you like by changing the word cards in the index.template.php.. just edit this line

Code Select Expand

$("body").append("<p id=\'screenshot\'><img src=\'', $settings['theme_url'], '/cards/"+ this.rel +"\' alt=\'image preview\' />"+ c +"</p>");

in the same file you can edit this bit of code to change the position

Code Select Expand

      xOffset = 10;
      yOffset = 30;

------------------------------------------------------------------------------------------------------------------------

Thanks to

• idiotnesia @ phpbb.com for putting me on the right track
• Arantor for intergeneration into SMF
• iKorp - for taking an interest
• http://jquery.com/ for the javascript

[/list]

[Arantor]

There is a very specific reason why I did not use the code you have. You now have a potential security hole because it's never checking what information is coming in. I can abuse that to insert whatever HTML I wanted, including iframes, Flash and more.

[anewhobby]

There is a very specific reason why I did not use the code you have. You now have a potential security hole because it's never checking what information is coming in. I can abuse that to insert whatever HTML I wanted, including iframes, Flash and more.

well that doesn't sound good... . ..

Code Select Expand

array(
'tag' => 'c',
'type' => 'unparsed_content',
'before' => '<a class="screenshot" rel="$1.jpg">',
'after' => '</a>',
'test' => '([a-zA-Z0-9\'\ \-]+)\]',
'block_level' => false,
), 

This is the code you originally gave me.. and it wasn't doing anything.. so .. how can I get this bit of code working then?

[Arantor]

Try this instead:

Code Select Expand

array(
'tag' => 'c',
'type' => 'unparsed_content',
'content' => '<a class="screenshot" rel="$1.jpg">$1</a>',
// !!! Should this respect guest_hideContacts?
'validate' => create_function('&$tag, &$data, $disabled', '$data = preg_replace("/[^a-zA-Z0-9\'\ \-]/", "", $data);'),
),

[anewhobby]

Thanks again Arantor... your new code works great.. I have adjusted the instruction post if anyone else wants to do this....

[Arantor]

Awesome to know it's all working

[anewhobby]

Oh.. I just ran into a small problem that you may now how to fix... it is not to big a deal... but if you use punctuation the variable breaks...

example - Victoria's Lost  appears as Victoria039s Loft in the post and is looking Victoria039s Loft.jpg

Is there a way to be able to use apostrophes in the card name title?

[Arantor]

Argh, I forgot apostrophes.

Code Select Expand

array(
'tag' => 'c',
'type' => 'unparsed_content',
'content' => '<a class="screenshot" rel="$1.jpg">$1</a>',
// !!! Should this respect guest_hideContacts?
'validate' => create_function('&$tag, &$data, $disabled', '$data = preg_replace("/[^a-zA-Z0-9\'\ \-]/", "", str_replace("'", "\'", $data));'),
),

[anewhobby]

thank you... but....

Parse error: syntax error, unexpected T_CONSTANT_ENCAPSED_STRING in /home/x/x/x/x/x/xx/xx/Sources/Subs.php on line 1053

When you try to refresh the page (

(just put x's to hide absolute url

[Arantor]

ARGH BUG IN SMF.

str_replace("'", "\'", $data

The ' in the first pair of quotes is NOT an '.

It should have been the following without the spaces:

Code Select Expand

& # 3 9 ;

[anewhobby]

I am sorry i do not understand your answer....  thanks for helping as always though.. but if you have time to restate that ... ?

[Arantor]

There's a bug in SMF.

In the code I gave you, it states str_replace("'", "\'", $data)

After that bracket you see two quotes containing an apostrophe. It shouldn't be an apostrophe. It should be & # 3 9 ; instead, but I can't give you the text exactly because it gets converted to an apostrophe, so you have to turn it into:

Code Select Expand

array(
'tag' => 'c',
'type' => 'unparsed_content',
'content' => '<a class="screenshot" rel="$1.jpg">$1</a>',
// !!! Should this respect guest_hideContacts?
'validate' => create_function('&$tag, &$data, $disabled', '$data = preg_replace("/[^a-zA-Z0-9\'\ \-]/", "", str_replace("& # 0 3 9 ;", "\'", $data));'),
),

You just have to take the spaces out.

[anewhobby]

ahhh.. great... thanks... but still one more problem lol.. sorry this is just dragging on isn't it...

anyway... now that you have corrected me on that the apostrophes are showing up in teh text of the post.. but the image link is broken.. I assume from the same problem as with the bbcode... but something needs to be changed in the javascript code at the top?

If it displays fine in the forum I can name the cards on the server to match the botched javascript call if this can nto be fixed... (assume I cna find out what the boatch file name it is asking for is)

<---- EDIT

Fix for Apostrophes

In Line of javascript code

Code Select Expand

$("body").append("<p id=\'screenshot\'><img src=\'', $settings['theme_url'], '/cards/"+ this.rel +"\' alt=\'image preview\' />"+ c +"</p>");

Replace

Code Select Expand

"+ this.rel +"

With

Code Select Expand

"+ escape(this.rel) +"

[Arantor]

I'd actually gone to bed before seeing your later post, so I'd forgotten there would be a knock-on effect here.

Still, seems that a solution was found, and in the best way actually.

[anewhobby]

I sent a few bob to your paypal for your help

[Arantor]

I saw - many thanks to you for that, it is appreciated

Let me know if you need anything else for this, or any other tweaks.

[anewhobby]

man with any luck we are done with this heh heh... I mean.. a full card image mod would be awesome... with a database of  the cards and all that would be great but this works fine.

Now I just need to get a "rating system" set up so people can rate the decks people upload.

[Arantor]

Well, as I said I looked at doing something like that for MTG (including a deckbuilder application I had partly built, which was cool for tracking how many cards a user had), but it is an awesome amount of work.