web-dev-qa-db-fra.com

Ajouter plus d'options à l'instance d'une image. (Paramètres d'affichage des pièces jointes)

J'essaie de créer un simple plug-in réutilisable pour la présentation d'images dans Wordpress 3.9, et il semble que je me suis heurté à un mur de briques.

J'aimerais pouvoir ajouter quelques options à l'instance de l'image. (Les détails sous "Paramètres d'affichage des pièces jointes"). Comme une case à cocher qui dit "Réactif" qui désactive (grise) la liste déroulante de la taille de l'image, ou des options pour les positions de page fixes, etc.

Dans Media Manager, lors de la sélection/du remplacement d'une image, j'ai pu ajouter des champs personnalisés à l'aide de attachment_fields_to_edit et de ses filtres frères, mais ces champs sont associés à l'image elle-même (ou à l'objet de publication en pièce jointe si vous préférez), ainsi, si j'avais deux occurrences de la même image sur une page, elles partageraient la même valeur de mon champ personnalisé.

The wordpress replace image screen, annotated.

a) Le champ Texte personnalisé que j'ai ajouté, je ne parviens pas à l'attacher à l'instance. Toutes les occurrences de la même image partagent cette valeur.

b) C’est le domaine dans lequel je voudrais ajouter des options, car tout semble ici suivre chaque instance.

The Wordpress image details screen, annotated.

c) Ceci affiche les mêmes paramètres d'affichage que dans l'écran précédent, mais il est présenté différemment lorsque vous cliquez sur le "crayon" au-dessus d'une image dans Wordpress 3.9. Notez que les options personnalisées données par attachment_fields_to_edit ne sont pas du tout présentes sur cet écran.

Même si je ne connais pas bien le fonctionnement de Backbone ni les meilleures pratiques pour modifier les objets wp.media, je suis assez compétent en php, js et en recherchant des réponses. Mais celui-ci me laisse perplexe depuis quelques jours maintenant, toute aide est grandement appréciée.

Merci d'avoir lu!

plugin-developmentmedia-librarymedia-settings
10
isNaN

Vous avez parfaitement raison en ce qui concerne l’analyse de la question, même si les termes que vous utilisez sont un peu déroutants. "Une instance de l'image" n'existe pas: une fois que vous avez inséré une image dans une publication, modifier le titre ou la légende de l'image d'origine (via le menu Multimédia, par exemple) ne modifiera pas l'image insérée dans la publication. Pour vous convaincre, cliquez sur l'onglet "Texte" et extrayez le code HTML généré.

Voici ce qui se passe lorsque vous insérez une image avec le bouton "Ajouter un média":

  1. Lorsque vous cliquez sur "Insérer dans le message", les données du modal Média sont générées pour générer du code HTML: balise <img> avec la source correcte en fonction de la taille choisie, titre en tant que texte de remplacement et légende, le cas échéant. Ce code est inséré au bon endroit dans l'éditeur TinyMCE (vérifiez-le via l'onglet "Texte")

  2. Dans l'onglet "Visuel", une "vue" est créée pour représenter l'image dans l'éditeur visuel. Cette vue affiche l'image et deux boutons: éditer et supprimer. Cette vue est ce qui vous permet de redimensionner l’image et de modifier visuellement d’autres paramètres, sans toucher au code HTML.

TinyMCE view of the image

Donc, si vous souhaitez ajouter des données personnalisées (n'appelez pas ce champ personnalisé car il n'est pas attaché à une publication en pièce jointe), vous devrez l'insérer dans ce code HTML, puis modifier la vue pour permettre de modifier visuellement ces données. . Si je comprends bien votre question, vous souhaitez ajouter des données qui positionneront l'image de manière spécifique sur la page. Vous pouvez utiliser une classe personnalisée pour cela.

Voici le code HTML qui a été généré:

<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" />

Et vous aimeriez avoir un choix "réactif" dans la liste déroulante taille qui donnerait au code l'apparence suivante:

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

Voici comment y parvenir: créez un plugin qui mettra en file d'attente un nouveau script sur la page de modification.

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' ));
    }
}

Ensuite, customView.js devrait ressembler à ceci:

(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, _));

Et voici le résultat :

Responsive option in select sizes dropdown list

6
Fabien Quatravaux