web-dev-qa-db-fra.com

Légende dans la page ajoutant 10px non désirés à la largeur

J'essaie de créer une image avec une légende dans une page avec laquelle je travaille. Dans les options d'image, je l'ai aligné à droite, avec une largeur d'image de 220. Sans la légende, je n'ai aucun problème, mais avec l'ajout de la légende, il ajoute un wrapper de div avec une largeur de style en ligne de 230px. La seule façon de résoudre ce problème consiste à définir manuellement la largeur dans les options d’image à 210px, ce qui donne ensuite la largeur en ligne à 220px (il ne fait qu’ajouter 10px à la valeur).

Comment puis-je empêcher l'ajout de ces 10 pixels supplémentaires à la largeur du style en ligne?

imagespagescaptions
2
Dave Hunt

Voici ce que vous pouvez faire. Au début de la fonction d'exécution du shortcode, un filtre vous permettra de détourner les légendes. Le renvoi d'une valeur non vide arrêtera l'exécution du shortcode. Ainsi, si vous traitez simplement le shortcode comme vous le souhaitez et renvoyez ce résultat, vous pouvez vous débarrasser de la saturation 10px du remplissage en ligne. Mettre quelque chose comme ceci dans le fichier functions.php de votre thème ou dans un plugin fonctionnera:

function wpse14305_img_caption( $empty_string, $attributes, $content ){
  extract(shortcode_atts(array(
    'id' => '',
    'align' => 'alignnone',
    'width' => '',
    'caption' => ''
  ), $attributes));
  if ( empty($caption) )
    return $content;
  if ( $id ) $id = 'id="' . esc_attr($id) . '" ';
  return '<div ' . $id . 'class="wp-caption ' . esc_attr($align) . '">' . do_shortcode( $content ) . '<p class="wp-caption-text">' . $caption . '</p></div>';
}

add_filter( 'img_caption_shortcode', 'wpse14305_img_caption', 10, 3 );
4
John P Bloch

Depuis 3.7, il existe un filtre permettant de modifier directement la largeur de la division d'emballage. Cela corrigera les 10 pixels supplémentaires et ne laissera pas la légende s'étendre au-delà de la largeur de l'image (contrairement à width: auto! Important).

function wp456_img_caption_width( $width, $atts, $content){
    //by default 10 is added if image caption
    return $width - 10;
 }

add_filter( 'img_caption_shortcode_width', 'wp456_img_caption_width', 10, 3 );
1
Bridget

J'aurais tendance à aborder cette question différemment de John - sa solution implique la duplication des éléments internes de la fonction img_caption_shortcode(), qui a été modifiée dans les mises à jour de Wordpress depuis que cette solution a été ajoutée. À la place, vous pouvez vous connecter aux paramètres de code court transmis au code de génération de légende et soustraire simplement 10 pixels de la largeur pour contrecarrer l'action de Wordpress:

add_filter('shortcode_atts_caption', 'fixExtraCaptionPadding');

function fixExtraCaptionPadding($attrs)
{
    if (!empty($attrs['width'])) {
        $attrs['width'] -= 10;
    }
    return $attrs;
}
0
pospi

Il existe également une solution CSS simple pour remplacer le style en ligne de WordPress.

.wp-caption {
    display: table-cell;
    width: auto !important;
}

Si vous définissez la largeur sur auto sur un élément de bloc, sa largeur sera agrandie pour remplir l'espace disponible, ce qui n'est probablement pas ce que vous souhaitez, mais définir display: table-cell entraîne le redimensionnement automatique de div en fonction du contenu.

En tant qu'élément table-cell, wp-caption div se redimensionne automatiquement comme s'il s'agissait d'un bloc en-ligne, mais il se comporte comme un élément de bloc dans le contenu qui le suit, même le contenu en ligne sans conteneur est restitué sous le div. et pas sur la même ligne, comme ce serait le cas s'il s'agissait d'un inline-block.

(Le !important est nécessaire car le style en ligne remplace la feuille de style.)

Je n'ai pas réussi à trouver une description définitive de la façon dont une cellule de table css est censée se comporter, mais je l'ai testé dans Internet Explorer (y compris IE8 sous WinXP), Firefox, Chrome et Opera, et j'ai trouvé une cohérence complète.

0
WebSmithery