web-dev-qa-db-fra.com

Besoin d'aide pour créer un filtre pour éditer la sortie de "image_send_to_editor"

Ce que j'essaie de faire est de modifier la sortie de image_send_to_editor afin que je puisse faire en sorte que l’ancre qui entoure l’image ait un classe & rel spécifique.

Je prévois de faire en sorte que chaque image insérée dans un post devienne compatible avec fancybox sans avoir à être dans une galerie ou à utiliser un plugin.

Voici ce que j’ai jusqu’à présent, mais j’ai besoin d’aide pour combler les blancs….

<?php
add_filter( 'image_send_to_editor', 'fancy_capable', 10, 7);
function fancy_capable($html, $id, $alt, $title, $align, $url, $size ) {
// not sure what to do here???
return "$html";
}
?>
imagesfilters
3
Mr.Brown

Dans ce cas, le mieux serait d’utiliser jQuery pour saisir tout lien menant à une image et lui dire d’utiliser fanceybox.

jQuery(document).ready(function($){
    $('a[href$="jpg"], a[href$="png"], a[href$="jpeg"]').fancybox();
});

Si vous souhaitez que cela fonctionne uniquement pour vos zones de contenu de publication, utilisez ceci:

$('.post-content a[href$="jpg"], .post-content  a[href$="png"], .post-content a[href$="jpeg"]').fancybox();

Vous devrez remplacer .post-content par l’élément parent HTML qui enveloppe la zone de contenu.

2
Brian Fegter

C'est en fait assez facile ... le return $html; va juste retourner à l'éditeur tout ce que vous lui envoyez ... afin que vous puissiez faire quelque chose comme ça:

<?php 
       add_filter( 'image_send_to_editor', 'fancy_capable', 10, 7);
       function fancy_capable($html, $id, $alt, $title, $align, $url, $size ) {
           $url = wp_get_attachment_url($id); // Grab the current image URL
           $html = '<a href="' . $url .  '" class="fancybox" rel="your-rel"><img src="..." /></a>';
           return $html;
       }
?>

Vous pouvez également simplement insérer un shortcode (qui est peut-être plus familier pour l'utilisateur) à la place du code HTML ... et laisser ensuite votre shortcode effectuer le travail sur le backend.

<?php 
       add_filter( 'image_send_to_editor', 'fancy_capable', 10, 7);
       function fancy_capable($html, $id, $alt, $title, $align, $url, $size ) {
           $url = wp_get_attachment_url($id); // Grab the current image URL
           $html = '[image src="' . $url .  '" fancybox="true" /]';
           return $html;
       }
?>
2
luckykind

J'ai trouvé des exemples d'utilisation d'expressions régulières pour ajouter des classes au code HTML. Cela fonctionne pour moi:

add_filter('image_send_to_editor', 'add_class_to_image', 10, 8);

avec la fonction suivante:

function add_class_to_image($html, $id, $caption, $title, $align, $url, $size, $alt='') {
    $classes_to_add = 'media-img';
    if (preg_match('/<a.? class=".?">/', $html))
        $html = preg_replace('/(<a.? class=".?)(".\?>)/', '$1 ' . $classes_to_add . '$2', $html);
    else
        $html = preg_replace('/(<a.*?)>/', '$1 class="' . $classes_to_add . '">', $html);
    return $html;
}

Ensuite, dans mon fichier style.css, j'ai stylé le sélecteur a.media-img.

1
Joseph Hansen