Drag & Drop for Post Thumbnails est un plugin qui ajoute une zone de dépôt en glisser/déposer à côté de l’éditeur, en lieu et place de la boîte « Image à la une », un raccourcis bien pratique pour attribuer une image à la une à un article, une page, ou autres contenus personnalisés.
Le but de cet article n’est pas de vous présenter le plugin mais de vous proposer un petit hack pour attribuer un titre à cette image en même temps.
Pour la petite histoire
Je suis en train de réaliser un site pour lequel j’essaie de simplifier au maximum l’administration pour que son propriétaire (n’étant pas familier avec les CMS) puisse poster ses articles sans aucune aide. Ce plugin m’a paru très bien dans ce sens (et je confirme), la personne n’a plus qu’à rentrer le titre de l’article, écrire quelques lignes, glisser une image.
Cependant, il reste un petit défaut. L’image à la une est utilisée dans le thème avec une lightbox, laquelle affiche le titre de l’image. Hors, le titre par défaut de l’image est défini par ses données EXIF, donc le titre affiché risque d’être le nom de l’appareil qui a pris la photo en gros ^^.
Utiliser le titre de l’article
Ce que je vous propose avec ce petit hook, c’est d’utiliser le titre de l’article à la place, et qu’il se mette à jour tout seul lorsque l’image est attachée via ce plugin. Par la même occasion, je vais aussi utiliser ce titre pour l’attribut « alt » de l’image.
Fonctionnement
Le code utilise la fonction du plugin qui attache l’image à l’article : on supprime l’action à laquelle est hookée la fonction, on copie la fonction et on la modifie, puis on la ré-attache à l’action initiale.
Le code est à coller dans le functions.php de votre thème comme d’habitude.
010203040506070809101112131415161718192021222324252627282930313233343536373839
// Take the post title and use it to set image title and alt
if ( is_admin() && function_exists('dragdrop_postthumbnail_attach_image') ) :
remove_action('wp_ajax_attach_image_to_post', 'dragdrop_postthumbnail_attach_image');
add_action('wp_ajax_attach_image_to_post', 'dragdrop_postthumbnail_attach_image_and_title');
function dragdrop_postthumbnail_attach_image_and_title() {
$nonce = $_POST['_ajax_nonce'];
$post_ID = intval($_POST['post_id']);
$image_ID = intval($_POST['thumbnail_id']);
if(! wp_verify_nonce($nonce, "dragdrop_postthumbnail_attach_image-$post_ID")){
die('-1');
}
if ( !current_user_can( 'edit_post', $post_ID ) ){
die( '-1' );
}
if(wp_verify_nonce($nonce, "dragdrop_postthumbnail_attach_image-$post_ID")){
//attach image to post
global $wpdb;
$sql = $wpdb->prepare("UPDATE $wpdb->posts SET post_parent = %d WHERE ID = %d LIMIT 1", $post_ID, $image_ID);
$wpdb->query($sql);
// Set title and alt attribute if post title is available
if ( $post_title = esc_attr(get_post($post_ID)->post_title) ) {
$sql2 = $wpdb->prepare("UPDATE $wpdb->posts SET post_title = %s WHERE ID = %d LIMIT 1", $post_title, $image_ID); // Image title
//$sql2 = $wpdb->prepare("UPDATE $wpdb->posts SET post_title = %s, post_excerpt = %s WHERE ID = %d LIMIT 1", $post_title, $post_title, $image_ID); // Image title + legend
$wpdb->query($sql2);
update_post_meta($image_ID, '_wp_attachment_image_alt', $post_title); // Image alt
}
echo('1');
}
}
endif;
La partie modifiée se situe après $wpdb->query($sql);
. La partie $sql2 = $wpdb->prepare( ... );
attribue le titre. Au-dessous de cette ligne d’ailleurs j’ai ajouté une autre ligne similaire commentée, c’est pour ceux qui souhaiteraient remplir le champ « Légende » de l’image également : commenter la ligne précédente et décommenter celle-ci (il ne doit rester qu’un seul $sql2 = $wpdb->prepare( ... );
).
Le update_post_meta( )
qui suit attribue le « alt ».
Seule précaution à prendre : d’abord remplir le titre de l’article lors de sa création ;)
See ya!
Commentaires
Commentaire de Julio Potier @ BoiteAWeb.
Excellente idée qui emboite le pas sur mon prochain article : « Comment créer un plugin enfant » #lachainewp x)
Commentaire de Greg.
Ha tiens, tu te mets à faire des articles maintenant? :D #troll
En tout cas il me tarde de le lire celui là :)
Commentaire de pjbdes.
Sinon, tu peux aussi supprimer les balises « title » sur les images grâce à quelques lignes de jQuery ;)
Commentaire de Julio Potier @ BoiteAWeb.
Et donc le code ne fonctionne pas en NOJS ;) Pas top :]
Commentaire de Greg.
@pjbdes
Ha oui mais le but était quand même de l’utiliser ;)
Commentaire de Greg.
@Julio
A la fois je me demande comment tu vas faire fonctionner la lightbox en no-js :D
Commentaire de Julio Potier @ BoiteAWeb.
#pacon
Commentaire de Geoffrey @ Geoffrey.Crofte.fr.
Hello,
Pas bête !
J’adopte !
Par contre un développeur de plugin, devra faire attention à ne jamais changer de nom de fonction lors d’une mise à jour d’un plugin, sinon ça invalide le détachement et le rattachement des actions. (si j’ai bien suivi)
Bon, tu fais un contrôle d’existence de la fonction avant, c’est déjà ça :)
Merci Greg.
Commentaire de Julio Potier @ BoiteAWeb.
Jamais vu un développeur modifier le nom de ses fonctions lors d’une mise à jour. Par contre cette tactique ne fonctionne pas sur les fonctions anonymes, forcément …
Commentaire de Geoffrey @ Geoffrey.Crofte.fr.
Alors je ne suis pas développeur : j’ai modifié le nom d’une fonction sur l’un de mes plugins il n’y a pas longtemps car le nom et l’utilité de cette fonction n’étaient plus en accord. (refonte majeure)
Mais c’est peut-être simplement une erreur de ma part, je ne connais pas les règles des dév. :D
Commentaire de Julio Potier @ BoiteAWeb.
Ya une règle à partir du moment ou ta fonction est publique (elle peut être utilisée hors du plugin) comme ti tu crée un « get_my_custom_posts( $args ) » pui demain tu fais « ho non je préfère get_my_cpt( $args ) » bon ça c’est pas bon x)
Là je dirais que si elle est utilisée dans un hook, il faudrait éviter. Et si tu as fait une faute dans un hook, alors ajoute un 2eme hook (comme WordPress à fait ^^) et ne supprime pas le premier car il est peut etre déjà utilisé !
Commentaire de Geoffrey @ Geoffrey.Crofte.fr.
Cela semble tellement logique quand tu le dis :D
Merci pour les conseils ;)
J’ai toujours le réflexe « code propre » où j’ai tendance à virer le superflu, comme en CSS en fait.
*Note à soi-même : CSS != développement.*
Commentaire de GeekPress.
Merci pour la découverte du plugin, il est vraiment énorme :)
Par contre pour le hack, pourquoi ne pas faire la modif en front sur l’image directement => http://www.geekpress.fr/wordpress/astuce/optimiser-referencement-wordpress-images-sans-plugin-130/
Commentaire de Greg.
Salut.
Oui pourquoi pas, mais dans ce cas on n’a plus le choix. Mon astuce, qui n’est pas forcément meilleure ou moins bonne que la tienne, laisse au moins la possibilité de changer ces données dans l’administration.
Une remarque concernant ton astuce,
get_the_title()
n’est pas indiqué dans ce cas. Si le titre de l’article est par exemple – Bonjour « Toi » – ben ça va pas être beau à voir : alt= »Bonjour « Toi » » ;)Mais ça tombe bien, WP a une fonction pour ça : the_title_attribute( array(‘echo’ => 0) )
o/
Commentaire de GeekPress.
Ah merci pour la remarque !
J’ai un petit problème avec le plugin. En fait, je crée différentes tailles d’images en fonction des CPT. Je fais l’ajout de cette manière :
12345
et pour un autre CPT
123456
Comme tu peux le voir, je capte d’abord sur quel CPT on se trouve pour ne pas générer des tailles de miniatures inutiles.
Le truc, c’est qu’avec le plugin, il crée uniquement la version full de l’image :(
Est-ce que tu penses qu’il y a un moyen de lui faire créer les miniatures en respectant les conditions que je viens de montrer ?
Commentaire de Greg.
Je suppose que tu as mis ça directement dans functions.php sans passer par un hook ?
Commentaire de GeekPress.
C’est cela :)
Commentaire de MKA.
Bonjour à tous, tout d’abord merci à l’auteur de ce superbe blog de pour le petit hack bien utile, il fonctionne nickel :D
Je me permet simplement de poser une question compatibilité par rapport à ce plugin, peut-être l’un d’entre vous aura la réponse :)
Je travail actuellement pour un client qui souhaite une compatibilité de son WordPress sous le très mauvais IE 8, l’idée est d’utiliser le plugin pour gagner du temps.
Hors, sous IE (peu importe la version d’ailleurs) le plugin (qui ce limite au bouton parcourir) n’arrive pas à terminer l’ajout de l’image, le script charge bien le fichier sur le serveur mais ne l’ajoute pas à l’article, il continue indéfiniment de m’indiquer le chargement de celle-ci.
Je n’ai pas le moindre problème sous firefox ou chrome, et aucune erreur dans la console. ça n’a pas l’air de provenir d’un conflit avec d’autres plugins, ayant fait l’essai sous une version de wp quasi clean pour le même résultat… Bien étrange… à moins que cela soit normal (?)
Commentaire de Julio Potier @ BoiteAWeb.
Je pense que tu as des mauvais outils et que, forcément, ya quelquechose qui foire. #IE #troll