Menü- und Seitenbilder

Hier geht es nicht um Bilder auf einer Seite, sondern um Bilder, die einer bestimmten Seite zugewiesen sind und etwa im Menü oder einer Übersicht auftauchen können.

Elemente mit einem Bild werden mehr beachtet als ohne. Für viele Zwecke kann es daher wichtig sein, Links mit einem Bild zu garnieren. Das kann man von Hand machen, aber das wird schnell unflexibel, weshalb „geordnete Verhältnisse“ besser sind.

Übliche Wege

Jede Seite hat eine eindeutige Nummer, die Page_ID. Diese ist leicht griffbereit, auch im Menü. Mit diesem kleinen Codestückchen in Showmenu2 bringe ich für jede Seite ein Bild rein:

<a href="[url]" class="[class]"><img src="/media/ppics/pp[page_id].jpg" alt="[menu_title]" /><b>[menu_title]</b></a>

Das setzt natürlich voraus, dass es für jede Seite ein Bild mit diesem Namen gibt – was beim Neuanlegen einer Seite immer etwas Stress verursacht: Man sollte sich zeitnah um das passende Bildchen kümmern. Bilder können nicht mehrfach verwendet werden, sondern müssen zumindest unter neuem Namen kopiert werden, wodurch sich uU. die Ladezeit erhöht.

Außerdem wird das leicht unübersichtlich, man hat ja die Seitennummern nicht immer so im Kopf.

Als Hintergrundbild

Setzt man das Bild nicht direkt als <img> ein, sondern als Hintergrundbild eines Element, ist der Zeitdruck nicht so akut: Das Element hat vorerst eben nur die Hintergrundfarbe, zb hellgrau und wird eben nachgereicht, wenns passt.

<a href="[url]" class="[class]" style="background-image:url(/media/ppics/pp[page_id].jpg);"><b>[menu_title]</b></a>

Eine dritte Methode: Als Klasse

Mit class=“[class] ppic[pageid]“ wird nur die class festgelegt. Das Bild dazu muss im Stylesheet angegeben werden. Das sieht zunächst mühsam aus, hat aber den Vorteil, dass die Bilder beliebige Namen haben können und dass man leicht ein Standardbild festlegen kann.

Als Core-Funktion

An sich sind die Datenbankfelder schon vorhanden und könnten auch verwendet werden. Allein: Es gibt noch keine Möglichkeit, Bilder hochzuladen, auszuwählen und eventuell auch zu beschneiden.

Die Sache wird nicht vordringlich behandelt, weil es ja genug andere Möglichkeiten gibt und sich wohl auch die Vorteile im Rahmen halten würden.

Verwendung in Templates und Modulen

Es gäbe immer wieder Wünsche nach Seitenbildern, auf die auch von Modulen oder Templates schnell zugegriffen werden kann. Dabei gibt es aber das Problem, dass sich keine Standard-Größen vorgeben oder annehmen lassen. Es müssten sämtliche Bilder in mehreren Größen vorhanden sein – die ebenso wieder nicht „genormt“ sind. Das wird wohl auch nie so sein, also vergessen wir's.

 

Schnippelchen

Besonders bei Designs mit Drop-Down-Menü gibt es häufig übergeordnete Seiten (mit etlichen Unterseiten), die aber selbst keinen Inhalt haben, weil sie ohnehin kaum beachtet werden. Aber natürlich: Diese Seiten sind aufrufbar – vor allem am Handy! - und auch Google beachtet sie. Sie sollten also nicht einfach hässlich bleiben. Mit einem kleinen Zwischenmenü mit Bildchen sind diese Seiten schnell mal aufgehübscht und funktionieren auch am Handy gut.

Einfach eine Code2-Section mit folgendem Inhalt anlegen, die nötigen Bildchen raussuchen und hochladen:

$mpics_dir = '/media/ppics';
show_menu2(1,
 SM2_ROOT+1,
 SM2_START+2,
 SM2_ALLINFO,
 
'<li>
<a href="[url]" class="[class]" style="background-image:url('.$mpics_dir.'/[page_id].jpg);">
<span><b>[page_title]</b>[keywords]</span></a>
',
 "</li>",
 '<ul class="ulid[page_id]">
',
 '<li class="ulend"></li><br class="clear" /></ul>',
 true,
 '<ul class="menu pagemenu">');

Topics

In Topics sind Seitenbilder geradezu Pflicht und auch das Handling (hochladen, beschneiden, auswählen) funktioniert gut.

Ich persönlich neige dazu, Topics als erste Wahl zu verwenden, wenn Inhalte in eine Website einzustellen sind. Natürlich: Topics-Seiten stehen nicht im Menü und haben auch sonst Nachteile, aber es sind unter anderem (Kommentare, „News“-Faktor) auch die Seitenbilder, die mich bevorzugt zu Topics greifen lassen. 

Zurück