Zuerst ein Icon erstellen und auf den Server hochladen und beispielsweise in einem Ordner für die Bilder der Layout-Dateien ablegen.
Pfad z.B. : tl_files/images/layout/magnifier.png
Ich beschreibe hier den Weg, wenn man das Bild NICHT als eigenständiges Element, sondern über die Option "Bild " hinzufügt.
Also:
BE
=> Artikel
=> Artikel auswählen
=> Neues Element hinzufügen
=> Elementtyp Text.
Ganz unten dann Checkbox “Ein Bild hinzufügen”
=> Bild auswählen und Checkbox
=>“Großansicht” aktivieren.
Wenn über diese Methode ein Bild eingefügt wird, wird das Template ce_text_image_full_size verwendet, welches einer kleinen Änderung bedarf.
Im BE unter dem Menüpunkt “templates” das template “ce_text_image_full_size” auswählen und über TL als Kopie im Ordner templates anlegen lassen.
Das Template öffnen und das image-Tag für die Lupe mit dem richtigen Pfad an zwei Stellen wie folgt einfügen:
PHP-Code:
/*templateänderung an ce_text_image_full_size*/
/*<img id="magnifier" src="tl_files/images/layout/magnifier.png" alt="lupe" /> eingefügt*/
<div class="image_container"<?php if ($this->margin): ?> style="<?php echo $this->margin; ?>"<?php endif; ?>>
<a href="<?php echo $this->href; ?>" rel="lightbox" title="<?php echo $this->alt; ?>"><img id="magnifier" src="tl_files/images/magnifier.png" alt="lupe" /><img src="<?php echo $this->src; ?>"<?php echo $this->imgSize; ?> alt="<?php echo $this->alt; ?>" /></a>
<?php if ($this->caption): ?>
<div class="caption"><?php echo $this->caption; ?></div>
Jetzt noch im css den image_container auf position: relative; setzen und die Lupe über die id absolut darin positionieren.
Code:
div.image_container{position:relative;}
div.image_container img.magnifier{top:5px;left:0px;position:absolute;}
Lesezeichen