[graphicaltext] Grafischer Text

[minstyle]

In dem alten Forum von TypoLight wurde bereits heiß über diese tolle Extension von Stefan Lindecke diskutiert. Dieser Thread hier soll an die letzten Beiträge anknüpfen.

Bei der dynamischen Menü-Generierung hat mich schon immer gestört, dass die einzelnen Grafiken nicht XHTML-konform waren. D.h. die IMG-Tags wurden bei der Ausgabe im Browser nicht mit einem Backslash geschlossen.

Mit folgender Modifikation ist auch dieses Problem gelöst (vielleicht sollte man diese Änderung in die nächste Extensionversion aufnehmen):

1. Folgende Datei öffenen: system/modules/graphicaltext/FrontendGraphicalText.php
2. die Zeile 198 ausmachen:
   

   $newReplacement = '<img src="' . $imageURL . '" border="0" title="' . $values[2] . '" alt="' . $values[2] . '">'; 

3. und durch folgende ersetzen:
   

   $newReplacement = '<img src="' . $imageURL . '" border="0" title="' . $values[2] . '" alt="' . $values[2] . '" />'; 

Viel Spaß damit!

[minstyle]

Ich habe das Problem, dass mir die Grafiken für die aktive Seite mit entsprechender Unterseite nicht richtig angezeigt werden. Nur der Menüpunkt für die Unterseite wird richtig erstellt, aber nicht zusätzlich der aktive Zustand für die "Oberseite".

Der aktive wie auch inaktive Zustand eines Menüpunktes wird durch eine entsprechende Grafik der Erweiterung erstellt.

Ich habe folgende grafische Menüstruktur mit dem Modultyp "Navigationsmenü" angelegt (Seitenaufbau identisch mit der Seitenstruktur im Backend von TypoLight):

1. Startseite
2. Seite 2
   
   • Unterseite 1
   • Unterseite 2

Befinde ich mich auf "Seite 2", dann wird der entsprechende Navigationspunkt durch die Hintergrundgrafik, die für den den aktiven Zustand zuständig ist, ersetzt.

Beispiel:

So sollte die Navi richtig aussehen:

1. Startseite
2. Seite 2
   
   • Unterseite 1
   • Unterseite 2

D.h. beide Punkte haben den aktiven Zustand und sollten durch die entsprechende Grafik dynamisch ersetzt werden.

So sieht die Navi aber leider derzeit aus:

1. Startseite
2. Seite 2
   
   • Unterseite 1
   • Unterseite 2

Es wird nur der Menüpunkt "Unterseite 2" durch die entsprechende Grafik ersetzt. Nicht aber auch noch die Oberseite "Seite 2", wie es sein sollte.

Auszug aus dem HTML-Quelltext im Frontend:

<ul class="level_1">
<li class="first"><a href="home.html" title="Startseite" class="first" onclick="this.blur();"><img src="system/html/graphtext-navi_inaktiv_710533dd879dd1202e5c73b27705bf02.png" border="0" title="HOME" alt="HOME" /></a></li>
<li class="trail"><a href="was-wir-tun.html" title="Was wir tun" class="trail" onclick="this.blur();"><img src="system/html/graphtext-navi_inaktiv_26859f25ff7749cb81416d03531b8c0b.png" border="0" title="WAS WIR TUN" alt="WAS WIR TUN" /></a></li>
[...]

Nach einem Blick in den Quelltext der Seite ist mir aufgefallen, das der CSS-Code für die jeweils beiden aktiven Punkte korrekt erstellt wird (Klasse trail vorhanden), doch die generierte PNG-Grafik der entsprechenden Oberseite (hier: "Seite 2") falsch ist.
D.h. anstatt von system/html/graphtext-navi_aktiv_xxx.png wird mir system/html/graphtext-navi_inaktiv_xxx.png erstellt!

Wer kann mir bei diesem dringenden Problem helfen?

Template der Navigation:

<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; ?>"><span class="active<?php if ($item['class']): ?> <?php echo $item['class']; ?><?php endif; ?>">{{graphtext::navi_aktiv::<?php echo $item['link']; ?>}}</span><?php echo $item['subitems']; ?></li>
<?php else: ?>
<li<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?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; ?> onclick="this.blur();<?php echo $item['target']; ?>">{{graphtext::navi_inaktiv::<?php echo $item['link']; ?>}}</a><?php echo $item['subitems']; ?></li>
<?php endif; ?>
<?php endforeach; ?>
</ul>

Im Anhang eine kurze Veranschaulichung des Problems!

[minstyle]

Dank des Nutzers lindesbs konnte ich das Problem nun lösen.

Das Template des Hauptmenüs muss folgendermaßen geändert werden:

<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; ?>">
        <span class="active<?php if ($item['class']): ?> <?php echo $item['class']; ?><?php endif; ?>">
            {{graphtext::menu_active_<?php echo $this->level; ?>::<?php echo $item['link']; ?>}}
        </span>
        <?php echo $item['subitems']; ?>
    </li>
<?php else: ?>

    <li<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?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; ?> onclick="this.blur();<?php echo $item['target']; ?>">

<?php if ($item['class']=='trail'): ?>
    {{graphtext::menu_active_<?php echo $this->level; ?>::<?php echo $item['link']; ?>}}
<?php else: ?>
    {{graphtext::menu_link_<?php echo $this->level; ?>::<?php echo $item['link']; ?>}}
<?php endif; ?>

        </a>
        <?php echo $item['subitems']; ?>
    </li>

<?php endif; ?>
<?php endforeach; ?>
</ul>

[minstyle]

Lässt sich mit dieser Erweiterung ein grafischer Mouse-Over-Effekt realisieren?
Wenn ja, wie?

[lindesbs]

Da funktioniert mit meiner Erweiterung, hier eine kurze Anleitung, wie man dies realisiert :
http://chektrion.de/graphicaltext-gr...avigation.html

Oder mit vorgefertigten Bilder geht das mit dieser Erweiterung :
https://contao.org/erweiterungsliste...ion.19.de.html

[minstyle]

Was würde ich bloß ohne dich machen!

Eine Sache ist mir bei deiner Erweiterung noch aufgefallen:
Der Quelltext der automatisch generierten Grafiken ist leider nicht XHTML-Strict-valide:

<img src="system/html/graphtext-navigation_aktiv_x.png" border="0" title="HOME" alt="HOME" />

So sollte es richtig aussehen laut Validator (ohne Angabe einer border):

<img src="system/html/graphtext-navigation_aktiv_x.png" title="HOME" alt="HOME" />

Könntest du das bei deinem nächsten Update bitte fixen?

[frank.huettner]

Hallo,

in der Datei FrontendGraphicalText.php muss die Zeile 198 geändert werden:

$newReplacement = '<img src="' . $imageURL . '" title="' . $values[2] . '" alt="' . $values[2] . '" />'; 

Damit ist alles wieder valide!

Gruß
Frank

[minstyle]

Hallo,

in der Datei FrontendGraphicalText.php muss die Zeile 198 geändert werden:

$newReplacement = '<img src="' . $imageURL . '" title="' . $values[2] . '" alt="' . $values[2] . '" />'; 

Damit ist alles wieder valide!

Gruß
Frank

Siehe meinen ersten Beitrag hier im Thread.

[frank.huettner]

Hallo minstyle,

da hab ich wohl gestern nicht richtig geschaut.

Gruß Frank