Kartenbild Popup für Magickarten

Ok, das hatte ich ja schon lange versprochen: Wie bekommt man auf der eigenen Magicseite ein Kartenbild angezeigt, wenn man über den Kartenlink fährt? Wie zum Beispiel bei diesem Shrine of Burning Rage hier. Da gibt es mehrere Möglichkeiten, wenn eure Seite bei einem fremden Anbieter ist (z.B. WordPress.com oder Blogger), dann gibt es ab heute neu für euch den Popup Generator für Magickarten!

Ihr fügt rechts den HTML Text eures Blogeintrags ein, markiert eine Karte nach der anderen und lasst ihr per Button ein Popup hinzufügen. Am Ende noch einmal(!) den Button unter dem Textfenster klicken, damit die nötigen Javascripte und CSS Angaben am Anfang eures Artikels eingefügt werden. Dann zurück damit in den ursprünglichen Artikeleditor und es kann veröffentlicht werden.

Wenn ihr eure Seite selbst hostet, dann könnt ihr auch diese Zeilen hier im <head> Element einfügen:

<script type=“text/javascript“ src=“http://www.magicblogs.de/ct.js“></script>
<style type=“text/css“>.a_linkpic dipla: none; poiion: aole; lef: ; op: .em; .a_linkpicIMG paddin: p; </style>

Dann müsst ihr nur noch die Karten mit Popups versehen und spart euch den Buttonklick unter dem Fenster. Natürlich könnt ihr das Javascript auch selbst hosten, verlinken auf meine Version ist aber kein Problem.

Die Blogger, die hier auf MagicBlogs.de schreiben brauchen den Umweg übrigens nicht, in eurem Artikeleditor könnt ihr auf die HTML Ansicht umschalten und dort Karten und Decks direkt verlinken lassen.

Ich hoffe demnächst noch eine ausführlichere Anleitung zu verfassen und das Popup erstellen für komplette Decks (die ihr z.B. aus MWS kopiert) zu ermöglichen, vielleicht auch schön visualisiert. Zwischenzeitlich könnt ihr die Seite ja gerne erstmal probieren und Fehler/Fragen hier melden. Habt Rücksicht, ich habe das heute nachmittag in 3-4 Stunden zusammengebaut. Zeromant, ich erwarte Feedback 😀

Leave a comment

15 Comments

  1. Was für ein überflüssiger Scheiß – wer braucht denn so was?

    Antworten
  2. Ach so – Du meintest wahrscheinlich ernst gemeintes Feedback…

    Also:

    1. Erst mal danke, dass Du Dich da rangesetzt hast!

    2. Ein grundlegendes Problem: Bei mir (WordPress.com, aktueller Firefox, Windows 7) wird kein Popup erzeugt, sondern ein Link (das dann natürlich auch nicht beim Mouseover aktiv wird, sondern nur durch anklicken). Noch ärgerlicher: Das Link wird im selben Fenster geöffnet – das ist dem Ziel, eine Kartenliste flüssiger lesbar zu machen, natürlich höchst abträglich! An einem Popup-Blocker von meiner Seite aus kann es eigentlich nicht liegen.

    2. Eine Merkwürdigkeit: Die einleitenden Zeilen „.a_linkpic dipla: none; poiion: aole; lef: ; op: .em; .a_linkpicIMG paddin: p; “ werden mir als Normaltetx angezeigt, und wenn ich sie lösche… sind sie einfach nur weg, ohne negative Konsequenzen. Stimmt mit diesem Code möglicherweise etwas nicht?

    3. Ein mittleres Problem: Das Skript gibt nicht das Link zur Karte dieses Namens aus, sondern zu allen Karten, welche diesen in ihrem Kartennamen enthalten (bei „Swamp“ also unter anderem auch Leechridden Swamp, Sol’kanar the Swamp King…) Das ist natürlich auch nicht der Sinn der Sache!

    4. Ein Problem der Benutzerfreundlichkeit: Die Option, alle Karten einzeln zu markieren, um sie mit einem Link zu versehen, ist hilfreich, aber noch nicht wirklich praktisch. Wenn jemand die Top-16-Decklisten eines Events veröffentlicht, oder wenn ich die Kartenliste einer meiner Draftumgebungen mit 384 Karten poste, dann… (schauder) Eigentlich muss da ein Skript her, welches den Text automatisch nach passenden Namen durchsucht und einen dann per Ja/Nein-Klick fragt, ob an der entsprechenden Stelle ein Link gesetzt werden soll. So eins eben, wie es auch Magic Universe verwendet (obwohl die keine ja/nein Option zu haben scheinen, oder sie zumindest nicht benutzen).

    5. Ein Luxusproblem: Diese Verlinkungen verweisen auf die Kartensuche von magiccards.info. Es wäre schon gut, zumindest die Möglichkeit zu haben, stattdessen auf Gatherer zu verweisen, der ja immerhin die offizielle Quelle ist.

    6. Zukunftspläne: Ja, die Möglichkeit, komplette Decklisten zu markieren, wäre auch gut! Dabei wäre am hilfreichsten, wennd as Skript intelligent genug wäre, auch Zeilen wie „4 Llanowar Elf“ zu verstehen.

    Wenn Du meine Erfahrungen nachvollziehen möchtest: Dies hier ist mein Testartikel http://magicthegatheringblog.wordpress.com/

    Antworten
    • 2) Stimmt, ich könnte als Ziel des Links ein neues Fenster/Tab angeben. Werde ich umsetzen, ist sinnvoll. Ansonsten erscheint deswegen kein Popup, weil WordPress.com die vorangestellten 2 Zeilen wegrationalisiert hat. Ich werde mir ein WordPress.com Testblog anlegen, um das zu prüfen.

      3) Auch da hat WordPress.com versucht zu schlau zu sein. Das sind die Anweisungen, wie das Kartenbild darzustellen ist, eigentlich sollte das nicht als Text visualisiert werden sondern nur im Seitenquelltext als Anweisung verwendet werden. Auch ein Fall für mein Testblog.

      3) Wenn ich der Magiccards Suche abgewöhne, nach Teiltexten zu suchen, dann wäre das „Swamp Problem“ umschifft.

      4) Oha, da muss ich drüber nachdenken. Eine automatische Kartenerkennung ist wohl alles andere als trivial. Was die umfangreichen Kartenlisten betrifft: siehe 6)

      5) Kann ich prüfen, ja.

      6) Decks und lange Listen sind ja eigentlich das Gleiche. Also, im informationstechnischen Sinne 😀 Und ja, die Listen/Deck Verlinkung wird mit Zahlen vor der Karte umgehen können müssen. Schliesslich will man ja meist MWS oder verwandte Decks verpopupen.

      Wenn du magst kannst du den Testbeitrag wieder unsichtbar machen/löschen in deinem Blog, ich werde mit einem eigenen WordPress.com (und Blogger Blog) testen. Wird aber wohl erst Samstag Abend oder Sonntag, FNM und Launch Party wollen ja gespielt werden…

      Antworten
  3. „verpopupen“

    Ich weiß wirklich nicht, ob ich dieses Wort lustig oder eklig finden soll…

    Antworten
  4. Nette Sache das ganze .Der aktuelle Google Chrome zeigt zwar das Popup an aber kein Bild .Der aktuelle IE macht das gleiche wie Firefox .

    Antworten
  5. Nachtrag nachdem ich Adblock Plus bei google Chrome deaktiviert habe funktioniert es .

    Antworten
    • Ich lese daraus, dass es bei dir funktioniert? In einem selbst gehosteten WordPress Blog?

      Dann ist da irgendeine Regel im Adblock Plus, welche das Nachladen der Bilder verbietet. Einfach http://gatherer.wizards.com/* in die Whitelist der immer erlaubten Seiten aufnehmen sollte das Problem beheben (ohne dass ich es jetzt genauer untersucht habe).

      Antworten
  6. Exakte Kartennamen mit Ausrufezeichen: http://magiccards.info/query?q=!Swamp

    Neues Fenster/Tab: A href=… target=“_BLANK“

    Popup: A href=… onClick=“[…JS-Code für Fenster mit URL öffnen…]; return false;“

    Wie ich schon an anderer Stelle schrieb: Einfach mal im Quelltext von anderen Seiten nachschauen, wie die das machen.

    Antworten
    • Danke für die Tipps, Mario. Das mit den exakten Namen ist ja super, _blank habe ich lokal in meiner Testversion vorhin schon eingebaut 🙂

      Antworten
  7. Ach ja, Gatherer ist eine ganz, ganz schlechte Idee! Der findet „Swamp“ nämlich nur, wenn der Leser zufälligerweise gerade Englisch eingestellt hat! (Falls „Swamp“ bei dir funktioniert, kannst du ja mal „Sumpf“ ausprobieren, um zu sehen, wie es demjenigen ergehen würde.)

    Antworten
  8. zu 4) Wenn man die Top 16 mit händisch gesetzten Links verpopupt (yeah für neue Wörter) dann hat man seinen Kalender auch bestimmt in Microsoft Word.
    Automatische Verlinkung: das ist dann recht einfach, wenn man die Kartenliste zugänglich hat. Das kann ja auch ein einfaches Textfile sein. Ich schlage dafür einen Ablauf vor:

    1 sortiere die Kartenliste nach Länge des Kartennamens (längste zuerst)
    2 für jede Karte der Kartenliste: durchsuche den Text nach Leerstelle + Kartenname (case-sensitiv überlegen)
    3 ersetze alle Fundstellen durch den Link

    Das Problem ist also eher, eine performante Funktion zu entwickeln. Das Problem verschlimmert sich mit hinzukommenden Karten. Man müsste hierfür vielleicht zwei Texte ablegen – einen in Rohform, der bearbeitbar ist und einen in anzeigbarer Form. Das würde eine umfangreiche Korrektur an der WordPress-Architektur beinhalten, wenn man die Suchen-und-Ersetzen-Funktion nicht bei jedem Anzeigevorgang aufrufen möchte.

    Andererseits kann ich mir für diese Ersetzungsroutine keine einzelne Benutzerabfrage vorstellen. Eine Sperre, die man im Text eingeben kann um die Ersetzung zu unterbinden ist die effizientere Lösung.
    (und als Aside habe ich mehrfach versucht, die MU-Redaktion dafür zu sensibilisieren, die dort vorhandene Sperrmöglichkeit auch mal zu nutzen, es scheint vergebens)

    Auf die externe Kartensuche aufzubauen, ist schwierig, was ist denn, wenn die Funktion verändert wird.

    Schliesslich kann man noch auf das Tool vom Backbeatsurfer hinweisen. Sein WordPress-Plugin macht von einfachen Kartenverlinkungen über Decks bis zu Drafts eigentlich alles in WordPress darstellbar.
    WP MTG Helper

    Verpopuppen!

    Antworten
    • Ich sehe noch nicht, wie die automatische Ersetzung mit Javascript (wie aktuell gelöst) effektiv umzusetzen sein soll. Javascript ist ja eher der Slow Player unter den Sprachen…

      Der WP Plugin ist wirklich nett, wer ein WordPress Blog mit der Möglichkeit zur Plugin Installation hat fährt damit sehr gut.

      Antworten
    • Du bringst mich da auf eine Idee, was die Nutzung der externen Magiccards.info Suche betrifft. Vielleicht sollte man da eine .php Seite als Proxy zwischenschalten, dann braucht man bei Änderungen auf der externen Seite nur dort zu drehen und alle alten Links funktionieren weiter…

      Antworten
  9. Ich weiß nicht, ob ich ales, was hier geschireben wurde, richtig verstanden habe, aber folgende Anmerkungen dazu:

    Deaktivieren von Adblock sowohl auf der Seite selbst, als auch bei maiggcard.info, als auch bei wizards (wieso eigentlich das? ich denke, Gatherer benutzt die Suche gar nicht?) bringt nichts.

    Chrome macht gegenüber Firefox auch keinen Unterschied.

    Antworten

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.