Codeschnipsel: Bilduntertitel an Bildgröße anpassen (umbrechen bei Bedarf)
Eine Bildunterschrift ist ein nützliches Hilfsmittel um Bilder mit ergänzenden Informationen zu versehen, das Copyright zum Bild darzustellen oder wichtige Fakten zu liefern, die aus dem Bild direkt nicht ersichtlich sind.
Bei TYPOlight werden alle Bilder in diesem Konstrukt ausgegeben:
<div class="image_container"> <img ...bildeigenschaften... /> <div class="caption">Bildunterschrift</div> </div>
Der image_container ist dabei immer so breit wie das breitere Element, egal ob Bild oder Bildunterschrift. Wenn alle Bilder an derselben Stelle positoniert werden und immer dieselbe Größe haben kann man die Eigenschaften auch zentral über CSS so steuern, dass der image_container, das dargestellte Bild und die Bildunterschrift denselben Regeln folgen.
Flexibler ist jedoch der Ansatz die Breite des image_containers von der Breite des Bildes abzuleiten. Folgender Code macht eben dies, am Beispiel von news_full.tpl:
<?php if ($this->addImage): ?>
<?php // breite des Bildes rausfinden, auch image_container beschneiden
$width = preg_match('/^ width="([0-9]+)".*/', $this->imgSize, $found);
$width = $found[1];
?>
<div class="image_container"<?php if ($this->margin || $this->float || $width): ?> style="<?php echo $this->margin . $this->float; ?><?php if ($width): ?> width: <?php echo $width;?>px<?php endif; ?>"<?php endif; ?>>
<?php if ($this->fullsize): ?><a href="<?php echo $this->href; ?>" title="<?php echo $this->alt; ?>" rel="lightbox"><?php endif; ?>
<img src="<?php echo $this->src; ?>"<?php echo $this->imgSize; ?> alt="<?php echo $this->alt; ?>" /><?php if ($this->fullsize): ?></a><?php endif; ?>
<?php if ($this->caption): ?>
<div class="caption"><?php echo $this->caption; ?></div>
<?php endif; ?>
</div>
<?php endif; ?>
Neu sind dabei nur die 4 Zeilen:
<?php // Breite des Bildes rausfinden, auch image_container beschneiden
$width = preg_match('/^ width="([0-9]+)".*/', $this->imgSize, $found);
$width = $found[1];
?>
Im image_container ist die Ausgabe von $width ergänzt:
<div class="image_container"<?php if ($this->margin || $this->float || $width): ?> style="<?php echo $this->margin . $this->float; ?><?php if ($width): ?> width: <?php echo $width;?>px<?php endif; ?>"<?php endif; ?>>
Anwendung
Der Code kann an allen Stellen verwendet werden an denen Bilder ausgegeben werden, im Kernsystem von TYPOlight sind das die folgenden Templates.
Content-Elemente:
- ce_accordeon_image.tpl (2 x)
- ce_accordeon_image_fullsize.tpl (2 x)
- ce_accordeon_image_link.tpl (2 x)
- ce_gallery.tpl
- ce_gallery_fullsize.tpl
- ce_hyperlink_image.tpl (Hinweis von TomH, danke dafür)
- ce_image.tpl
- ce_image_fullsize.tpl
- ce_image_link.tpl
- ce_text_image.tpl (2 x)
- ce_text_image_fullsize.tpl (2 x)
- ce_text_image_link.tpl (2 x)
Module:
- news_full.tpl
- news_latest.tpl
- event_default.tpl
- mod_faqreader.tpl
Ein fertiges Beispiel für die ce_text_image.tpl:
<div class="<?php echo $this->class; ?> block"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>>
<?php if ($this->headline): ?>
<<?php echo $this->hl; ?>><?php echo $this->headline; ?></<?php echo $this->hl; ?>>
<?php endif; ?>
<?php // Breite des Bildes rausfinden, auch image_container beschneiden
$width = preg_match('/^ width="([0-9]+)".*/', $this->imgSize, $found);
$width = $found[1];
?>
<?php if ($this->addBefore): ?>
<div class="image_container"<?php if ($this->margin || $this->float || $width): ?> style="<?php echo $this->margin . $this->float; ?><?php if ($width): ?> width: <?php echo $width;?>px<?php endif; ?>"<?php endif; ?>>
<img src="<?php echo $this->src; ?>"<?php echo $this->imgSize; ?> alt="<?php echo $this->alt; ?>" />
<?php if ($this->caption): ?>
<div class="caption"><?php echo $this->caption; ?></div>
<?php endif; ?>
</div>
<?php endif; ?>
<?php echo $this->text; ?>
<?php if (!$this->addBefore): ?>
<div class="image_container"<?php if ($this->margin || $width): ?> style="<?php echo $this->margin ?><?php if ($width): ?> width: <?php echo $width;?>px<?php endif; ?>"<?php endif; ?>>
<img src="<?php echo $this->src; ?>"<?php echo $this->imgSize; ?> alt="<?php echo $this->alt; ?>" />
<?php if ($this->caption): ?>
<div class="caption"><?php echo $this->caption; ?></div>
<?php endif; ?>
</div>
<?php endif; ?>
</div>
Anwendungsbeispiel
Im Template news_full.tpl auf der Seite atom-aktuell.de (als Screenshot), sowie bei der Darstellung des Bilds selbst.
