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

J'essaie de construire un plugin réutilisable simple pour la présentation d'images dans Wordpress 3.9, et il semble que j'ai heurté un mur de briques.

Je voudrais 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 "Responsive" qui désactive (grise) la liste déroulante de la taille de l'image, ou les options pour les positions de page fixes, etc.

Dans le Gestionnaire de médias lors de la sélection / remplacement d'une image, j'ai pu ajouter des champs personnalisés à l'aide de attachment_fields_to_editet de ses filtres frères, mais ces champs se rattachent à l'image elle-même (ou à l'objet de publication de la pièce jointe si vous voulez), donc si j'avais deux instances de la même image sur une page, elles partageraient la même valeur de mon champ personnalisé.

a) Le champ Texte personnalisé que j'ai ajouté, je ne peux pas le joindre à l'instance, toutes les instances de la même image partagent cette valeur.

b) C'est le domaine où je voudrais ajouter des options, car tout ici semble suivre chaque instance.

c) Cela montre 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" en haut d'une image dans Wordpress 3.9. Notez que les options personnalisées fournies par attachment_fields_to_editne sont pas du tout présentes sur cet écran.

Même si je ne me suis pas vraiment expliqué comment fonctionne le backbone, ou quelles sont les meilleures pratiques pour modifier les objets wp.media, je suis assez compétent avec php, js et googler pour obtenir des réponses. Mais celui-ci m'a bloqué depuis quelques jours maintenant, donc toute aide est grandement appréciée.

Merci d'avoir lu!

Vous avez parfaitement raison sur l'analyse du problème, même si les termes que vous employez sont un peu déroutants. Il n'y a rien de tel qu'une "instance de l'image": une fois que vous avez inséré une image dans un article, la modification du titre ou de la légende de l'image d'origine (via le menu Médias par exemple) ne modifiera pas l'image insérée dans l'article. Pour vous convaincre, cliquez sur l'onglet "Texte" et consultez 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 pour publier", les données sont extraites du modal Media pour générer du code HTML: <img>balise avec la source correcte en fonction de la taille que vous choisissez, titre comme texte alternatif et légende s'il y en a un. 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 vous permet de redimensionner l'image et de modifier visuellement certains autres paramètres, sans toucher au code HTML.

Donc, si vous souhaitez ajouter des données personnalisées (ne l'appelez pas champ personnalisé car il n'est attaché à aucune publication de 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 d'une 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 de 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 post-édition.

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 :