MODx: Vorschau-Bilder für externe Links

von Thomas Jakobi am Sonntag, 11. Januar 2009 um 20:25 Uhr. Kommentare (4)

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


Speichern auf digg Speichern auf slashdot Speichern auf del.icio.us Speichern auf technorati Speichern auf furl Speichern auf Google Speichern auf Mister Wong
urbandigital
Supersexy aber...
am 10. Juni. 2010, 01:09:29 Uhr
geiles Plugin - und das Erste was ich überhaupt als ModX Newcomer verbaut habe. Was mich jetzt an der Sache nur etwas stört, auch wenn ich mein Dev.Key bereits habe, das die Limit-Exceeds kommen! Top wäre gewesen wenn das ganze irgendwie gecached wird! Trotzdem dicken dicken Dank für deine ModX related-articles hier! Ich hab mich ins ModX verliebt... und du hast, unter anderem, mitverkuppelt!
Fabian
...öhm
am 12. April. 2010, 18:07:10 Uhr
Hi Jako,
leider bekomme ich das Plugin nicht ans laufen. Plugin installiert, HG-Grafik + JS eingebunden. Ist allerdings auch ein uralt modx (0.9.6.1p2)

Eine Idee? Dank vorab.

Grüße,
Fabian
Dein Meister
Geht jetzt
am 10. April. 2009, 11:24:42 Uhr
Also ich schreibe dieses Kommentar nur der vollständigkeit halber. Dank deinem tollen E-Mail Support geht es jetzt. es sei erwähnt das man wenn man so eine Vorschaublase haben möchte auch kein title-Attribut vor dem href-Attribut haben darf. Zumindest im moment nicht.

Danke Jako (:
Dein Meister
Geht leider nicht -.-
am 3. April. 2009, 17:50:09 Uhr
Hi,
ich habe alles so gemacht wie du geschrieben hast, habe auch meinen key an der Stelle mit ... eingefügt, aber es funktioniert nicht.

Was habe ich falsch gemacht?

PS.: das Feld email bitte mit einem * versehen :D

Kommentar schreiben

  • Benötigte Felder sind mit einem Stern (*) markiert.
  • Es ist nicht möglich im Kommentar URLs und Links zu hinterlassen.