CE_Image: Bildunterschrift verlinken

**hitman** · 14.08.2010, 07:21

Hallo,

wenn ich ein CE Bild verwende kann ich im Feld "Bildlink-Adresse" einen Link eintragen. Ich möchte aber, dass nicht nur das Bild verlinkt wird, sondern der Text welchen ich in "Bildunterschrift" eintrage automatisch den gleichen Link erhält.

Viele klicken halt nicht nur auf das Bild, sondern z.B. bei einer Produktübersichtsseite auch auf den Text. Kann mir da jemand weiterhelfen?

**Fehrmann** · 14.08.2010, 07:54

Ja das geht recht einfach.

Erstelle unter LAYOUT->TEMPLATES ein neues Template und leite es von ce_image ab. Jetzt haben wir im Ordner Templates eine neue Datei ce_image.tpl die wir bearbeiten.

Dort ändern wir Zeile 17 (sollte mit '<div class="caption">' beginnen ) zu:

Code:

<div class="caption"><?php if ($this->href): ?><a href="<?php echo $this->href; ?>"><?php endif; ?><?php echo $this->caption; ?><?php if ($this->href): ?></a><?php endif; ?></div>

Der Effekt wirkt sich dann aber auf alle Inhaltselemente des Typs Bild aus.

Ist jetzt nicht getestet sollte aber gehen.

Gruss
Fehrmann

**hitman** · 14.08.2010, 08:23

Funktioniert perfekt! Vielen Dank!

**Thanatos** · 23.09.2010, 16:45

Vielleicht kann ich hier kurz einhaken

Ich habe den gleichen Anwendungsfall. Das funktioniert auch super. Aber wenn ich ein Bild einfüge und dies nicht auf eine Seite verlinke sondern nur den Haken bei Großansicht setze, dann wird statt der Lightbox vom Bild, dass entsprechende Bild in einem neuen Fenster bzw. im selben Fenster geöffnet, aber nicht in der Lightbox.
Wie müßte man das mit dem Template anpassen, damit beim Klick auf den Text auch die Lightbox sich öffnet?

**Thanatos** · 24.09.2010, 13:17

Ich hoffe der Thread wird trotz gelöst noch angeklickt, sonst mache ich einen neuen Thread für das Thema auf?

**MacKP** · 24.09.2010, 21:06

Hallo Thanatos,
nein hier lesen die Leute auch so (wobei das gelöst an sich hier nicht gemacht werden sollte, aber das ist was anderes).
Dir antwortet nur keiner, weil dieses Thema jeden 2. Tag beantwortet wird und da glaube ich keiner mehr Lust zu hat.

Aber ich kanns ja mal versuchen:
Hast du eine eigene fe_page.tpl die du benutzt? Also ein egenes Template erstellt?
Dann passe das bitte so an, das da alles wichtige drinn ist wie im Originalen (auch unten wird mootools noch mal aufgerufen).

Oder hast du mediabox und Lightbox im Seitenlyout aktiv? Dann geht das auch nicht.

Das sind so die Standard Dinge (meist auch beides gleichzeitig).

Wenn du das Prob immer noch hast brauchen wir einfach mehr Infos (oder du suchst ersts mal im Forum).

Ein Link wäre dann auch nicht schlecht.

Viele Grüße

**Andreas** · 25.09.2010, 00:20

@macKP

Hi Mark, ich glaube ich weiß, was er meint, wenn er das Template so verändert wie oben beschrieben, dann fehlt ihm ja das Attribut rel="lightbox" bzw. rel="lightbox[alle]" in dem Link. Deswegen öffnet sich die Mediabox wohl nicht.

Eine andere schöne Lösung, bei der man keinen zweiten Link braucht wäre, die Caption komplett in den Link zu legen, also direkt unter das Bild.

<a><img /><span caption></span></a>

Dabei muss man aus dem DIV ein SPAN machen, da Blockelemente in A-Elementen verboten sind.

Wenn man jetzt .image_container a und .image_container img auf display:block setzt, funktioniert der Link auf dem Bild und auf der Caption.

Grüße

**Thanatos** · 25.09.2010, 09:48

@MacKP: Aehm, dass meinte ich nicht!

Ich habe kein eigenes fe_Template, sondern das ce_image-Template wie oben beschrieben geändert und die Lightbox geht nicht mehr.
In der Suche habe ich leider nix darüber gefunden...

@Andreas: Ja, genau das ist mein Problem! Wo ändere ich das jetzt aber oben im Template ab? Ich habe die

Code:

<div class="caption">

wie Du beschrieben hast abgeändert, geht aber nicht, oder mache ich da was falsch? Vielen Dank!

**Andreas** · 25.09.2010, 15:23

Erstmal kommt es drauf an, für was du das haben möchtest. image_container AND caption findet man in folgenden Templates:

\system\modules\calendar\templates\event_full.tpl
\system\modules\faq\templates\mod_faqreader.tpl
\system\modules\frontend\templates\ce_accordion.tp l
\system\modules\frontend\templates\ce_hyperlink_im age.tpl
\system\modules\frontend\templates\ce_image.tpl
\system\modules\frontend\templates\ce_text.tpl
\system\modules\frontend\templates\gallery_default .tpl
\system\modules\frontend\templates\mod_random_imag e.tpl
\system\modules\news\templates\news_full.tpl
\system\modules\news\templates\news_latest.tpl

Am Beispiel von gallery_default.tpl:

PHP-Code:


<?php if ($col->href): ?>

    <a href="<?php echo $col->href; ?>"<?php echo $col->attributes; ?> title="<?php echo $col->alt; ?>">

    <img src="<?php echo $col->src; ?>"<?php echo $col->imgSize; ?> alt="<?php echo $col->alt; ?>" />



<!-- Caption wenn verlinkt -->

<?php if ($col->caption): ?>

    <span class="caption"><?php echo $col->caption; ?></span>

<?php endif; ?>

<!-- Caption wenn verlinkt ENDE -->



    </a>



<?php else: ?>

    <img src="<?php echo $col->src; ?>"<?php echo $col->imgSize; ?> alt="<?php echo $col->alt; ?>" />



<!-- Caption wenn nicht verlinkt -->

<?php if ($col->caption): ?>

    <div class="caption"><?php echo $col->caption; ?></div>

<?php endif; ?>

<!-- Caption wenn nicht verlinkt ENDE-->



<?php endif; ?>

Achtung! HTML-Kommentare, Zeilenumbrüche und Leerzeilen sind nur zur besseren Übersicht von mir eingefügt. Und nicht vergessen nicht das Original zu verändern, sondern eine Kopie im Ordner roots/templates/.

Grüße

ps Keine Ahnung, warum da oben in der Listendarstellung teilweise diese Leerzeichen auftauchen.

**Thanatos** · 25.09.2010, 16:36

Hallo Andreas,
danke für Deine Hilfe. Ich benötige es für die ce_image.tpl
Vermutlich kopiere ich es falsch rein. Mein ce_image.tpl sieht jetzt so aus

Code:

<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; ?>

<div class="image_container"<?php if ($this->margin): ?> style="<?php echo $this->margin; ?>"<?php endif; ?>>
<?php if ($this->href): ?>
<a href="<?php echo $this->href; ?>"<?php echo $this->attributes; ?> title="<?php echo $this->alt; ?>">
<?php endif; ?>
<img src="<?php echo $this->src; ?>"<?php echo $this->imgSize; ?> alt="<?php echo $this->alt; ?>" />

<!-- Caption wenn verlinkt -->
<?php if ($col->caption): ?>
    <span class="caption"><?php echo $col->caption; ?></span>
<?php endif; ?>
<!-- Caption wenn verlinkt ENDE --> 

<?php if ($this->href): ?>
</a>
<?php endif; ?>
<?php if ($this->caption): ?>
<div class="caption"><?php if ($this->href): ?><a href="<?php echo $this->href; ?>"><?php endif; ?><?php echo $this->caption; ?><?php if ($this->href): ?></a><?php endif; ?></div>
<?php endif; ?>
</div>

</div>

Das Caption geht immer noch nicht in der LIghtbox auf

**Andreas** · 26.09.2010, 03:10

In dem Fall müsstest du es etwas anders gestalten.

Schematisch:

wenn link dann:
link öffnen
wenn link ENDE

Bild

wenn caption dann:
caption
wenn caption ENDE

wenn link dann:
link schließen
wenn link ENDE

diese Caption hier entfernen

Somit wird dir das Bild immer angezeigt, die Caption nur wenn vorhanden, und alles gemeinsam wird von dem Link umschlossen, wenn verlinkt ist oder auf Großansicht gestellt ist.

Achtung! Du hast noch einen Fehler. In diesem Template holst du die Caption nicht mit $col->caption, sondern mit $this->caption. CSS nicht vergessen.

Grüße

**Thanatos** · 26.09.2010, 07:47

Hallo Andreas,
ich hoffe ich nerve nicht zu sehr

Leider habe ich keine Ahnung von PHP. Das Prinzip habe ich verstanden, aber stecke trotzdem fest.

Mein Template sieht im "Rohzustand" jetzt so aus (this zu col geändert) - leider weiß ich schonmal nicht, was eine Änderung von $col-> caption zu $this->caption bewirkt:

PHP-Code:




<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; ?>



<div class="image_container"<?php if ($this->margin): ?> style="<?php echo $this->margin; ?>"<?php endif; ?>>

<?php if ($this->href): ?>

<a href="<?php echo $this->href; ?>"<?php echo $this->attributes; ?> title="<?php echo $this->alt; ?>">

<?php endif; ?>

<img src="<?php echo $this->src; ?>"<?php echo $this->imgSize; ?> alt="<?php echo $this->alt; ?>" />

<?php if ($this->href): ?>

</a>

<?php endif; ?>

<?php if ($col->caption): ?>

<div class="caption"><?php if ($this->href): ?><a href="<?php echo $this->href; ?>"><?php endif; ?><?php echo $col->caption; ?><?php if ($this->href): ?></a><?php endif; ?></div>

<?php endif; ?>

</div>

</div>

Unten wird ja das Caption gesetzt, gefolgt vom Link wenn ich das richtig verstehe bedeutet das:

PHP-Code:


<?php if ($col->caption): ?>

<div class="caption"><?php if ($this->href): ?><a href="<?php echo $this->href; ?>"><?php endif; ?><?php echo $col->caption; ?><?php if ($this->href): ?></a><?php endif; ?></div>

<?php endif; ?>

Wenn Caption, dann kommt der Link (this->href), wenn keine caption (endif) dann kommt die Caption ohne Link. Ganz zum Schluß wird der Link geschloßen (</a>) richtig? Die Anzeige des Bildes ist doch aber weiter oben im Skript

PHP-Code:


<img src="<?php echo $this->src; ?>"<?php echo $this->imgSize; ?> alt="<?php echo $this->alt; ?>" />

Bin leider total verwirrt

**Andreas** · 26.09.2010, 13:03

Sorry, war nicht meine Absicht dich zu verwirren. Ich habe es dir schematisch gezeigt, weil es so oft einfacher ist zu sehen was gemacht wird und man auch mal einen Blick dafür bekommt wie das PHP (Template) aufgebaut ist.

Ein Template liefert dir Variablen, die kannst du dir übrigens mit $this->showTemplateVars(); ausgeben lassen.

In dem Template gallery_default.tpl werden die Variablen mit einer foreach-Schleife aus einem Array geholt, deswegen werden die Variablen dort mit z.B. $col->caption ins Template geholt. In dem Template ce_image.tpl gibt es keine Schleife, es wird ja nur ein Bild gezeigt. Dort wird die Variable direkt mit $this->caption ins Template geholt.

Im Prinzip sind deine Vermutungen, wofür die einzelnen Blöcke im Template zuständig sind, schon richtig. Du hast dich nur vertan, denn die Variable $col->caption liefert in ce_image.tpl überhaupt nichts. Du musst hier $this->caption benutzen.

Ich mach das nicht so gerne hier fertige Templates rein zu kopieren, da das keinen Lerneffekt hat. Es wird dann rauskopiert, eingefügt und gut is. Deswegen habe ich dir oben die Erklärung nochmal dazu geschrieben. Damit wir das Thema aber abschließen können, füge ich das geänderte ce_image.tpl hier doch mal ein.

PHP-Code:


<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; ?>



<div class="image_container"<?php if ($this->margin): ?> style="<?php echo $this->margin; ?>"<?php endif; ?>>

<?php if ($this->href): ?>

<a href="<?php echo $this->href; ?>"<?php echo $this->attributes; ?> title="<?php echo $this->alt; ?>">

<?php endif; ?>

<img src="<?php echo $this->src; ?>"<?php echo $this->imgSize; ?> alt="<?php echo $this->alt; ?>" />



<!-- Die nächsten 3 Zeilen sind von unten hier hin verschoben,

       also über das schließende A, und DIV durch SPAN getauscht. -->

<?php if ($this->caption): ?>

<span class="caption"><?php echo $this->caption; ?></span>

<?php endif; ?>



<?php if ($this->href): ?>

</a>

<?php endif; ?>

</div>



</div>

Melde dich trotzdem wieder, wenn es immer noch nicht klappen sollte.

Grüße

**Thanatos** · 27.09.2010, 14:17

Hallo Andreas,
nochmals vielen Dank für Deine Bemühungen. Funktioniert alles wunderbar. Ich würde mich auch gerne näher mit der Templateprogrammierung beschäftigen, weiß aber leider nicht, wie ich am besten einsteige. Gibt es vielleicht ein Buch/Lektüre/Tutorial für Anfänger welches Du empfehlen könntest?

**Andreas** · 27.09.2010, 22:58

Grundsätzlich sollte man erstmal immer versuchen mit den Core-Templates auszukommen, da jedes veränderte Template den Pflegeaufwand erhöht.

Um die Templates an deine Bedürfnisse anzupassen brauchst du nur HTML- und PHP-Kenntnisse, ein spezielles Buch gibt es dafür soviel ich weiß eben aus diesem Grund nicht. Für PHP-Einsteiger fand ich dieses Turorial immer sehr gut http://tut.php-quake.net/ Wenn jemand ein besseres weiß, immer her mit den Links. Richtig kompliziert wirds erst ab Klassen, Methoden und OOP (find ich auf jeden Fall). Danach ist php.net dein Nachschlagewerk mit Beispielen.

Grüße