MODx: Vorschau-Bilder für externe Links

von Thomas Jakobi am Sonntag, 11. Januar 2009 um 20:25 Uhr.

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:

WebSnprX.plugin
/**
 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:

previewbubble12.js
/*
    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:

previewbubble11.js
/*
    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