Ajout d'options supplémentaires à l'occurrence d'une image. (Paramètres d'affichage des pièces jointes)

10

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 sois tombé sur 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 "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 Media Manager, lors de la sélection / 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. Toutefois, ces champs sont associés à l'image elle-même (ou à la pièce jointe d'image post object si vous voulez), donc si j'avais deux occurrences de la même image sur une page, elles partageraient la même valeur de mon champ personnalisé.

a)LechampTextepersonnaliséquej'aiajouté,jeneparvienspasàl'attacheràl'instance.Touteslesoccurrencesdelamêmeimagepartagentcettevaleur.

b)C’estledomainedanslequeljevoudraisajouterdesoptions,cartoutsembleicisuivrechaqueinstance.

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 comprends pas tout à fait comment fonctionne le backbone, ni 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 me laisse perplexe depuis quelques jours maintenant, toute aide est grandement appréciée.

Merci d'avoir lu!

    
posée isNaN 18.04.2014 - 18:08

1 réponse

6

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 à l'aide du bouton "Ajouter un média":

  1. Lorsque vous cliquez sur "Insérer dans une publication", les données sont extraites du modal Médias 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. Si il y en a un. Ce code est inséré au bon endroit dans l’éditeur TinyMCE (consultez-le via l’onglet "Texte").

  2. Dans l'onglet "Visual", 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 d’autres paramètres, sans toucher au code HTML.

Donc,sivoussouhaitezajouterdesdonnéespersonnalisées(n'appelezpascechamppersonnalisécariln'estattachéàaucunepublicationdepiècejointe),vousdevrezl'insérerdanscecodeHTML,puismodifierlavuepourpermettredelamodifier.cesdonnéesvisuellement.Sijecomprendsbienvotrequestion,voussouhaitezajouterdesdonnéesquipositionnerontl'imagedemanièrespécifiquesurlapage.Vouspouvezutiliseruneclassepersonnaliséepourcela.

VoicilecodeHTMLgénéré:

<imgclass="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 voudriez avoir un choix "réactif" dans la liste déroulante taille qui donnerait au code l'aspect suivant:

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

Voici comment procéder: créez un plug-in qui va mettre 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' ));
    }
}

customView.js devrait alors 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:

    
réponse donnée Fabien Quatravaux 18.08.2014 - 18:17

Lire d'autres questions sur les étiquettes