Bildunterschrift verlinken

[be-tina]

Um die Bildunterschrift eines Bildes mit dem gleichen Link zu versehen, wie das Bild, habe ich bereits das Template geändert (dank der Tipps hier im Forum).

<!-- ce_image Template geändert von <figcaption ... bis ... /figcaption> -->

<?php $this->extend('block_searchable'); ?>

<?php $this->block('content'); ?>

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

    <?php if ($this->href): ?>
      <a href="<?= $this->href ?>"<?php if ($this->linkTitle): ?> title="<?= $this->linkTitle ?>"<?php endif; ?><?= $this->attributes ?>>
    <?php endif; ?>

    <?php $this->insert('picture_default', $this->picture); ?>

    <?php if ($this->href): ?>
      </a>
    <?php endif; ?>

    <?php if ($this->caption): ?>
      <figcaption 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; ?></figcaption>
    <?php endif; ?>

  </figure>

<?php $this->endblock(); ?>

Das klappt auch wunderbar.

Jetzt hätte ich aber gerne, dass nicht nur der Text verlinkt ist, sondern das ganze Feld, in dem die Bildunterschrift steht.

Hier könnt ihr mein Experiment ansehen:
http://mkgd6.bettinaknell.de/index.php/beispiel.html

[Samson1964]

figcaption a {display:block;} 

[be-tina]

Hallo Frank,

das funktioniert leider nicht. Du meinst doch im CSS-Code oder?

Wenn ich unter der Schrift auf die schwarze Fläche klicke, greift der Link trotzdem nicht.

[mlweb]

Zeig doch mal einen Link, dann kann man meist besser helfen.

Nachtrag: Oh, Mann wer liest ist im Vorteil. Link ist ja groß und breit dabei .

[Samson1964]

Hallo Frank,

das funktioniert leider nicht. Du meinst doch im CSS-Code oder?

Wenn ich unter der Schrift auf die schwarze Fläche klicke, greift der Link trotzdem nicht.

Ja CSS.
Dann mußt Du wohl das figcaption-Element auf das ganze Bild ausdehnen, womit auch der Link greifen würde. Oder Du setzt den Link stattdessen um das ganze Bild.

[Bennie]

Gib doch mal dem

div.infobild figcaption.caption a { height:100% } 

das sollte es bringen oder?

[be-tina]

Das figcaption Element hat 100% Höhe und 100% Breite. Daran scheint es nicht zu liegen.

Momentan habe ich das mit dem Inhaltselement "Bild" angelegt. Da kann ich den Link nur für das Bild eingeben.

Selbst wenn ich im Template noch ein div drumherum setze und auch da den Link per PHP einsetze, funktiniert es nicht (damit man den div-Kasten erkennt, habe ich ihm die Klasse "linkkasten" gegeben).

<?php $this->extend('block_searchable'); ?>

<?php $this->block('content'); ?>


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

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

    <?php if ($this->href): ?>
      <a href="<?= $this->href ?>"<?php if ($this->linkTitle): ?> title="<?= $this->linkTitle ?>"<?php endif; ?><?= $this->attributes ?>>
    <?php endif; ?>

    <?php $this->insert('picture_default', $this->picture); ?>

    <?php if ($this->href): ?>
      </a>
    <?php endif; ?>

    <?php if ($this->caption): ?>
      <figcaption 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; ?></figcaption>
    <?php endif; ?>

  </figure>
  
  
</div>
  

<?php $this->endblock(); ?>

[be-tina]

Gib doch mal dem

div.infobild figcaption.caption a { height:100% } 

das sollte es bringen oder?

Ja super! Das war es. Ich hatte nicht dem Link die volle Fläche gegeben sondern dem figcaption.

Danke !!!!!!!!!!!!!!!!!!!!!

[Andreas]

Wenn du das Padding jetzt noch dem A gibst, anstatt dem FIGCAPTION, dann hast du den ganzen Bereich klickbar. Momentan hast du drumherum immer noch einen Rand, den du nicht klicken kannst.

[be-tina]

Super Tipp - vielen Dank - habe ich gemacht.