Monat: März 2011

WordPress media uploader in admin

30. März 2011 - JavaScript, wordpress

(Anmerkung 1/2013: Für WordPress > 3.4  siehe http://www.it-in-a-box.com/2013/01/wordpress-3-5-neuer-media-uploader-in-admin/)

(Anmerkung 11/2012: wenn ihr zu diesem Thema dazu Fragen habt und mehr (oder bessere) Informationen braucht, schreibt mir einen Kommentar)

Per heute (WordPress 3.4) gibt es leider immer noch kein offizielles Interface  für den WordPress Media Uploader, mit dem der tinyMCE Editor „angereichert“  ist. Wenn man eine ähnliche Funktionalität (die vorgestellte Lösung gilt nur für Bilder)  im admin einsetzen will, muss man etwas hacken. Dazu benötigt man ein paar Zeilen Javascript.

English Summary: As of today (WordPress 3.4), there is no WordPress supported interface to the WordPress media uploader (supplement to tinyMCE). To use it anyway in your admin pages (this solution only works for images), you need to write a few lines of Javascript.

Der erste Ansatz für den Hack stand bei Matt. Leider funktionierte dort das Rückschalten nicht: wenn man den neuen zusätzlichen uploader verwendet hatte, konnte man in tinyMCE keine Bilder mehr laden.

Ein verbessertes Script ist dieses:

jQuery(document).ready(function() {

window.original_send_to_editor = window.send_to_editor;
 window.send_to_editor_clone1 = function(html){  // ohne html bekommt die Funktion den falschen frame
 jQuery('#bild_link').val(jQuery('img',html).attr('src'));
 tb_remove();
 };
 window.send_to_editor_clone2 = function(html){
 jQuery('#hintergrund_bild_link').val(jQuery('img',html).attr('src'));
 tb_remove();
 };

 jQuery('#content-add_media').click(function() {
/*jQuery('#add_image').click(function() { wordpress bis 3.2 */
 window.send_to_editor=window.original_send_to_editor;
 tb_show('', 'media-upload.php?type=image&TB_iframe=true');
 return false;
 });

jQuery('#bild_link_button').click(function() {
 window.send_to_editor=window.send_to_editor_clone1;
 tb_show('', 'media-upload.php?type=image&TB_iframe=true');
 return false;
 });
 jQuery('#hintergrund_bild_link_button').click(function() {
 window.send_to_editor=window.send_to_editor_clone2;
 tb_show('', 'media-upload.php?type=image&TB_iframe=true');
 return false;
 });
 });

Und so sieht es aus:

 

Die WP- Funktion „window.send_to_editor“ wird gespeichert und beim Klick auf einen der Upload-Buttons (IDs #bild_link_button bzw. #hintergrund_bild_link_button) durch eine neue Funktion ersetzt. In der neuen Funktion wird die Thickbox  mit dem bekannten Upload-Dialog aufgerufen. Anschließend holt man aus dem iframe der Thickbox den Namen des Bildes und trägt ihn in das Textfeld ein.

Wenn man den Uploader im tinyMCE nutzen will, wird die alte „window.send_to_editor“ Funktion wieder hergestellt (Click-Event auf #content-add_media)

Nachteil: es ist ein Hack und kann bei der nächsten WP Version nicht mehr funktionieren. Inklusive WP 3.4 ist aber alles ok.

Für jeden Uploader musste ich oben im Script eine neue Funktion definieren . JS Gurus werden das sicherlich verbessern können 🙂

Noch mal zur Übersicht:

#bild_link_button und #hintergrund_bild_link_button  sind die IDs der „Upload“ Buttons
#bild_link und #hintergrund_bild_link sind die IDs der Textfelder darüber , in die der Link  hineingeschrieben wird

#content-add_media ist die ID des WordPress Upload Buttons über dem Editor

bis Version 3.2 hiess diese ID #add_image

 

Mehr Kontrolle über eine Select-Schaltfläche mit JavaScript

18. März 2011 - HTML, JavaScript

Wenn man ein Select in einem Formular verwendet, kann es hilfreich sein, wenn man den Status des Selects überwachen kann – besonders dann, wenn durch die Änderung der Select-Auswahl ein neuer Datensatz aktiviert wird. Möglich ist dies mit Javascript.

English Summary: select controls in forms may be used for convenience to input text. If a select control is bound to a dataset, it may be necessary to monitor it’s behaviour with JavaScript.

In einem Projekt wird über ein Select gesteuert, welcher Datensatz behandelt werden soll. Der Benutzer kann den Datensatz ändern oder löschen. Ändert er die Daten, muss man den Zustand des Selects bis zum Speichern der Daten überwachen, damit der Datensatz nicht falsch zugeordnet wird.

Hier ist ein Javascript dazu:

jQuery(document).ready(function() {
var capt=jQuery('select.critical_click_select').val();
var cnpt;
 
jQuery('select.critical_click_select').change(function() {
cnpt=jQuery('select.critical_click_select').val();});

if (cnpt == capt) { // passiert beim Rücksetzen der selektion; mach nix
} else {
  if (.. der Benutzer hat die Daten verändert..) {
  var jj=confirm("Wenn Du jetzt einen neuen Datensatz wählst und dann die Änderungen speicherst, werden sie\n zum neuen Datensatz hinzugefügt.\n Fortsetzen?");
  if (jj) {
   capt=cnpt;
  } else {jQuery('select.critical_click_select').val(capt);}
 } else { capt=cnpt; // normale Änderung, mach nix
 }
}  

 });

Das Select hat die Klasse .critical_click_select. Zunächst wird der aktuelle Zustand in capt gespeichert. Wenn das Select verändert wird, speichert man den neuen Zustand in der Variablen cnpt. Dann muss man feststellen, ob Änderungen an den Daten vorgenommen wurden. In dem Confirm-Dialog fragt man den Benutzer, ob er den Datensatz wechseln möchte. Wenn nein, stellt man den ursprünglichen Status wieder her.

Wenn keine Änderung erfolgt ist, kann man die Select-Änderung „durchgehen“ lassen.

JPicker auf einer wordpress admin page

1. März 2011 - wordpress

jPicker ist einer der bekannteren Javascript Color-Picker. Für die, die gerne einen Color-Picker einsetzen möchten, gibt es hier ein paar Tipps dazu.

English summary:  below some code fragments to demonstrate the integration of  jPicker on a wordpress admin page with wordpress plugin are shown. For more english information feel free to send a comment.

Das Plugin heisst „Farbschema“ und  hier sind die wichtigsten Zeilen zur Integration von jPicker

// constructor
function farbschema() {
add_action( 'admin_init',array(&$this, 'farbschema_init'));
add_action( 'admin_menu',array(&$this, 'farbschema_add_page'));
// Plugin initialisieren</span>
function farbschema_init() {<
wp_register_script('jPicker_fs', WP_PLUGIN_URL.'/farbschema/jPicker/jpicker-1.1.5.js', array('jquery'),false,true);
wp_register_script('jPicker_init', WP_PLUGIN_URL.'/farbschema/jPicker/jpicker_init.js',    array('jquery'),false,true);
wp_register_style('jPicker_1',WP_PLUGIN_URL.'/farbschema/jPicker/jPicker.css');
wp_register_style('jPicker_2',WP_PLUGIN_URL.'/farbschema/jPicker/css/jPicker-1.1.5.css');


// Menu hinzufuegen, Seite erzeugen und scripts auf diese Seite laden
function farbschema_add_page() {
$farbschema_page=add_submenu_page( 'edit.php?post_type=page', 'Farbschema', 'Farbschema', 'edit_pages', 'nf_farbschema',array(&$this, 'farbschema_do_page'));
add_action('admin_print_scripts-'.$farbschema_page, array (&$this,'farbschema_scripts'));
 add_action('admin_print_styles-'.$farbschema_page, array (&$this,'farbschema_styles'));
 }
 function farbschema_scripts() {

wp_enqueue_script('jPicker_fs');
wp_enqueue_script('jPicker_init');
wp_localize_script('jPicker_fs', 'my_param', array( 'jPickerImageUrl' => WP_PLUGIN_URL."/farbschema/jPicker/images/"));
 }
 function farbschema_styles() {
 wp_enqueue_style('jPicker_1');
 wp_enqueue_style('jPicker_2');
 }

function farbschema_do_page() {....

Mit dem hook admin_init werden das Script mit dem jPicker Code, ein Script zur Initialisierung von jPicker und zwei! Stylesheets registriert.

Mit admin_menu wird eine neue Seite im Admin-Menü erzeugt (in diesem Fall aus bestimmten Gründen unter „Seiten“). Auf dieser neuen Seite werden die Scripts und die Stylesheets geladen. jPicker braucht einen aktuellen Pfad, um seine Bilder lesen zu können. Das wird mit der Zeile (oben im Code) vorbereitet:

wp_localize_script('jPicker_fs', 'my_param', array( 'jPickerImageUrl' => WP_PLUGIN_URL."/farbschema/jPicker/images/"));

Hierdurch wird ein JS Array auf der Seite mit dem Pfadnamen erzeugt, auf das jPicker_init später zugreifen kann.

function farbschema_do_page() {...

enthält den eigentlichen Code des Plugins.

jPicker_init sieht so aus:

 jQuery(document).ready(
 function()
 {
 jQuery('.picked_color').jPicker(
 {
 images:{clientPath: my_param.jPickerImageUrl},
 window:{position: { x: 'screenCenter', y: 'center' } }
 }, function (color) {jQuery(this).val('#'+color.val('hex'))
 });
 });

Im vorliegenden Fall wird jPicker an alle Textinputs gebunden, die die Klasse picked_color haben. In der Klammer hinter jPicker werden noch drei Modifikationen gemacht:

  1. der clientPath wird so gesetzt, dass die Bilder gefunden werden (hier wird das Array, das mit wp_localize_script erzeugt wurde, ausgewertet
  2. die Position, an der jPicker aufklappt, wird gesetzt (bei mir war das ohne diese Zeile irgendwo oben im Nirwana)
  3. eine callback Funktion wird gesetzt, damit jPicker nicht ‚ffcc00‘ anzeigt sondern ‚#ffcc00‘, weil das leichter zu verarbeiten isr

Und so sieht es dann aus