Monat: Juni 2011

RIP RichText Widget

9. Juni 2011 - JavaScript, tinymce, wordpress

Seit ein paar Tagen habe ich mein Rich Text Widget Problem vom Hals. Der Kunde hat eine einfachere Lösung akzeptiert.

English Summary: Rest In Peace, Rich Text Widget… What to do, when a customer who runs a page-based site has fallen in love with his easy-to-use Text Widget and now asks for a better one with color and images and videos and …

I tried very hard to overcome the existing problems (see…) but without thorough help from WordPress all solutions only work with considerable compromises. Now I could talk the customer into a “loop”-based approach:  he writes a post with a special category (“sidebar, “teaser”, etc) which then is displayed  in the desired part of his webpage.

Die Probleme bei der Realisierung solch eines Widgets habe ich schon früher beschrieben ()

Sie betreffen nicht nur Widgets, die tinyMCE enthalten, sondern alle Javascript basierenden Widgets.

Die Hoffnung auf Hilfe von WordPress musste ich bald aufgeben. Auf meine Fehlermeldung im Forum kam nie eine Antwort und schon allein anzusehen, wie dort die Anfragen aus aller Welt fast im Sekundenbereich einlaufen ist deprimierend. Wer soll das alles lesen? Schon nach einem Tag ist die eigene Anfrage ein paar Hundert Plätze weiter nach unten gerutscht.

Ok, jetzt kurz die wohlbekannte „Loop“-Lösung: der Kunde schreibt einen Artikel mit seinem Standard-Editor und vergibt dabei eine Kategorie „sidebar“ oder „teaser“ oder …  und die paar Zeilen


<span style="font-family: courier new,courier;"><?php query_posts('category_name=sidebar');</span><span style="font-family: courier new,courier;">
 if (have_posts()) : while (have_posts()) : the_post();?>
 <div id="sidebar_info"><?php the_content();?>
 </div></span><span style="font-family: courier new,courier;"><?php endwhile; else : ?>
 <?php endif; ?></span>

erledigen den Job.

NextGEN Gallery von Alex Rabe

9. Juni 2011 - JavaScript, wordpress

Seit ein paar Wochen setze ich hier auf dem Blog die NextGEN Gallery von Alex Rabe ein.

NextGen Gallery ( man muss bei dem Namen immer an Steve Jobs Next Cube denken) installiert ein aufwändiges aber intuitives Menüpaket im Admin. Zum Konfigurieren und Starten der Gallerie werden Shortcodes verwendet.

Für die Bilder verwendet NextGen Gallery eine eigene Datenverwaltung. Das hat Vor- und Nachteile.Wird die Galerie gelöscht, verschwinden automatisch auch alle Bilder vom Server.Für Kunden, die Bilder in Galerien und im Content ihrer Seiten verwenden, wird die Sache unübersichtlicher. Sie müssen zweimal uploaden. Für sie wäre es praktikabler, wenn sie die Galerie aus der Mediathek als einheitliche Medienquelle füttern könnten.

Immerhin kann man im Standarddialog zum Hinzufügen der Bilder zu Posts und Seiten zusätzlich jetzt auch die NextGen Galerien als Quelle auswählen.Vielen Dank an Alex Rabe für die gewaltige und gute Arbeit, die er in sein Projekt hineingesteckt hat.

Norbel

tinyMCE erweitern mit neues Styles

9. Juni 2011 - tinymce, wordpress

Für ein Projekt musste ich den tinyMCE um ein paar Stilvorlagen erweitern. Die Vorgehensweise möchte ich hier kurz aufzeigen. Damit es einfacher wird, kann man sich auch ein kleines Plugin herunterladen.

English Summary: if you want to configure the WordPress standard editor, tinyMCE,  you need to change just one array. That sounds easy. However: This array is huge and not without contradictions. Same is true for the documentation. In the following I want to show how to add some styles to the tinymce style-dropdown meue. For better understanding you may download a small plugin.

Tinymce wird über ein riesiges Array konfiguriert. Darauf kann man mit verschiedenen Methoden zugreifen:
mit jQuery, mit dem Plugin Tinymce Advanced oder mit WordPress Bordmitteln „add_editor_style(…)“ oder add_filter(‚tiny_mce_before_init‘,’name_of_function_you_have written’)

Um die Stilvorlagen im Hauptmenu anzuzeigen, schaltet man sich die benötigten  Dropdowns ( hier: Styles und Font Size für unterschriedliche Schriftgrößen ) am einfachsten mit dem Tinymce Advanced Plugin frei.

Beispiel: kiju_fliess soll ein Format sein, das auf beiden Seiten einen definierten Abstand zum Rand hat.

.kiju_fliess { padding: 0 15% 0 15%;}

Das Menü styles wird nun um den Eintrag Fliesstext=kiju_fliess erweitert. Tinymce trägt an allen markierten Textstellen die Klasse kiju_fliess ein, wenn „Fliesstext“ angewählt wurde.

Natürlich muss man im Frontend auch sein Seitenstylesheet (z.B. style.css) entsprechend erweitern 🙂

Wenn man die Auswirkungen der Formatierung gleich im Editor sehen möchte, kann man tinymce  ein zusätzliches Stylesheet mitgeben. Dieses Stylesheet liegt in diesem Beispiel im Plugin im Ordner stylesheets.

Das Plugin besteht nur aus den folgenden Zeilen:

if ( !class_exists( 'tinymce_add_styles' ) ) {
class tinymce_add_styles {
function tinymce_add_styles() {
add_action( 'admin_head',array(&$this, 'tinymce_add_styles_init'));
}
function tinymce_add_styles_init() {
if (get_user_option('rich_editing') == 'true') {
add_filter('tiny_mce_before_init',array(&$this,'nf_add_styles'));
}
}
public function nf_add_styles ($initArray) {
$initArray['theme_advanced_font_sizes'] = "8px=8px,10px=10px,12px=12px,14px=14px,18px=18px,24px=24px,36px=36px";
$initArray['theme_advanced_styles'] ="Überschrift_gross=kiju_sub_36,Überschrift_mittel=kiju_sub_24,Überschrift_klein=kiju_sub_18,Fliesstext=kiju_fliess";
$nf_stylesheet=plugins_url().'/tinymce_add_styles/stylesheets/editor-style.css';
if (array_key_exists('content_css', $initArray) && !empty($initArray['content_css'])) $initArray['content_css'].=",".$nf_stylesheet;
else $initArray['content_css'] = $nf_stylesheet;
return $initArray;
}
}
$tinymce_add_styles = new tinymce_add_styles();
}

Tinymce kann mit mehreren Stylesheets umgehen. Man muss nur aufpassen, dass man bestehende Einträge in $initArray[‚content_css‘] nicht überschreibt.

Achtung:

Ich hatte in diesem Fall den tinyMCE  ‚advanced’ . Es gibt noch einen zweiten erweiterbaren Style-Bereich im initArray:
$initArray[’style_formats‘]=….

Den sollte man aber nicht verwenden, da sich seine Einstellungen mit „advanced“ nicht vertragen. Nur zur Vollständigkeit: $initArray[’style_formats‘]= „[{title : ‚Fliesstext‘, block :’p‘,classses :’kiju_fliess‘}]“;

Hier könnt ihr das Plugin downloaden:  tinymce_add_styles