figure Archive - Technik Tipps und Tricks

LOGO

Wie schon in diesem Beitrag erwähnt, ist es möglich mit dem integrierten, visuellen Editor Bilder mit einer Beschriftung in die Seite einzufügen. Es ist auch möglich diese Beschriftung mit den HTML-Formatierungstags wie <b>, <i>, <em>, <small>, <strong> usw. zu versehen. Es funktioniert sogar ganz gut und ist eine schnelle und einfache Lösung das Textaussehen zu verändern. Hat man aber höhere Anschprüche auf das Design gelegt und möchte auf die Tag-Attributen wie style oder class zugreiffen um zum Beispiel den Text in der rechten Ecke des Bildes anzuzeigen, kann diese Methode zum Problem werden. WordPress reagiert auf solche Einträge in dem Editor-Beschriftungsfeld des Bildes mit unerwarteten und unkontolierten Darstellungsergebnissen.

Wie wird ein Bild mit einer Beschriftung von dem Editor hinzugefügt?

Fügt man das Bild aus der Medienbibliothek über den “Medien hinzufügen” – Button ein und wechselt zur Textansicht, sind vorerst alle Tags, Elemente, Attributen, Styles usw. als nativer HTML-Code erstellt.

<a href="http://www.technik-tipps-und-tricks.de/wp-content/uploads/2016/06/TTT_7.gif" target="_blank" rel="noopener">
    <img class="aligncenter wp-image-145 size-thumbnail" src="http://www.technik-tipps-und-tricks.de/wp-content/uploads/2016/06/TTT_7-150x150.gif" alt="" width="150" height="150" />
</a>

Trägt man aber die Bildbeschriftung mit ein, sieht die Sache schon anders aus. Der ganze HTML-Code wird in einem caption-Shortcode eingeschlossen.

[‍caption id="attachment_145" align="aligncenter" width="150"]{...der HTML-Code von oben...} LOGO[‍/caption]

Der Shortcode caption erlaubt fünf Attribute:

id – eindeutige Bild-Container-ID
align – die CSS-Klasse die den ganzen Bild-Container mit der Beschriftung auf der Seite ausrichtet. Standardklasse ‘alignnone’. Akzeptiert ‘alignleft’, ‘aligncenter’, alignright’, ‘alignnone’
width – die Breite des Bild-Containers
caption – der Beschriftungstext (kann hier oder im Shortcode-Content eingetragen werden)
class – zusätzlichen CSS-Klassen für den Bild-Container-Style

Als Rückgabe wird der HTML-Code für das Bild mit der Beschriftung geliefert.

Die Funktion, die den caption-Shortcode auflöst befindet sich in der Datei: /www/wp-includes/media.php in der Zeile 1512 (WordPress Version 4.9.1):


function img_caption_shortcode( $attr, $content = null ) {
	if ( ! isset( $attr['caption'] ) ) {
		if ( preg_match( '#((?:<a [^>]+>\s*)?<img [^>]+>(?:\s*</a>)?)(.*)#is', $content, $matches ) ) {
			$content = $matches[1];
			$attr['caption'] = trim( $matches[2] );
		}
	} elseif ( strpos( $attr['caption'], '<' ) !== false ) { $attr['caption'] = wp_kses( $attr['caption'], 'post' ); } $output = apply_filters( 'img_caption_shortcode', '', $attr, $content ); if ( $output != '' ) return $output; $atts = shortcode_atts( array( 'id' => '',
		'align'	  => 'alignnone',
		'width'	  => '',
		'caption' => '',
		'class'   => '',
	), $attr, 'caption' );

	$atts['width'] = (int) $atts['width'];
	if ( $atts['width'] < 1 || empty( $atts['caption'] ) )
		return $content;

	if ( ! empty( $atts['id'] ) )
		$atts['id'] = 'id="' . esc_attr( sanitize_html_class( $atts['id'] ) ) . '" ';

	$class = trim( 'wp-caption ' . $atts['align'] . ' ' . $atts['class'] );

	$html5 = current_theme_supports( 'html5', 'caption' );
	// HTML5 captions never added the extra 10px to the image width
	$width = $html5 ? $atts['width'] : ( 10 + $atts['width'] );

	$caption_width = apply_filters( 'img_caption_shortcode_width', $width, $atts, $content );

	$style = '';
	if ( $caption_width ) {
		$style = 'style="max-width: ' . (int) $caption_width . 'px" ';
	}

	if ( $html5 ) {
		$html = '


<figure ' . $atts['id'] . $style . 'class="' . esc_attr( $class ) . '">'
		. do_shortcode( $content ) . '


<figcaption class="wp-caption-text">' . $atts['caption'] . '</figcaption>


</figure>



';
	} else {
		$html = '


<div ' . $atts['id'] . $style . 'class="' . esc_attr( $class ) . '">
'
		. do_shortcode( $content ) . '

' . $atts['caption'] . '
</div>



';
	}

	return $html;
}

Erläuterung zum Quellcode:

Zeilen 1513 bis 1520: Beschriftungstext aus dem Shortcode Content oder der caption-Attribute holen.

Der Beschriftungstext kann als caption-Shortcode-Attribute oder Shortcode-Content angegeben werden. Die caption-Shortcode-Attribute wird bevorzugt.

Zeilen 1522 bis 1524: Benutzerdefinierte Filter-Funktionen einbeziehen.

Hier können benutzerdefinierte und registrierte Filter-Funktionen den HTML-Code liefern und die weitere Erstellung durch den Shortcode abbrechen. Mehr dazu weiter unten.

Zeilen 1534 bis 1536: Nur den Bild/Link-Content ausgeben.

Ist die Container-Breite kleiner als 1 Pixel oder die Beschriftung nicht eingetragen, wird nur der Shortcode-Content (Bild und Link ohne Beschriftung) ausgegeben.

Zeilen 1538 bis 1539: ID, falls vorhanden, auf gültige Zeichen überprüfen.

Zeile 1541: Die CSS-Klassen für das Container-Element zusammenführen.

Hier werden die Namen der CSS-Klassen in einen String zusammengefasst. Die wp-caption-Klasse ist standardmäßig immer dabei, die anderen kommen aus den align– und class-Shortcode-Attributen.

Zeile 1543: Die HTML 5 Ünterstützung ermitteln.

Zeilen 1545 bis 1547: Die Container-Breite ermitteln.

Zeilen 1549 bis 1552: Container-Element-Style erstellen.

Hier wird nur die maximale Breite des Containers festgelegt.

Zeilen 1554 bis 1560: HTML-Code erstellen.

Bei HTML 5 wird ein figure– sonst ein div-Container erstellt und die id, style und class-Attributen hinzugefügt. Danach folgen die Link- und Image-Elemente. Bei HTML 5 wird die Bildbeschriftung mit figcaption, sonst mit einem Absatztext p-Element angehangen und der Container geschlossen.

Warum kann man im Editor den Style einer Beschriftung nicht ändern?

In der Zeile 1556 bzw. 1559 der oben gezeigten Shortcode-Funktion kann man erkennen, dass die Attributte der Bildbeschriftungselemente figcaption und p festgelegt worden sind und der Shortcode nur den Inhalt, nicht aber den Style beeinflussen kann. Ein individuelles Hinzufügen von CSS-Klassen oder zusätzlichen Attributen ist somit nicht möglich. Die Anpassungen in den wp-caption und wp-caption-text CSS-Klassen haben eine globale Auswirkung auf alle Bild-Container der Webseite.

Der HTML-Code, der in die Seite eingefügt wird, sieht also folgendermassen aus:

ab HTML5





<figure id="attachment_145" style="max-width: 150px" class="wp-caption aligncenter custom-caption">
	<a href="http://www.technik-tipps-und-tricks.de/wp-content/uploads/2016/06/TTT_7.gif" target="_blank" rel="noopener">
		<img class="aligncenter wp-image-145 size-thumbnail" src="http://www.technik-tipps-und-tricks.de/wp-content/uploads/2016/06/TTT_7-150x150.gif" alt="" width="150" height="150" />
	</a>



<figcaption class="wp-caption-text">LOGO</figcaption>



</figure>

HTML4





<div id="attachment_145" style="max-width: 150px" class="wp-caption aligncenter custom-caption">
	<a href="http://www.technik-tipps-und-tricks.de/wp-content/uploads/2016/06/TTT_7.gif" target="_blank" rel="noopener">
		<img class="aligncenter wp-image-145 size-thumbnail" src="http://www.technik-tipps-und-tricks.de/wp-content/uploads/2016/06/TTT_7-150x150.gif" alt="" width="150" height="150" />
	</a>
	

LOGO

</div>

Wie kann man auf den Bildbeschriftung-Style vom Editor aus zugreifen?

Es gibt eigentlich nur vier bedingt anwendbare Varianten den Style der Beschriftung anzupassen. Eine davon hat eine globale Auswirkung.

Die CSS-Klasse wp-caption-text in dem benutzerdefinierten CSS-Style anpassen. Der Style gilt für alle Beschriftungen der ganzen Webseite. Je nach dem was man erreichen will, kann es als Vor- oder Nachteil angesehen werden.

Beispiel:

WordPress ⇒ Admin ⇒ Design ⇒ Benutzerdefiniertes CSS:
```
.wp-caption-text {
    text-align: right;
    color: green;
    font-size: 70%; 
}
```
Den Shortcode im Text-Editor manuell mit dem HTML-Code ersetzen.
Vorteil: Volle Kontrolle über den ganzen Bild-Container. Individuelle Styles möglich.
Nachteil: Muss immer manuell per Hand im Text-Editor erstellt werden.

Beispiel:
1. Ein Bild aus der Medien-Bibliothek importieren und beim Einfügen anpassen und mit einer Beschriftung versehen.
2. Die Seite im Vorschau laden.
3. Die Vorschauseite im Browser als Text anzeigen lassen (z.B. Mozilla: Menü ⇒ Entwickler Werkzeuge ⇒ Seitenquelltext anzeigen).
4. In dem Vorschauseitenquelltext nach der caption-Shortcode ID suchen.
5. Den ganzen figure bzw. div-Container kopieren.
6. Den caption-Shortcode im WordPress-Editor mit dem kopierten HTML-Code ersetzen.
7. figcaption-Style anpassen.
HTML5 Muster:
```
<figure id="" style="max-width: 150px" class="wp-caption aligncenter custom-caption">
    <a href="link_URL" target="_blank" rel="noopener">
        <img class="aligncenter size-thumbnail" src="image_URL" alt="" width="150" height="150" />
    </a>



<figcaption class="wp-caption-text custom-caption-text">Beschriftungstext</figcaption>



</figure>
```
HTML4 Muster:
```
<div id="" style="max-width: 150px" class="wp-caption aligncenter custom-caption">
    <a href="link_URL" target="_blank" rel="noopener">
        <img class="aligncenter size-thumbnail" src="image_URL" alt="" width="150" height="150" />
    </a>
    

Beschriftungstext

</div>
```
TIPP: Um die Beschriftung über dem Bild anzuzeigen, das figcaption bzw. p – Tag über dem Link/Bild (a, img)-Tag platzieren.

Eine eigene Filter-Funktion erstellen, die in der Zeile 1522 der img_caption_shortcode-Funktion greift und einen angepassten HTML-Code ausgibt.
Vorteil: Eine globale oder lokale Formatierung der Beschriftung. Je nach dem wie die Filter-Funktion implementiert wurde.
Nachteil: Definition zusätzlicher Shortcode-Argumente schlägt im visuellen Editor fehl. Sie werden knallhart entfernt. Es lässt sich mit dieser Methode also nur eine Beschriftung mit einer festen Formatierung erstellen. Ausserdem wird diese Funktion nicht individuell, sondern auf allen auf der Webseite eingefügten caption-Shortcodes ausgeführt. Eine Beschriftung-CSS-Klassen-Angabe in dem Container class-Argument des Shortcodes wäre möglich, wenn sie in der Filter-Funktion korrekt extrahiert würde. Zum Beispiel durch eine Konvention, alle CSS-Klassen mit dem Prefix ext- gehören zum (Extended) Caption-Text-Style, die restlichen zum Container-Style.

Beispiel:

Dem caption-Shortcode Argument class werden zusätzliche CSS-Klassen mit dem Namensprefix ctc- übergeben. Die Filter-Funktion extrahiert diese Klassen für den Beschriftungs-, alle anderen für den Container-Style.

Filter-Plugin:

<?php /* Plugin Name: Caption Shortcode Filter Description: This plugin extends the WordPress  shortcode with the possibility of add style classes for the caption text. Use CSS-Class prefix 'ctc-' for capion text classes. Version: 1.0.0 Author: alexwatermann Author URI: http://www.technik-tipps-und-tricks.de/ */ function aas_img_caption_shortcode_filter( $a, $attr, $content = null ) { /* extract shortcode arguments */ $atts = shortcode_atts( array( 'id' => '',
        'align'   => 'alignnone',
        'width'   => '',
        'caption' => '',
        'class'   => '',
    ), $attr, 'caption' );
    
    /* check min container width and caption availability */
    $atts['width'] = (int) $atts['width'];
    if ( $atts['width'] < 1 || empty( $atts['caption'] ) )
        return $content;

    /* validate container id */
    if ( ! empty( $atts['id'] ) )
        $atts['id'] = 'id="' . esc_attr( sanitize_html_class( $atts['id'] ) ) . '" ';
    
    /* extract caption text classes from container classes */
    $class = ''; //container classes
    $caption_class = ''; //caption text classes
    $all_classes = explode(" ", $atts['class']);
    
    foreach($all_classes as $classname){
        if (strpos($classname, 'ctc-') === 0){
            $caption_class .= trim($classname) . ' ';
        } else {
            $class .= trim($classname) . ' ';
        }      
    }
    
    $class = trim( 'wp-caption ' . $atts['align'] . ' ' . $class );
    $caption_class = trim( 'wp-caption-text ' . $caption_class );
    
    /* check for HTML 5 support */
    $html5 = current_theme_supports( 'html5', 'caption' );
    // HTML5 captions never added the extra 10px to the image width
    $width = $html5 ? $atts['width'] : ( 10 + $atts['width'] );

    $caption_width = apply_filters( 'img_caption_shortcode_width', $width, $atts, $content );

    /* make style for the root container */
    $style = '';
    if ( $caption_width ) {
        $style = 'style="max-width: ' . (int) $caption_width . 'px; ' . $atts['style'] . '" ';
    }
    
    /* create HTML code */
    if ( $html5 ) {
        $html = '


<figure ' . $atts['id'] . $style . 'class="' . esc_attr( $class ) . '">'
        . do_shortcode( $content ) . '


<figcaption class="' . esc_attr( $caption_class ) . '">' . $atts['caption'] . '</figcaption>


</figure>



';
    } else {
        $html = '


<div ' . $atts['id'] . $style . 'class="' . esc_attr( $class ) . '">
'
        . do_shortcode( $content ) . '

' . $atts['caption'] . '
</div>



';
    }

    return $html;
}
/* img_caption_shortcode function hook */
add_filter( 'img_caption_shortcode','aas_img_caption_shortcode_filter', 10, 3);
?>

Die Datei /www/wp-content/plugins/caption-shortcode-filter/caption-shortcode-filter.php wie oben erstellen und im Admin ⇒ Plugins aktivieren.
Jetzt kann man eine benutzerdefinierte CSS-Klasse erstellen und dem caption-Shortcode class-Argument anhängen.

figcaption.ctc-caption-text {
	font-size: 60%;
	color: red;
	font-style: italic;
	text-align: right;	
	padding-right: 5px;
}

und im Editor-Textansicht:

[‍caption id="attachment_145" align="aligncenter" width="150" class="ctc-caption-text"]{...der HTML-Content...} Beschriftung[‍/caption]

Eigenen Shortcode-Plugin schreiben, der auch die Beschriftung-Style-Parameter entgegen nimmt.
Vorteil: Volle und individuelle Kontrolle über den Bild-Container.
Nachteil: Der Shortcode muss auch manuell eingegeben werden. Ausser man baut dafür ein eigenes Widget oder erweitert das visuelle tinyMCE-Editor-Widget.

Shortcodes brauchen länger als reine HTML-Codes um im Browser aufgebaut zu werden. Viele Shortcodes auf einer Seite können sich auf die Performance auswirken. Meine persönlich bevorzugte Methode ist die manuelle HTML-Code Eingabe. Außer den Style anzupassen macht es nicht viel Arbeit den Code aus der Browser-Vorschauquellcode-Ansicht zu kopieren.

« WordPress

War diese Seite für dich informativ? Hat sie dir gefallen und geholfen?

Dann unterstütze die Weiterentwicklung mit einer kleinen Spende!

Die Spenden werden für die Lizenzen sowie neue Hard- und Software verwendet, die für weitere Projekte auf dieser Webseite eingesetzt werden.

BewertungKommentar

Facebook

Google

Twitter

Schlagwort: figure

WordPress: Bildbeschriftung formatieren und ausrichten

WordPress: Bildbeschriftung formatieren

Wie wird ein Bild mit einer Beschriftung von dem Editor hinzugefügt?

Erläuterung zum Quellcode:

Warum kann man im Editor den Style einer Beschriftung nicht ändern?

Wie kann man auf den Bildbeschriftung-Style vom Editor aus zugreifen?

Beispiel:

Beispiel:

Beispiel: