it-swarm.com.de

Hinzufügen weiterer Optionen zur Instanz eines Bildes. (Einstellungen für die Anzeige von Anhängen)

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

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

Beim Auswählen/Ersetzen eines Bildes konnte ich im Medien-Manager einige benutzerdefinierte Felder mithilfe von attachment_fields_to_edit und den entsprechenden Filtern hinzufügen. Diese Felder werden jedoch an das Bild selbst (oder an das Post-Objekt für Bildanhänge, wenn Sie so wollen) angehängt. Wenn ich also zwei Instanzen desselben Bildes auf einer Seite hätte, hätten sie den gleichen Wert wie mein benutzerdefiniertes Feld.

The wordpress replace image screen, annotated.

a) Das Feld Benutzerdefinierter Text, das ich hinzugefügt habe, kann ich nicht an die Instanz anhängen. Alle Instanzen desselben Bildes teilen diesen Wert.

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

The Wordpress image details screen, annotated.

c) Dies zeigt die gleichen Anzeigeeinstellungen wie im vorherigen Bildschirm, jedoch wird dies anders dargestellt, wenn Sie in Wordpress 3.9 auf den "Stift" oben auf einem Bild klicken. Beachten Sie, dass die von attachment_fields_to_edit angegebenen benutzerdefinierten Optionen auf diesem Bildschirm überhaupt nicht verfügbar sind.

Auch wenn ich nicht genau weiß, wie das Backbone funktioniert oder was die besten Methoden zum Ändern der wp.media-Objekte sind, bin ich sowohl mit PHP, Js als auch mit dem Suchen nach Antworten ziemlich kompetent. Aber dieser hat mich seit ein paar Tagen verblüfft, so dass jede Hilfe sehr geschätzt wird.

Danke fürs Lesen!

10
isNaN

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 Bildunterschrift (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 checken Sie den generierten HTML-Code aus.

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 Medien-Modal 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 Titel, falls vorhanden. Dieser Code wird an der richtigen Stelle im TinyMCE-Editor eingefügt (über den Tab "Text" auschecken).

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

TinyMCE view of the image

Wenn Sie also einige benutzerdefinierte Daten hinzufügen möchten (nennen Sie es kein benutzerdefiniertes Feld, da es nicht an einen Anhang angehängt ist), müssen Sie es in diesen HTML-Code einfügen und dann die Ansicht ändern, damit Sie diese Daten visuell ändern 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 so 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, mit dem ein neues Skript auf der Nachbearbeitungsseite in die Warteschlange gestellt wird.

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 so 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:

Responsive option in select sizes dropdown list

6