Widget mit Media Library Unterstützung

  • Hallo liebe Community,
    leider habe ich ein Problem bei der Programmierung eines Widgets und habe auch nach langer Recherche nichts finden können. Soweit funktionieren die Textfelder des Widgets, allerdings gibt es ein Problem bei der Übergabe der Bild Url. Diese wird nicht in das Input Feld geladen, wenn man beim Bild in der "Media Library" auf "in den Beitrag einfügen" klickt. Ich konnte das Problem soweit lokalisieren, dass die Variable "imgurl" in meinem Javascript Code leer ist. Weiß da allerdings nicht mehr weiter.

    Schon mal vielen Dank für eure Mühen

    Sparkley

    Mein PHP Code

    PHP
    class home_image_box extends WP_Widget {    public function add_admin_scripts() {    //media btn    wp_enqueue_script('media-upload');    wp_enqueue_script('thickbox');    wp_enqueue_script('widgetImage', get_stylesheet_directory_uri() . '/js/widgetImage.js', array( 'jquery' )) ;}    public function add_admin_styles() {    wp_enqueue_style('thickbox');}      function __construct() {    $widget_ops = array(      'classname' => 'home_image_box',      'description' => 'Bildbox Startseite',    );    parent:: __construct(false, $name = __('Bildbox Startseite'), $widget_ops);        add_action( 'admin_enqueue_scripts', array( $this, 'add_admin_scripts' ) );    add_action( 'admin_enqueue_styles', array( $this, 'add_admin_styles' ) );  }   function form($instance) { /*Ausgabe im Backend*/    echo '<h2>Beispiel</h2>';    echo '<p>Hier kann ich etwas dem Benutzer mitteilen!</p>';
        echo '<label for="' . $this->get_field_id('home_image_box_title') . '">Titel: </label>';    echo '<input class="widefat" type="text" value="' . $instance['home_image_box_title'] .'" name="' . $this->get_field_name('home_image_box_title') . '" id="' . $this->get_field_id('home_image_box_title') . '" >';  ?>
        <label for="<?php echo $this->get_field_name( 'image' ); ?>"><?php _e( 'Bild URL:' ); ?></label>    <input name="<?php echo $this->get_field_name( 'image' ); ?>" id="<?php echo $this->get_field_id( 'image' ); ?>" class="widefat image-url" type="text" size="36"  value="<?php echo esc_url( $image ); ?>" />    <input class="upload_image_button" type="button" value="Upload Image" />    <?php    echo '<label for="' . $this->get_field_id('home_image_box_link') . '">Link: </label>';    echo '<input class="widefat" type="text" value="' . $instance['home_image_box_link'] .'" name="' . $this->get_field_name('home_image_box_link') . '" id="' . $this->get_field_id('home_image_box_link') . '" >';          echo '<label for="' . $this->get_field_id('home_image_box_link_text') . '">Linktext: </label>';    echo '<input class="widefat" type="text" value="' . $instance['home_image_box_link_text'] .'" name="' . $this->get_field_name('home_image_box_link_text') . '" id="' . $this->get_field_id('home_image_box_link_text') . '" >';          echo '<label for="' . $this->get_field_id('home_image_box_text') . '">Text: </label>';    echo '<input class="widefat" type="text" value="' . $instance['home_image_box_text'] .'" name="' . $this->get_field_name('home_image_box_text') . '" id="' . $this->get_field_id('home_image_box_text') . '" >';  }   function update($new_instance, $old_instance) {    $instance['image_uri'] = strip_tags( $new_instance['image_uri'] );    $instance['home_image_box_title'] = $new_instance['home_image_box_title'];    $instance['home_image_box_link'] = $new_instance['home_image_box_link'];    $instance['home_image_box_link_text'] = $new_instance['home_image_box_link_text'];    $instance['home_image_box_text'] = $new_instance['home_image_box_text'];    return $instance;  }   function widget($args, $instance) { /*Ausgabe im Frontend*/    echo $args['before_widget']; ?>      <img src="<?php echo esc_url($instance['image_uri']); ?>" />    <?php echo $args['after_widget'];  }} add_action('widgets_init', function() {  register_widget('upper_bar_widget');  register_widget('home_image_box');});

    Mein JS Code

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • Du verwendest in deinem Script das Dollarzeichen ($).
    Wirft dir die Console das nicht als Fehler raus? Ich würde sagen, alle Stelle mit dem $ sollte eigentlich jQuery heißen (an einigen Stellen hast du es ja auch erstezt.

    Ansonsten liegt der Fehler vermutlich in folgender Zeile:

    Code
    $('.image-url').val('imgurl');

    Du versucht die URL in ein Element zu schreiben, dass die Klasse "image-url" hat. Das gibt es aber in deinem Formular gar nicht.

  • Vielen Dank für deine Antwort! Die Klasse im Formular gibt es:

    PHP
    ...[COLOR=#0000BB][FONT=monospace]ame[/FONT][/COLOR][COLOR=#007700][FONT=monospace]( [/FONT][/COLOR][COLOR=#DD0000][FONT=monospace]'image' [/FONT][/COLOR][COLOR=#007700][FONT=monospace]); [/FONT][/COLOR][COLOR=#0000BB][FONT=monospace]?>[/FONT][/COLOR][COLOR=#000000][FONT=monospace]" id="[/FONT][/COLOR][COLOR=#0000BB][FONT=monospace]<?php [/FONT][/COLOR][COLOR=#007700][FONT=monospace]echo [/FONT][/COLOR][COLOR=#0000BB][FONT=monospace]$this[/FONT][/COLOR][COLOR=#007700][FONT=monospace]->[/FONT][/COLOR][COLOR=#0000BB][FONT=monospace]get_field_id[/FONT][/COLOR][COLOR=#007700][FONT=monospace]( [/FONT][/COLOR][COLOR=#DD0000][FONT=monospace]'image' [/FONT][/COLOR][COLOR=#007700][FONT=monospace]); [/FONT][/COLOR][COLOR=#0000BB][FONT=monospace]?>[/FONT][/COLOR][COLOR=#000000][FONT=monospace]" class="widefat [B]image-url[/B]" type="text" ...[/FONT][/COLOR]


    Der Part auf den du dich beziehst funktioniert sowieso nicht, weil ich ja nicht den Inhalt der Variable ausgebe, sondern den String. Wollte so nur testen, ob der part ausgeführt wird, wenn ich mit der Media Library interagiere. Sorry, hätte ich erwähnen sollen.
    Mein Problem ist, dass wenn ich mit console.log versuche die Variable imgurl ausgeben möchte, undefined kommt und ich mir nicht erklären kann, warum.

    Also das Problem ist, dass ich die URL nicht in die Variable bekomme, wenn ich bei der Media Library auf "In Beitrag einfügen" klicke. Bezieht sich also auf diese Zeile:

    Code
    [COLOR=#333333]var imgurl = $('img',html).attr('src');[/COLOR]

    Viele Grüße

  • Die Klasse im Formular gibt es

    Nicht in dem PHP Teil, den du hier gepostet hast. Es wäre auch hilfreich, wenn du den nochmal etwas schöner formatieren könntest. So ist der wirklich schwierig lesbar.

    Aber du hast recht, ich habe deine Frage falsch verstanden, weil nicht genau gelesen.


    Mein Problem ist, dass wenn ich mit console.log versuche die Variable imgurl ausgeben möchte, undefined kommt und ich mir nicht erklären kann, warum.

    Hast du denn schon mal als ersten Schritt probiert, alle $-Zeichen gegen jQuery auszutauschen? Nur um das als Fehlerquelle auszuschließen.

    Du schreibst, imgurl ist undefined. Hast du mal versucht, console.log(html) auszugeben? Aus der Variable html "extrahiert" dein script ja imgurl.
    Ist html auch undefined? Wenn nein, poste hier mal bitte den Inhalt.

  • Ich hab hier diese Woche gerade fast das selbe für eine Options-Seite für ein Plugin. Deshalb konnte ich gerade mal schnell in meiner eigenen Funktion testen.

    Die Dollarzeichen sind vermutlich doch nicht das Problem, weil du das ja als Parameter in der ready-function mit übergibst.

    Bei mir ist imgurl auch undefined, wenn ich deinen Code verwende.

    Gehen wir jetzt einfach mal davon aus, dass die Variable html bei dir nicht undefined ist, dann versuch mal

    Code
    [COLOR=#333333]var imgurl = $('img',html).attr('src');[/COLOR]

    durch

    Code
    var [COLOR=#333333]imgurl [/COLOR]= [COLOR=#333333]jQuery[/COLOR](html).attr('src');

    zu ersetzen.

  • Vielen Dank!
    Das ganze läuft jetzt mit folgendem Code, falls jemand nochmal auf den Thread stoßen sollte:

    Hast du eine Ahnung, warum das jetzt funktioniert und vorher nicht?

    Achso und bevor ich es vergesse:
    Mein Code aus dem obersten Beitrag hat die Original URL in das Inputfeld geladen, wenn man zunächst in der Media Library auf Datei URL geklickt hat und dann auf "In Beitrag einfügen". Komisch, aber so sollte es ja auch nicht "funktionieren".

    Vielen Dank Daniel für Deine Hilfe!

    Einmal editiert, zuletzt von Sparkley (17. Dezember 2016 um 20:10)


  • Hast du eine Ahnung, warum das jetzt funktioniert und vorher nicht?

    Um ehrlich zu sein: Ich habe keine Ahnung, was dieser Selector sein soll:

    Code
    $('img',html)

    Habe ich so noch nie gesehen (und auch noch nie gebraucht). Vielleicht kann das ja noch jemand anders hier aufklären. Ich konnte es gerade nicht mal ergooglen ;)

    Ich würde ihn jetzt mal (im übertragenen Sinne) interpretieren als "Select img in Variable html". Also quasi das gleiche wie $(html).find('img').
    So wie ich das sehe, enthält die Variable html aber schon das img-Objekt. Insofern kann man direkt auf das Attribut zugreifen.


    Vielen Dank Daniel für Deine Hilfe!

    Sehr gerne. Freut mich, dass es jetzt funktioniert. :)

    Einmal editiert, zuletzt von danielgoehr (17. Dezember 2016 um 21:11)

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!