Knowledgebase

Kategorie-Vorschaubilder in ihren Höhen vereinheitlichen und vertikal zentrieren

Bewertung:  / 1
SchwachSuper 

Zielsetzung / Problembeschreibung

Häufig hat man z.B. in Webshops auf Kategorie- oder Produktauswahlseiten diese als Tableau mit Vorschaubildern angezeigt. Hierbei reiht sich Vorschaubild an Vorschaubild jeweils in kleinen Blöcken. Bei einem tabellenfreien und in der Breite flexiblen Layout läßt man diese Vorschaubildblöcke einfach floaten.

Hierbei will man der schönen Optik wg. gerne zwei Dinge erreichen:

  • die Container für die Vorschaubilder sollen alle gleich groß sein
  • und die Bilder darin auch bei unterschiedlicher physikalischen Größe untereinander vertikal zentriert ausgerichtet sein.

Wer sich schon mal mit einer solchen Aufgabenstellung befasst hat, wird erfahren haben, dass dies per HTML und CSS so nicht möglich ist. Neuerdings findet man in Foren dazu eine Lösung die mit display:table, display:table-cell und vertikal-align:middle als Styleanweisungen arbeitet. Jedoch hat diese Formatierung als Tabellenzellen den Nachteil, dass Bilder die physikalisch größer abgelegt wurden als im Layout vorgesehen mit 100% angezeigt werden und dann einfach über den Tabellenrand hinausragen.

Wer sich jetzt fragt, warum ich dann nicht einfach die Bilder in der Breite korrekt skaliert auf den Server schiebe, der kennt meine Kunden nicht. Die sind dazu nicht in der Lage und erwarten einfach dass es trotzdem schick aussieht.

 



 

Die Lösung

Die Umsetzung erfolgt mit jQuery. Im Wesentlichen wird mit der jQuery die Höhe vereinheitlicht, wozu man gleich mal die Bibliothek syncHeight verwenden kann (oder man schreibt dazu schnell einen eigene jQuery-Methode) und per margin-top wird das Verschieben der Vorschaubilder nach unten abhängig von ihrer eigenen Höhe und der Höhe des umgebenden Containers erreicht.

Dazu speichert man sich z.B. folgendes JavaScript:

 

var jQSyncHeight = '.category-view ';

  

jQuery(window).load(function () {
	if (jQSyncHeight != '') {
		// vertikale Höhensynchronisierung für Vorschaubilder
		jQuery(jQSyncHeight+' .slider-img').syncHeight();
		jQuery(jQSyncHeight+' .category').syncHeight(); 
		// vertikale Zentrierung
		height = jQuery(jQSyncHeight+' .slider-img').first().height();
		jQuery(jQSyncHeight+' .slider-img img').each(function(i){
			jQuery(this).css( {'margin-top': (height - jQuery(this).height())/2 + "px"}	);
		});
	}
});

 

Der Bsp.-Selector .category-view wurde von mir in eine JavaScript-Variable ausgegliedert, damit auf Wunsch auch weitere Gruppen z.B. Produkt-Vorschaubilder mit dem gleichen Script formatiert werden könnten. Der Inhalt dieser Variablen wird dann quasi über das php-Template-Script für diese Seite befüllt.

Der PHP-Block zur Ausgabe der Kategorie-Vorschaublöcke kann vereinfacht dann etwa so aussehen (am Bsp. von VirtueMart 2.x in Joomla):

 

<h2>
  <a href="#" title="<?php echo $category->category_name ?>">
    <?php if (!empty($category->images)) : ?>
    <div class="slider-img">
      <?php echo $category->images[0]->displayMediaThumb("", false); ?></div>
    <?php endif; ?>
    <div><?php echo $category->category_name ?></div>
  </a>
</h2>

 

Der in der Höhe syncronisierte, das Bild umgebende Block wird angesprochen über den selector .slider-img. Margin-top wird dann gesetzt für das das Vorschaubild in diesem Block. Wie groß Margin-top ist, ergibt sich aus der syncronisierten Blockhöhe minus der Höhe des jeweiligen Bildes geteilt durch 2. Über die Methodes each() wird diese Berechnung und margin-top-Zuweisung für jedes Kategoriebild durchlaufen.

Ein Nachteil dieser Methode sei aber auch noch genannt. Dieser ganze Synchronisierungsprozess kann natürlich erst durchlaufen werden, wenn alle Bilder durch den Browser geladen wurden. Erst wenn ich die Höhe des größten Bildes kenne, kann ich die Höhen der Bildcontainer vereinheitlichen und auch erst dann das margin-top für die Bilder berechnen. D.h. beim Laden der Seite werden die Bilder zunächst unformiert angezeigt und rutschen erst dann auf ihre korrigierte Position.

 

  • Hallo,<br />das ist genau das, was ich brauche.<br />Kann mir jemand detailliert sagen, wo ich das alles einfügen muss, damit das bei mir läuft.<br />Ich bin kein Programmierer und würde deshalb eine genaue Pfadangabe und fertige Scripts brauchen.<br />Danke<br />Wolfgang

  • Ich nahm an, dass diese Anleitung schon ausführlich genug ist, um es in die eigene Plattform zu integrieren. Wenn's nicht langt, dann kann ich das gern in Ihr Projekt einbauen.

  • Gast - Torsten

    Guten Abend,<br />könnten Sie diese "Vertikalisierung" in meinem Shop einbauen?<br />Wenn ja was würde es kosten?<br /><br />Freundliche Grüße<br />Torsten

  • Gast - Torsten

    Hier noch die Adresse:<br /><br />Beim Klick auf Bremsen - 3.Zeile links sehen Sie wie es nicht sein soll.<br />------------------------------------<br /><br />Guten Abend,<br />könnten Sie diese "Vertikalisierung" in meinem Shop einbauen?<br />Wenn ja was würde es kosten?<br /><br />Freundliche Grüße<br />Torsten

  • ja, dass könnte ich. Allerdings sehe ich, dass Sie nicht Joomla und VirtueMart nutzen, sondern xtCommerce? Das ist nicht meine vertraute Umgebung, wo die Implementation nicht wie unter VM ca. 1h dauern würde. Bei Ihnen müsste ich mich erst ins System reindenken.<br /><br />Es ist natürlich wichtig, dass die Bilder halbwegs im Format zueinander passen. Sie müssen ja bedenken, dass schon ein einziges in den Proportionen stark abweichendes Bild alle anderen ins gleiche Format zwingt (z.B. wie beim Bremsbelag hinten).<br />Weiterhin muss Ihr Browse-Template die notw. Container-Struktur liefern, damit das Styling gelingt. Ggf. muss dazu das verantwortliche Template angepasst werden. Dann gibts kleine Stolperfallen, die das indiv. Design mit sich bringt, wie z.B. der Wunsch, irgendwelcher Box-Schatten etc. zu erhalten, ... Deshalb liefere ich im Beitrag auch nur eine Anleitung und keine Copy-Paste-Lösung ;-).<br /><br />Bei der von Ihnen genannten Beispielseite, ist das im Design ja nicht so störend, weil eh nur eine Untereinanderauflistung erfolgt. Die von mir angesprochenen notw. Höhenanpassung beziehen sich eher auf solche Layouts bei denen Kategorien(bilder) oder Produkte(bilder) auch nebeneinander liegen und somit der Höhenunterschied, erst recht bei floatenden Layouts extrem störend ist.<br /><br />Ich kann mir vorstellen, dass ich bei xtC mehr Zeit brauchen werde.

Einen Kommentar verfassen

Als Gast kommentieren

0
Deine Kommentare erfordern die Moderation durch den Administrator
Nutzungsbedingungen.
Suche - Kategorien
Suche - Inhalt
plg_search_attachments
VM - Search, Virtuemart Product

Ihr Warenkorb

 x 
Ihr Warenkorb ist noch leer.