mtgify

mtgify is a tool for quickly and easily displaying Magic cards on the web.

Just add two lines of code to your website, and any word that matches with the english name of a Magic card will be automatically converted into a link to that card on Gatherer or the MTG search engine of your choice. mtgify also adds a handy image popup that appears if you hover over the card name, commonly known as an "autocard". There are also simple tools to inlining card images just by referring to the name, or doing your autocards manually.

Alternatively, let's say you don't have a website of your own but find yourself reading a lot about Magic on the web. Do you have a Magic blog you like but wish it had autocard funtionality? mtgify can also be applied in your browser to any website you visit.

Check out the examples below!

Set how the links should work

Cards link to:

Image source:

Test it out! Try hovering your mouse over the card name below:

Example:

Try a different card:

Save it as a bookmark

Drag this button into your bookmarks toolbar:

That's it! Then go to any page and click the bookmark. For example, this tournament decklist

Nervous about running some random code in your browser? You can check the source yourself on GitHub

Import these two files at the top of your HTML document

The stylesheet is not necessary, but recommended. Think of it as a starting point.
You are more than welcome to overwrite any and all styles in your own CSS file.

Create a card link with a hover image

Once Upon a Time

Create a card link with a custom name

Delver

Create an inline card image

Sharktocrab

NOTE: Decklists are still in beta, more documentation + features forthcoming

Create a decklist

Create a decklist with an image preview on the side

Here's the same code with a longer decklist

Create a decklist with inline images + quantities

AutoTagging

AutoTagging starts with an HTML element (document.body or otherwise specified) and recursively tags all child elements
AutoTagging ignores HTML elements that start with auto-card
AutoTagging ignores HTML elements with the attribute auto-card-off

Set configuration for the page by defining MTGIFY_CONFIG before the script tag

These are the settings and their default values

You can use many of the settings as attributes on any of the card tags

Path to Exile

autocard.js defines the global variable MTGIFY which defines a handful of useful functions

developed by @mpaulweeks

Code last updated 2020-01-12 view source

Card data last updated loading...

Using MTG JSON v loading... view changelog

The information presented on this site about Magic: The Gathering, both literal and graphical, is copyrighted by Wizards of the Coast.
This website is not produced, endorsed, supported, or affiliated with Wizards of the Coast.

This site is not affiliated with any of the sites it links to:

If you would like your site to be added or removed, please DM me on Twitter.