it-swarm.com.de

Beschriftung in Seite, die der Breite unerwünschte 10 Pixel hinzufügt

Ich versuche, ein Bild mit einer Beschriftung in einer Seite zu erstellen, mit der ich arbeite. In den Bildoptionen habe ich es richtig ausgerichtet, mit einer Bildbreite von 220. Ohne die Beschriftung habe ich keine Probleme, aber mit der Hinzufügung der Beschriftung fügt es einen Div-Wrapper mit einer Inline-Stilbreite von 230px hinzu. Die einzige Möglichkeit, dies zu beheben, besteht darin, die Breite in den Bildoptionen manuell auf 210px festzulegen. Dadurch wird die Inline-Breite auf 220px erhöht (es werden lediglich 10px zum Wert hinzugefügt).

Wie verhindere ich, dass diese zusätzlichen 10 Pixel zur Breite des Inline-Stils hinzugefügt werden?

2
Dave Hunt

Folgendes können Sie tun. Am Anfang der Shortcode-Ausführungsfunktion für das Front-End befindet sich ein Filter, mit dem Sie die Untertitel entführen können. Wenn Sie einen nicht leeren Wert zurückgeben, wird die Ausführung des Shortcodes gestoppt. Wenn Sie den Shortcode also nur so verarbeiten, wie Sie es möchten, und dieses Ergebnis zurückgeben, können Sie die lästigen 10 Pixel Inline-Auffüllung entfernen. Das Einfügen von etwas Ähnlichem in die functions.php Datei Ihres Themas oder in ein Plugin wird funktionieren:

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

Seit 3.7 gibt es einen Filter, mit dem die Breite des Umhüllungsbereichs direkt geändert werden kann. Dadurch werden die zusätzlichen 10 Pixel korrigiert, und die Beschriftung wird nicht über die Breite des Bildes hinausgehen (im Gegensatz zu 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

Ich würde dies tendenziell anders angehen als John - seine Lösung beinhaltet das Duplizieren der Interna der Funktion img_caption_shortcode(), die in Wordpress-Updates seitdem geändert wurde hinzugefügt. Stattdessen können Sie sich in die Shortcode-Parameter einklinken, die an den Code zur Erzeugung von Untertiteln übergeben wurden, und einfach 10 Pixel von der Breite abziehen, um dem entgegenzuwirken, was Wordpress tut:

add_filter('shortcode_atts_caption', 'fixExtraCaptionPadding');

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

Es gibt auch eine einfache CSS-Lösung, um das Inline-Styling von WordPress zu überschreiben.

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

Das Setzen der Breite auf auto für ein Blockelement würde dazu führen, dass seine Breite vergrößert wird, um den verfügbaren Platz zu füllen, was wahrscheinlich nicht erwünscht ist, aber das Setzen von display: table-cell bewirkt, dass die Größe der div automatisch entsprechend dem Inhalt geändert wird.

Als Tabellenzellenelement wird die Größe der wp-caption div automatisch so angepasst, als wäre sie ein Inline-Block. Sie verhält sich jedoch wie ein Blockelement in dem Inhalt, der danach folgt, selbst Inline-Inhalt ohne Container wird unterhalb der div gerendert und nicht in der gleichen Zeile, als wäre es ein Inline-Block.

(Der !important wird als Inline-Stil benötigt, andernfalls wird das Stylesheet überschrieben.)

Ich habe es nicht geschafft, eine definitive Beschreibung zu finden, wie sich eine CSS-Tabellenzelle verhalten soll, aber ich habe dies in Internet Explorer (einschließlich IE8 unter WinXP), Firefox, Chrome und Opera getestet und eine vollständige Konsistenz festgestellt.

0
WebSmithery