Hinzufügen weiterer Optionen zur Instanz eines Bildes. (Einstellungen für die Anhangsanzeige)

Ich versuche, ein einfaches wiederverwendbares Plugin für die Bildpräsentation in Wordpress 3.9 zu erstellen, und es scheint, dass ich gegen eine Mauer gestoßen bin.

Ich möchte in der Lage sein, der Instanz des Bildes einige Optionen hinzuzufügen. (Die Details unter "Einstellungen für die Anhangsanzeige"). Wie ein Kontrollkästchen mit der Aufschrift "Responsive", das das Dropdown-Menü für die Bildgröße deaktiviert (ausgegraut), oder Optionen für feste Seitenpositionen usw.

Im Medien-Manager konnte ich beim Auswählen / Ersetzen eines Bildes mithilfe von attachment_fields_to_editund seinen Geschwisterfiltern einige benutzerdefinierte Felder hinzufügen. Diese Felder werden jedoch an das Bild selbst (oder an das Bildanhang-Post-Objekt, wenn Sie so wollen) angehängt Wenn ich zwei Instanzen desselben Bildes auf einer Seite hätte, würden sie den gleichen Wert meines benutzerdefinierten Felds haben.

a) Das Feld Benutzerdefinierter Text, das ich hinzugefügt habe, kann nicht an die Instanz angehängt werden. Alle Instanzen desselben Bildes haben diesen Wert gemeinsam.

b) Dies ist der Bereich, in dem ich Optionen hinzufügen möchte, da hier alles auf jede Instanz zu folgen scheint.

c) Dies zeigt die gleichen Anzeigeeinstellungen wie im vorherigen Bildschirm, wird jedoch anders angezeigt, wenn Sie in Wordpress 3.9 auf den "Stift" über einem Bild klicken. Beachten Sie, dass die von angegebenen benutzerdefinierten Optionen attachment_fields_to_editauf diesem Bildschirm überhaupt nicht vorhanden sind.

Obwohl ich mich noch nicht vollständig mit der Funktionsweise des Backbones oder den Best Practices zum Ändern der wp.media-Objekte befasst habe, bin ich sowohl mit PHP als auch mit JS und dem Googeln nach Antworten ziemlich kompetent. Aber dieser hat mich jetzt seit ein paar Tagen verblüfft, daher wird jede Hilfe sehr geschätzt.

Danke fürs Lesen!

Sie haben vollkommen Recht mit der Analyse des Problems, auch wenn die von Ihnen verwendeten Begriffe etwas verwirrend sind. Es gibt keine "Instanz des Bildes": Wenn Sie ein Bild in einen Beitrag eingefügt haben, wird durch Ändern des ursprünglichen Bildtitels oder der Beschriftung (z. B. über das Menü "Medien") das in den Beitrag eingefügte Bild nicht geändert. Um Sie zu überzeugen, klicken Sie auf die Registerkarte "Text" und überprüfen Sie den generierten HTML-Code.

Folgendes passiert, wenn Sie ein Bild mit der Schaltfläche "Medien hinzufügen" einfügen:

1. Wenn Sie auf "In Beitrag einfügen" klicken, werden Daten aus dem Medienmodal entnommen, um einen HTML-Code zu generieren: <img>Tag mit der richtigen Quelle, abhängig von der gewählten Größe, Titel als Alternativtext und Beschriftung, falls vorhanden. Dieser Code wird an der richtigen Stelle in den TinyMCE-Editor eingefügt (überprüfen Sie ihn über die Registerkarte "Text").

2. Auf der Registerkarte "Visuell" wird eine "Ansicht" erstellt, um das Bild im visuellen Editor darzustellen. Diese Ansicht zeigt das Bild und zwei Schaltflächen an: Bearbeiten und Löschen. In dieser Ansicht können Sie die Bildgröße ändern und einige andere Parameter visuell ändern, ohne den HTML-Code zu berühren.

Wenn Sie also einige benutzerdefinierte Daten hinzufügen möchten (nennen Sie es kein benutzerdefiniertes Feld, da es keinem Anhangsbeitrag zugeordnet ist), müssen Sie es in diesen HTML-Code einfügen und dann die Ansicht ändern, damit diese Daten visuell geändert werden können . Wenn ich Ihre Frage gut verstehe, möchten Sie Daten hinzufügen, die das Bild auf eine bestimmte Weise auf der Seite positionieren. Sie können hierfür eine benutzerdefinierte Klasse verwenden.

Hier ist der HTML-Code, der generiert wurde:

<img class="alignnone size-medium wp-image-10" src="http://myserver.com/wp-content/uploads/2014/08/opensource-300x259.gif" alt="opensource" width="300" height="259" />

Und Sie möchten eine "reaktionsschnelle" Auswahl in der Größen-Dropdown-Liste haben, die den Code wie folgt aussehen lässt:

<img class="alignnone size-responsive wp-image-10" src="http://myserver.com/wp-content/uploads/2014/08/opensource-300x259.gif" alt="opensource" />

So erreichen Sie dies: Erstellen Sie ein Plugin, das ein neues Skript auf der Seite nach der Bearbeitung in die Warteschlange stellt.

add_action( 'admin_enqueue_scripts', 'wpse16975_custom_image_view');
function wpse16975_custom_image_view($hook){
    if($hook == 'post.php'){
        wp_enqueue_script( 'custom_image_view', plugin_dir_url( __FILE__ ) . '/customView.js', array( 'media-views' ));
    }
}

Dann sollte customView.js folgendermaßen aussehen:

(function($, _){
    var media = wp.media;

    var origImageDetails = media.view.ImageDetails;
    media.view.ImageDetails = origImageDetails.extend({
        initialize: function() {
            origImageDetails.prototype.initialize.apply( this, arguments );
            this.on( 'post-render', this.responsiveSize );
            this.listenTo( this.model, 'change:size', this.setReponsiveSize );
            this.initSize = this.model.get('size');
        },

        responsiveSize: function(){
            // add a "Reponsive" option to the Size dropdown setting
            var $opt = $(document.createElement('option')).attr('value', 'responsive').text('Responsive');
            if(this.initSize == 'responsive') $opt.attr('selected', 'selected');
            this.$('.embed-media-settings select.size').append($opt);
        },

        setReponsiveSize: function(){
            // remove width and height
            if(this.model.get('size') == 'responsive') this.controller.image.set({width:null, height:null}, {silent:true});
        }

    });
}(jQuery, _));

Und hier ist das Ergebnis: