Produktübersichten mit dem Views-Modul

Servus!

Mein Liebling ist CCK, mit image field und image cache Modul. plus views.
Ich habe das schon mit image_attach gelöst, aber inzwischen vergessen, wie :)

So mache ich das jetzt:
In CCK definiere ich zwei Image-Felder: eines für das Titelbild, das ist als "required" markiert, und eines für die weiteren Bilder, die sind nicht "required", aber "multiple" -- damit können so viele Bilder wie nötig angefügt werden.

Mit image cache (gerade hatte ich mit Baumeister eine längliche Diskussion des Themas) können "on the fly" und im nachhinein Thumbnails verschiedener Größe von den hochgeladenen Bildern erzeugt werden, was die Geschichte sehr flexibel macht: sollte sich das layout ändern, einfach in image cache die Größen neu festlegen, die bereits vorhandenen Thumbnails flushen und image cache legt die Thumbs bei jedem Seitenaufruf (einmal) neu an.

Wenn du nun eine Liste machen möchtest, verwendest du einfach das Views-Modul und kannst, so image cache korrekt installiert ist, die gewünschte Größe für die Vorschau festlegen. Der Link auf den CCK Record sollte keine Schwierigkeiten verursachen, und der CCK Record wird mit der content-node.tpl.php im themes/mytheme Verzeichnis durch Hinzufügen von Einträgen für die verschiedenen Thumbnails ergänzt.

Baumeister hat das "Lightbox" Modul entdeckt, das mit JavaScript ein "eingebettetes Popup" mit der vergrößerten Bilddarstellung generiert. Das habe ich noch nicht probiert, aber was ich bisher dazu gelesen und gesehen habe, sieht schon recht gut aus.

Also brauchst du nur den Thread über das imagecache module suchen, den Anweisungen folgen, und dein Problem sollte behoben sein.

Viel Spaß,

Norbert

Hey, vielen Dank für die kompetente Antwort. Soweit klappt das nun ganz gut. Ist es bei CCK-Nodes eigentlich irgendwie möglich Kategorien zu verweden. Irgendwie kann ich bei allen Nodetype die Kategorie auswählen, nur bei meinen CCK-Nodes nicht.

--
Tekl

Servus, Tekl.

Doch, eigentlich sollte das kein Problem sein. Es ist schon ein bisschen spät und ich weiß nicht, ob's stimmt, aber wahrscheinlich musst du bei den in Frage kommenden Vokabularien erst festlegen, dass die als Kategorie in den jeweiligen CCK Records gewählt werden dürfen.

Damit CCK und Views wirklich gut funktionieren, solltest du Felder, nach denen sortiert werden soll, immer als Kategorie festlegen und dann im jeweiligen CCK Record ein Feld dafür anlegen. Das entspricht in anderen Datenbanken dem "Lookup" oder "Referenz" Feld, oder wie immer das genannt wird. Also sobald du eine überschaubare Menge von möglichen Einträgen hast, nach denen sortiert werden soll, dafür ein Vokabular anlegen und das im jeweiligen CCK Record verfügbar machen.

Viel Spaß,

Norbert

Hallo Norbert,

vielen Dank für deine Antwort. Das mit den Kategorien klappt mittlerweile, ebenso die Auflistung der Bilder samt Verlinkung. Doch ein kleines Problem bereitet mir noch Kopfschmerzen. Da ich die Bilder in einem Rahmen mit abgerundeten Ecken darstellen möchte, komme ich um einige DIVs nicht drumrum. Leider gibt mir Drupal aber immer LI-Elemente aus. In dem Template vom Template Wizard sehe ich keine Möglichkeit das zu ändern. Bei Views kommt leider nur die Liste in Frage, da ich da die Wahl der Thumbnailsgrößen habe. Irgendwie muss man die Liste doch mit reinen DIVs hinbekommen.

--
Tekl

Servus, Tekl.

Ganz verstehe ich das Problem nicht... Wenn du ein Template mit View Wizzard erzeugst, hast du für jedes Element in der Liste einen genau definierten Tag. Den kannst du dann beliebig stylen, oder? Du kannst auch, wenn dir die Tags von View Wizzard zu "sperrig" werden, deinen eigenen Tag erfinden, in das Template eintragen und dann ausgeben... Vielleicht isses nur zu spät, aber ich sehe einfach das Problem nicht.

Die letzte Frage ist mir dann endgültig zu hoch -- eine Liste ist eine Liste, und DIVs haben damit so gut wie nichts zu tun. Du kannst keine Liste mit DIVs bauen (na ja, alles kann man, aber wer wollte das schon?), sondern die gestaltest deine Liste durch Anweisungen im CSS. Also vielleicht das selbe, nur anders rum betrachtet?

Wenn du nun im Template um alles herum ein DIV meineListenzeile schreibst, ist jeder Listeneintrag in einem Block. Dann kannst du die üblichen Regeln anwenden - wie z.B.

Ein Bild in der Liste sollte dann mit

problemlos zu formatieren sein. Was habe ich übersehen?

Norbert

Ich will ja eigentlich keine Liste, sondern verwende nur die Listenansicht von Views. Ich möchte ein Thumbnailübersicht aller Produkte zeigen. Die Thumbnails bekommen durch gestylte DIVs einen netten Rahmen und mittels float:left passt sich die Übersicht dem Fenster an. Wenn du eine besser Lösung hast, nur zu. Ich bin da noch nicht so fit.

--
Tekl

Servus, Tekl.

Also wenn du Views verwendest, kommst du um eine Liste nicht herum -- denn views ist explizit ein Listengenerator. Das klingt schrecklicher, als es ist: auf der Metaebene ist jede in einer Folge angezeigte Datenmenge eine "Liste", ob die Einträge nun untereinander, nebeneinander oder sonstwo stehen.

Nehmen wir mal an, du hast eine "Anzahl" von Produkten mit jeweils einem Foto, das unter "Produktfoto" in z.B. einem CCK Record liegt. Nun willst du diese Fotos ausgeben. Mit Views erstellst du eine Listenansicht, wobei du nur das Feld "Produktfoto" zur Anzeige auswählst (aus praktischen Gründen solltest du "as link" auswählen, dann kommt der Verweis auf die Detailseite "gratis" mit). Wenn du nun die Seite ansiehst, erhältst du eine "Liste", wo alle Fotos übereinander stehen. Nehmen wir an, das gefällt dir nicht -- dann strickst du eben einfach die Art der Darstellung um, und zwar mit -- erraten: CSS. Das könnte dann etwa so aussehen:

Und schon "schwimmen" deine Produktbilder nebeneinander... Du musst nur noch mit dem Views Wizzard die Ansicht der einzelnen "Listenzeile" definieren (mit Link hinter dem Bild, einem verschönenden Rahmen, was weiß ich). Um die ganze Liste herum legst du den div produktbilder, und schon sind alle darin enthaltenen li Elemente von deinem Style betroffen. Dann macht es wohl gar nichts, dass du eigentlich keine "Liste" wolltest, oder?

Ich denke, du sitzt noch dem Anfängerfehler auf, dass CSS nur was für's Auge ist. Defacto ist CSS für die visuelle Struktur zuständig, (X)HTML für die Inhaltsstruktur. Und deswegen ist es vielleicht (noch) verwirrend, wenn du mit landläufigen Begriffen wie "Liste" und der damit verbundenen vorgefassten Meinung an eine HTML Liste ran gehst... HTML versteht unter "Liste" nur den Auftrag, eine Anzahl von Datensätzen irgendwie in einer Serie darzustellen, und weil HTML nichts anderes kann, eben von oben nach unten. CSS "überlagert" die Schlichtheit von HTML und erlaubt die weitgehend freie Positionierung der Elemente am Ausgabemedium.

Die Trennung von Inhalt und Darstellung hat den Vorteil, dass du mit einem anderen CSS die gleichen Daten komplett anders darstellen, oder für ein anderes Ausgabemedium (Drucker, z.B.) formatieren kannst. Entsprechend ist es eigentlich unsinnig, auf CSS formatierten Seiten eine "druckerfreundliche Version" zu linken -- es reicht völlig, ein CSS für das Ausgabemedium "printer" zu formatieren und dann sollte der Browser beim Drucken automatisch das "printer" CSS verwenden (mit z.B. display:none für die auf einem Blatt Papier unsinnigen Elemente der Navigation). Oder für "kleine Bildschirme", wie Handies. Ein einfaches Stylesheet für das Medium erstellt, dann haben sogar 320x240 Pixel Handy-Surfer Freude an deiner Information.

So, ich hoffe die Predigt hilft dir,

Norbert

Hallo Norbert.

vielen Dank für deine ausführliche Antwort.

Mein Problem war nicht das Verständnis von Listen, sondern dass ich ich fälschlicherweise angenommen habe, dass DIV-Elemente nicht innerhalb von LI-Elementen stehen dürfen. Deswegen wollte ich die LIs weg haben. Nun weiß ich aber, dass LI sowohl Inline- als auch Block-Elemente enthalten darf. Somit hat sich dieses Problem erledigt.

Übrigens habe ich nicht die Option "as Link" bei CCK-imagefield-Bildern, sondern nur beim normalen Image-Feld.

--
Tekl

Mir gelingt es übrigens nicht bei normalen Node-Typen (Page) das Bild im Template zu verwenden. Der theme wizard gibt da nur was mit $nid aus. Zudem ist das Bild schon fix im Body vorhanden. Wähle ich Teaser aus, steht das Bild rechts.

--
Tekl

Mann, ich musste lange suchen, bis ich herausfand, dass man die Teaser/Body-Darstellung in der template.php überschreiben kann. Strichwort: image_attach_body und image_attach_teaser

--
Tekl

Servus, Tekl.

> Übrigens habe ich nicht die Option "as Link" bei CCK-imagefield-Bildern, sondern nur beim normalen Image-Feld.

Jein... Wenn du imagecache installierst, steht dir "as link" auch bei image fields zur Verfügung...

Norbert

Komisch, bei mir nicht. Ich habe nur die Größenformate von ImageCache zur Auswahl, unter Handler finde ich nicht die Auswahl "image/image with link". Hast du dafür evtl. ein Extra-Modul?

Lullabot hat das auch nicht:

http://www.lullabot.com/articles/image_and_image_exact_sizes_vs_imagefie...

--
Tekl

Servus, Tekl.

Vieleicht reden wir aneinander vorbei: die "as link" Auswahl, von der ich spreche, befindet sich im Formular von Views, nicht im CCK. Dann macht Views eben einen Link vom Thumbnail auf das grosse Bild.

Norbert

Ich meine tatsächlich Views. Bei mir sieht so aus wie bei Lullabot:

http://www.lullabot.com/files/imagefield-views.png

--
Tekl