MODx: Vorschau-Bilder für externe Links
Vor einiger Zeit hat Marc auf der seiner Homepage ein MODx-Plugin für kleine Vorschau-Bilder in externen Links mittels dem WebSnapr-Dienst veröffentlicht. Dieses Script habe ich leicht modifiziert, so dass es nur noch die externen a-Tags eines Dokuments mit einem Vorschau-Bild versieht. Durch die Portierung des benötigten Javascriptes (von bourne) auf Mootools wurde die Größe des benötigten Javascript auf 1,6 KB reduziert.
Zur Installation wird im Backend wird unter dem Namen WebSnprX ein Plugin angelegt und der Text aus der folgenden Datei eingefügt und anschließend in der Plugin-Konfiguration die Events OnWebPagePrerender und OnParseDocument aktiviert:
/** Plugin Name: WebSnprX Plugin URI: http://www.mademyday.de Description: WebSnprX simply integrates <a href="http://www.websnapr.com">WebSnapr</a>-Script in your MODx content. Adds preview bubble to all external links. The link reference has to be the first attribute of the a tag. Version: 0.6.7 - 14.09.09 Author: Marc Hinse - www.mademyday.de (based on a Wordpress plugin by XSized - http://tagg.selfip.com/blog/wordpress-plugin-snapr/) Modified: Thomas Jakobi - www.partout.info Events: OnWebPagePrerender **/ global $modx; $e = &$modx->Event; switch ($e->name) { case "OnWebPagePrerender": // search and replace external Links in document $text = $modx->documentOutput; $modx->documentOutput = str_replace('<a href="http://', '<a class="previewlink" href="http://', $modx->documentOutput); $modx->documentOutput = str_replace('class="previewlink" href="'.$modx->config['site_url'], 'href="'.$modx->config['site_url'], $modx->documentOutput); // generate JS for the header if (strpos($modx->documentOutput, 'previewlink')) $modx->documentOutput = str_replace('</head>', '<script type="text/javascript" src="/assets/plugins/WebSnprX/previewbubble.js"></script>'."\r\n".'</head>', $modx->documentOutput); break; default: return; // stop here - this is very important. break; }
Das Javascript gibt es in zwei Versionen. Eine für Mootols 1.2:
/* WebSnapr - Preview Bubble Javascript Written by Juan Xavier Larrea http://www.websnapr.com last modified: Aug 2007, mo ported to mootools by bourne http://blog.mos.cn last modified: Jan 2009, jako */ var WebSnaprPreviewBubble = { // Point this variable to the correct location of the bg.png file bubbleImagePath: '/assets/plugins/websnprx/bg.png', // Insert your WebSnapr developer key here - get it free on www.websnapr.com developerKey: '...', // DO NOT EDIT BENEATH THIS start: function () { $$('a.previewlink').each(function (previewlink) { previewlink.addEvent("mouseenter", WebSnaprPreviewBubble.attachBubble); previewlink.addEvent("mouseleave", WebSnaprPreviewBubble.detachBubble); }); }, attachBubble: function (event) { var event = new Event(event); WebSnaprPreviewBubble.previewBubble = new Element('div', {style:"text-align: center; z-index: 99999; position: absolute; top: "+ (event.page.y+17) +"px ; left: "+(event.page.x+15)+"px ; background: url("+ WebSnaprPreviewBubble.bubbleImagePath +") no-repeat; width: 240px; height: 190px; padding: 0; margin: 0;"}).adopt([new Element('img', {src:"http://images.websnapr.com/?key=" + encodeURIComponent(WebSnaprPreviewBubble.developerKey) + "&url="+encodeURIComponent(event.target.href), style:"padding-top: 0; padding-left: 0; padding-right: 0; padding-bottom: 0; margin-top: 27px; margin-left: 12px; margin-bottom: 0; margin-right: 0; border: 0"})]); WebSnaprPreviewBubble.previewBubble.inject(document.body); }, detachBubble: function (event) { WebSnaprPreviewBubble.previewBubble.dispose(); } }; window.addEvent('domready', WebSnaprPreviewBubble.start);
Und die andere für Mootools 1.1:
/* WebSnapr - Preview Bubble Javascript Written by Juan Xavier Larrea http://www.websnapr.com last modified: Aug 2007, mo ported to mootools by bourne http://blog.mos.cn last modified: Feb 2008 */ var WebSnaprPreviewBubble = { // Point this variable to the correct location of the bg.png file bubbleImagePath: '/assets/plugins/websnprx/bg.png', // Insert your WebSnapr developer key here - get it free on www.websnapr.com developerKey: '...', // DO NOT EDIT BENEATH THIS start: function () { $$('a.previewlink').each(function (previewlink) { previewlink.addEvent("mouseenter", WebSnaprPreviewBubble.attachBubble); previewlink.addEvent("mouseleave", WebSnaprPreviewBubble.detachBubble); }); }, attachBubble: function (event) { var event = new Event(event); WebSnaprPreviewBubble.previewBubble = new Element('div', {style:"text-align: center; z-index: 99999; position: absolute; top: "+ (event.page.y+17) +"px ; left: "+(event.page.x+15)+"px ; background: url("+ WebSnaprPreviewBubble.bubbleImagePath +") no-repeat; width: 240px; height: 190px; padding: 0; margin: 0;"}).adopt([new Element('img', {src:"http://images.websnapr.com/?key=" + encodeURIComponent(WebSnaprPreviewBubble.developerKey) + "&url="+encodeURIComponent(event.target.href), style:"padding-top: 0; padding-left: 0; padding-right: 0; padding-bottom: 0; margin-top: 27px; margin-left: 12px; margin-bottom: 0; margin-right: 0; border: 0"})]); WebSnaprPreviewBubble.previewBubble.inject(document.body); }, detachBubble: function (event) { WebSnaprPreviewBubble.previewBubble.remove(); } }; window.addEvent('domready', WebSnaprPreviewBubble.start);
Das passende Javascript legt man zusammen mit der Hintergrundgrafik für das Vorschaubild in das Verzeichnis assets/plugins/websnprx und benennt es noch in previewbubble.js um.
Wenn ein externer Link auf einer Seite kein Vorschau-Bild erhalten soll, dann muss man ihm irgendeine Klasse (außer previevlink) vor dem href-Attribut zuweisen, damit das Plugin diesen Link nicht ändert. Der TinyMCE fügt den Klassennamen normalerweise vor dem href-Attribut ein.
Viel Erfolg