Include MTG autocard popup in your website (even in Blogger)

If you want to include in your website a popup showing the card picture while passing mouse over a mtg link, this is your day.

mtg autocard sample

You only need to include these lines in your websites in order to trigger all links referring a concrete URL subdomain.

<script type="text/javascript">
     URL_START = "http://xxxx.com"; 
</script>    

<script src="https://sites.google.com/site/themunsonsapps/mtg/autocard.js" type="text/javascript">
  
</script>

Replace http://xxxx.com with the url that you want. For example, if all of your magic links are like this:

Goblin Lackey, you should replace http://xxxx.com with http://gatherer.wizards.com/Pages/Card/Details.aspx?name= and see:

<a href="http://gatherer.wizards.com/Pages/Card/Details.aspx?name=Goblin+Lackey" target="_blank">Goblin Lackey</a>

Goblin Lackey.

Tip: You can write URL_START = "http" to have all your links with popup. This is useful when you use several magic sources for your cards.

Another way to get the popup is with class styles. If you set the link address CSS style class to "mtgcard", you will get the pupup regardless the link destination, like in this case:

<a href="http://themunsonsapps.blogspot.com" class="mtgcard" target="_blank">Goblin Lackey</a>

Mox diamond

The last way to autocard is linking directly the card image that you want to use. Like this:

<a href="http://magiccards.info/scans/en/shm/222.jpg">Shusher</a>

Shusher

This will trigger if you include the script in this way (as before, replace the url with yours):

<script type="text/javascript">
     URL_START_IMG = "http://magiccards.info/scans"; 
</script>    

<script src="https://sites.google.com/site/themunsonsapps/mtg/autocard.js" type="text/javascript">
  
</script>

The params URL_START_IMG and URL_START are compatible, so you can include both if you want to have multiple choices, like in this blog or in magicnomola.

The code included in this blog is the code shown below:

<!-- MTG AUTOCARD BEGIN -->
<script type='text/javascript'>
  URL_START = "http://gatherer.wizards.com/Pages/Card/Details.aspx?name=";
  URL_START_IMG = "http://magiccards.info/scans/";
</script>

<script src='https://sites.google.com/site/themunsonsapps/mtg/autocard.js' type='text/javascript'/>
<!-- MTG AUTOCARD END -->

To include this feature in Blogger, you have two options to insert the script import:

• Dashboard -> Template -> Edit HTML and insert the lines before the </body> tag (search it with Ctrl+F)
• Dashboard -> Template -> Page elements -> add HTML/Javascript and insert the lines

If you use WordPress instead, you can have a look to this plugin WP MtG-Helper found at Distracted by squirrels.

If you prefer to host it, you can download it from https://sites.google.com/site/themunsonsapps/mtg.

UPDATED 19th October 2011: READ THIS FOR NON BLOGGER DOMAINS

Updated 14th January 2015: NON BLOGGER DOMAINS AND NEW CARDS

Try this other script for newer cards:

<!-- MTG AUTOCARD BEGIN -->
<script type='text/javascript'>
  URL_START = "http://gatherer.wizards.com/Pages/Card/Details.aspx?name=";
  URL_START_IMG = "http://magiccards.info/scans/";
</script>

<script src='https://sites.google.com/site/themunsonsapps/mtg/autocard_standalone_v2.js' type='text/javascript'/>
<!-- MTG AUTOCARD END -->

You can download a sample simple webpage here: https://sites.google.com/site/themunsonsapps/mtg/testsite.html?attredirects=0&d=1

Continue reading »

Blogging tips: Including source code in your website

If you're a blogger that want to write source code, maybe you have some problems to include it into your blog due to the tags, escape chars, the highlighting and more problems.

Two common and great solutions are SyntaxHighlighter and Code Prettifier. Both give your source code the syntax highlighting (depending on the selected language), line numbers, a well done layout and a lot of colors.
The only "problem" that I can find with those utils is that both are javascript and css files that you must download and load in the body of your webpage and host in your server (although SyntaxHighligther offers a hosting service). The problem of adding external CSS files to your website is that if you don't have access to the server, such as in Blogger, you maybe will need to do some dirty workarounds like pasting the full CSS into the template (see how to include SyntaxHighlighter to Blogger).

1.   // Source code SyntaxHighlighter like
2. private static long convertMilliSecondsToDaysViaMoreExplanatoryMagicNumbers(final long numberMilliseconds)  
3. {  
4.    // 60 seconds in minute, 60 minutes in hour, 24 hours in day, and  
5.    // one thousand milliseconds in a second  
6.    return numberMilliseconds / (60 * 60 * 24 * 1000);  
7. }  

This is wonderful if you write a lot of lines of code, but what if you need to write only a few number of code lines? What if you don't want an overloaded layout? Does it worth the effort to download the files, host them (there are several files) and copy the entire CSS into your blogger's layout?

HTML gives you the <pre/> and <code/> tags, but them really only escape and change the font. The solution that I've found in devcha is to change the <pre/> style to have a backgrounded piece of code. It doesn't have colored keywords, but it's more readable.

<pre style="background-color:#eeeeee; border-color:rgb(153, 153, 153); border-style:dashed; border-width:1px; margin:0px; overflow:auto; padding:5px; width:95%;">

YOUR CODE GOES HERE

</pre>

Of course, set the <pre/> attributes as you like. Remember, that if you're inserting this in Blogger, you should write it in the HTML edition mode.
Continue reading »