J'essaie de créer une bibliothèque multimédia dans laquelle les utilisateurs peuvent choisir des images extraites de dossiers personnalisés, dont ils peuvent spécifier le dossier de base. Je récupère les images correctes, mais le modèle spécifié n'est pas appliqué aux vignettes. Il trouve la légende (voir l'encadré lorsque img est sélectionné)
Au lieu d'appliquer le modèle souhaité, il est indiqué
<div class="filename"><div></div></div>
En fait, je n'ai même pas besoin d'un modèle personnalisé, je serais heureux que l'image apparaisse comme dans la bibliothèque standard, mais je n'arrive pas à obtenir le résultat correct.
Dans le fichier media-folder-management.js j'ai ceci
var MfmView = Backbone.View.extend({
tagName: "li",
className: "mfmimage attachment",
template: wp.media.template('mfmimage'),
render: function(){
this.$el.html(this.template(this.model.toJSON()));
return this;
}
});
Et dans media-folder-management.php il y a
public function print_media_templates() {
if(!$_POST['id']){
$this->printInit();
}
?>
<script type="text/html" id="tmpl-mfmimage">
<p class="test"></p>
<img id="{{ data.id }}" class="<# if ( typeof(data.folder) !== 'undefined' ) { #>folder<# } else { #>image<# } #>" src="{{ data.thumbnail }}" alt="{{ data.caption }}" title="{{ data.caption }}" data-full="{{ data.full }}" data-link="{{ data.link }}" />
<# if ( typeof(data.folder) !== 'undefined' ) { #>
<p>{{ data.caption }}</p>
<# } #>
<a class="check" id="check-link-{{ data.id }}" href="#" title="Deselect"><div id="check-{{ data.id }}" class="media-modal-icon"></div></a>
</script>
<?php
}
L'objectif est de conserver la fonctionnalité WP (image sélectionnée, création de galerie, insertion dans une page/publication), mais avec une structure de dossiers plus structurée (le client disposant déjà d'une structure de bibliothèque d'images complète).
Les prochaines étapes seraient:
J'espère que quelqu'un pourra m'aider à résoudre ce problème. Je ne connais pas encore Backbone.js.
Merci d'avance!
Ok, j'ai déjà compris certaines choses: je ne rendais rien à l'image rendue
Dans le javascript j'ai une fonction de rendu
media.view.AttachmentsBrowser = media.view.AttachmentsBrowser.extend({
render: function(){
var that = this;
if(this.collection){
if(this.collection.models.length > 0){
this.clearImages();
_.each(this.collection.models, function (item){
//old way: that.renderImage(item);
//now:
this.$el.find('#lastli').before(that.renderImage(item));
}, this);
}
}
}
});
Évidemment, mes images ne montraient pas ...
Mais comme je n'ai pas vraiment besoin d'un modèle, j'ai supprimé ce code, donc le tmpl standard est pris.
Ma quête continue cependant, pour l'instant j'ai du mal à remplir l'objet de données utilisé dans le modèle de média, mais je poserai une autre question à ce sujet, car il s'agit d'un autre problème. Si vous êtes intéressé, pouvez-vous trouver la question ici: pièce jointe modèle de données de modèle de média (data.size.url)