Bildnavigation für Contao 3.0

[operatorone]

Hallo zusammen,

habt ihr eine Idee welche Erweiterung ich für eine Bildnavigation verwenden könnte? Ich habe im Repository viele Extensions untersucht und nur eine gefunden mit der ich Bilder zu Navigationspunkten zuordnen kann "navigation-image". Leider werden hier die Links zusätzlich zu den Bildern in das LI gesetzt und nicht das Bild verlinkt. Hättet ihr dazu eine Lösung?

Viele Grüße,
operatorone

[jubel]

Du könntest deine Bilder per CSS als Hintergrundbilder oder mit :before oder :after einbinden.

[operatorone]

Hi, danke für deinen Post.
Ich befürchte aber, dass das in älteren Browsern nicht funktionieren würde. Klar kann ich die ganze Navigation auf in HTML mit einer LI und umschließenden Links programmieren, aber ich dachte es gäbe schon Erweiterungen für Version 3 die das könnte. page_images_navigation wäre ja eine gewesen, aber die geht leider noch nicht.

Viele Grüße,
operatorone

[jubel]

Ich befürchte aber, dass das in älteren Browsern nicht funktionieren würde. Klar kann ich die ganze Navigation auf in HTML mit einer LI und umschließenden Links programmieren

Hintergrundbilder, die du direkt ins a-Tag setzt, müssten doch eigentlich auch in der Oldies funktionieren, die sind ja nicht neu. Oder?

[Flex]

Ich stimme jubel da zu.

Wenn du nicht warten möchtest, bis eine entsprechende Erweiterung heraus kommt, ist CSS das Stichwort dazu...
Links als block definieren mit festen Größen, den entsprechenden Seiten eine eigene Klasse geben und dann als Hintergrund einbinden...

Klappt auch im IE6.

[jubel]

den entsprechenden Seiten eine eigene Klasse geben

Ich glaube, damit ist es hier nicht getan.

Die Klasse wird doch nur an body und article der aktuellen Seite vergeben, ist also nicht für alle Menüpunkte verfügbar. Oder gibt's da noch einen Trick?

Aber man könnte die Menüpunkte über Attributselektoren ansprechen, z.B. a[titile="..."].

Der Haken an dieser Lösung ist dann allerdings die aktuelle Seite, die ja kein a-Tag samt title-Attribut hat.

Alternativ konnte man auch vielleicht das Template von "navigation-image" so anpassen, dass das Image innerhalb des a-Tags steht, wenn das der einzige Kritikpunkt ist. Dazu müsste man einen Blick ins Template werfen.

[MacKP]

Nene, das sollte schon passen. Wenn man einer Seite eine Klasse gibt, dann sollte die auch im Menü verfügbar sein. Zumindest war das vor Contao 3 noch so ;-)
Ich geh mal nicht davon aus, das dieses wichtige Feature entfallen ist ^^

Viele Grüße

[jubel]

Das beruhigt mich!



Nachtrag:
Hab's gerade mal selber durchgetestet, da ich das demnächst bei einem Projekt brauchen werde, klappt tadellos.

[operatorone]

Hallo zusammen,

vielen Dank für eure zahlreichen Tips. Ich werde mal versuchen das Template von navigation-image umzubauen, da meine Navigationspunkte unterschiedliche Breiten haben.

Viele Grüße,
operatorone

[operatorone]

Hallo nochmal, ich habe mir das Template mal näher angeschaut und habe so meine Hürden den Link um das Bild zu platzieren. Vielleicht kann mir einer von euch unter die Arme greifen, das wäre super.

<?php
?>
<ul class="<?php echo $this->level; ?>">
<?php foreach ($this->items as $item): ?>
<?php if ($item['isActive']): ?>
<li class="active<?php if ($item['class']): ?> <?php echo $item['class']; ?><?php endif; ?>"><?php if(!empty($item['navigationImage'])): ?><img src="<?php echo $this->getImage(\FilesModel::findByPk($item['navigationImage'])->path, 100, 100, 'crop') ?>" alt=""><?php endif ?><span class="active<?php if ($item['class']): ?><?php echo $item['class']; ?><?php endif; ?>"><?php echo $item['link']; ?></span><?php echo $item['subitems']; ?></li>
<?php else: ?>
<li<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?>><?php if(!empty($item['navigationImage'])): ?><img src="<?php echo $this->getImage(\FilesModel::findByPk($item['navigationImage'])->path, 100, 100, 'crop') ?>" alt=""><?php endif ?><a href="<?php echo $item['href']; ?>" title="<?php echo $item['pageTitle'] ? $item['pageTitle'] : $item['title']; ?>"<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?><?php if ($item['accesskey'] != ''): ?> accesskey="<?php echo $item['accesskey']; ?>"<?php endif; ?><?php if ($item['tabindex']): ?> tabindex="<?php echo $item['tabindex']; ?>"<?php endif; ?><?php if ($item['nofollow']): ?> rel="nofollow"<?php endif; ?><?php echo $item['target']; ?>><?php echo $item['link']; ?></a><?php echo $item['subitems']; ?></li>
<?php endif; ?>
<?php endforeach; ?>
</ul>

Vielen Dank und Grüße,
operatorone