WordPress Media Uploader mit Größenauswahl

Lesezeit: 2 Minuten

Benutzeravatar von bbtimx
bbtimx

Ich möchte meinem eigenen WordPress-Plugin eine Bildeingabe hinzufügen. Dafür verwende ich den Standard-WordPress-Media-Uploader wie folgt:

var custom_uploader;

$('.upload_image_button').click(function(e) {
    input = $(this);
    e.preventDefault();

    custom_uploader = wp.media.frames.file_frame = wp.media({
        title: 'Choose Collage Image',
        library: {
            type: 'image'
        },
        button: {
            text: 'Choose Collage Image'
        },
        multiple: false,

        displaySettings: true,

        displayUserSettings: false
    });

    custom_uploader.on('select', function() {
        attachment = custom_uploader.state().get('selection').first().toJSON();
        input.prev('input').val(attachment.url);
    });

    custom_uploader.open();

});

Das funktioniert perfekt. Ich füge zwei weitere Bildgrößen hinzu, die genau für mein Plugin waren:

if ( function_exists( 'add_image_size' ) ) {
    add_image_size( 'collage-large', 460, 660, true );
    add_image_size( 'collage-small', 460, 325, true );
}

Mein Problem: Der Selektor für die Bildgröße oder besser der Thumbnail-Selektor wird beim Medien-Upload-Formular nicht angezeigt. Wie mache ich das?

Sie könnten den Medieneinfügungsdialog verwenden, wie er auf der Seite “Seite bearbeiten” gezeigt wird, der hinzufügt Ausrichtung, Link zu und Größe Eingabefelder. Fügen Sie dazu hinzu frame: 'post' zu Ihrem Options-Array:

file_frame = wp.media.frames.file_frame = wp.media({
    title: 'Select a image to upload',
    button: {
        text: 'Use this image',
    },
    multiple: false,
    frame:    'post',    // <-- this is the important part
    state:    'insert',
});

Anstatt auf das „select“-Ereignis zu hören, hören Sie auf das „insert“-Ereignis. Dieser Code zeigt, wie die zusätzlichen Eigenschaften einschließlich der Größe abgerufen werden:

// When an image is inserted, run a callback.
file_frame.on( 'insert', function(selection) {
    var state = file_frame.state();
    selection = selection || state.get('selection');
    if (! selection) return;
    // We set multiple to false so only get one image from the uploader
    var attachment = selection.first();
    var display = state.display(attachment).toJSON();  // <-- additional properties
    attachment = attachment.toJSON();
    // Do something with attachment.id and/or attachment.url here
    var imgurl = attachment.sizes[display.size].url;
    jQuery( '#filenameFromURL' ).val( imgurl );
});

Ich finde einige wo im Internet. Kann es nützlich sein.

attachment = custom_uploader.state().get('selection').first().toJSON();

Mit Anhang können Sie arbeiten mit:

  1. alt
  2. Autor
  3. Bildbeschriftung
  4. compat ( <-- Es ist Objekt )
    • Artikel
    • Meta
  5. Datum
  6. dateFormatiert
  7. Bezeichnung
  8. BearbeitenLink
  9. Dateiname
  10. Höhe
  11. Symbol
  12. Ich würde
  13. Verknüpfung
  14. menuBestellen
  15. Mime
  16. geändert
  17. Name
  18. nonces ( <-- thi ist Objekt)
    • löschen
    • aktualisieren
    • proto
  19. Orientierung
  20. Größen ( <-- das ist Objekt)
    • voll ( <-- das ist Objekt)
      • Höhe
      • Orientierung
      • URL
      • Breite
      • proto
    • mittel ( <-- das ist Objekt)
      • Höhe
      • Orientierung
      • URL
      • Breite
      • proto
    • Vorschaubild ( <-- das ist Objekt)
      • Höhe
      • Orientierung
      • URL
      • Breite
      • proto
    • proto ( <-- das ist Objekt)
  21. Status
  22. Untertyp
  23. Titel
  24. Typ
  25. hochgeladen auf
  26. URL
  27. Breite

Um Ihr Problem zu lösen, schlage ich die Verwendung mit Fall 20 oben vor:

input.prev('input').val(attchment.sizes.collage-large.url);

Hoffe das funktioniert!

Du bist SEHR nah dran. Um die Größe im Admin-Bereich wählbar zu machen, überprüfen Sie die add_image_size Codex-Eintrag:

add_filter( 'image_size_names_choose', 'my_custom_sizes' );
function my_custom_sizes( $sizes ) {
    return array_merge( $sizes, array(
        'your-custom-size' => __('Your Custom Size Name'),
    ) );
}

In Ihrem Fall sollte dies also tun, was Sie brauchen:

add_filter( 'image_size_names_choose', 'my_custom_sizes' );
function my_custom_sizes( $sizes ) {
    return array_merge( $sizes, array(
        'collage-large' => __('Collage Large'),
        'collage-small' => __('Collage Small'),
    ) );
}

  • Danke vielmals! Ich glaube, das war meine nächste Frage 😉 Aber mein Problem besteht immer noch! Der Bereich, in dem ich die Miniaturansichten auswählen kann, ist nicht vorhanden !

    – bbtimx

    20. November 2013 um 17:56 Uhr


1390980cookie-checkWordPress Media Uploader mit Größenauswahl

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy