Variation vom Showroom auf drupalcenter.de
Das Tutorial beschreibt eine Variation des Showrooms auf drupalcenter.de. Beispielsweise werden keine verwendeten Module in der Bearbeitungsansicht erfragt. Doch die wichtigsten Schritte sind enthalten.
Die Anleitung basiert auf einer Inhaltstypbenennung showroom. Wird dieser anders benannt, dann entsprechend alles weitere mit der anderen Bezeichnung ersetzen.
Das Tutorial setzt voraus, daß man bereits Module einbinden, Inhaltstypen anlegen und Views erzeugen kann.
Verwendete Module
Folgende Module wurden verwendet: CCK, Image-Field (CCK), Link (CCK) + Views, Imagecache und Fivestar. Tagadelic (http://drupal.org/project/tagadelic) habe ich nicht dokumentiert, denn es geht dabei mehr um tagclouds, die ich nicht verwendete.
Folgende Module installieren und aktivieren:
CCK http://drupal.org/project/cck - Content aktivieren
Image-Field (CCK) http://drupal.org/project/imagefield - Image aktivieren (im Bereich CCK)
Link (CCK) http://drupal.org/project/link - Link aktivieren (im Bereich CCK)
Views http://drupal.org/project/views - Views (im Bereich Views)
Imagecache http://drupal.org/project/imagecache - Imagecache aktivieren (im Bereich Image) (seit der Version 'imagecache 2.x' wird auch das Modul 'imageapi' benötigt. Es wird empfohlen, das Modul 'imageapi' VOR Installation bzw. Upgrade von 'imagecache 2.x' zu installieren UND zu aktivieren.)
Fivestar http://drupal.org/project/fivestar - Fivestar aktivieren (im Bereich Voting)
Votingapi http://drupal.org/project/votingapi VotingAPI aktivieren (im Bereich Voting)
Pathauto http://drupal.org/project/pathauto - Pathauto aktivieren (im Bereich Other) und das dafür benötigte Path (im Bereich Kern - Optional)
Voting-API einstellen
http://www.example.com/admin/settings/votingapi
Ich habe die Voreinstellung so belassen.
http://www.example.com/admin/settings/fivestar
Fivestar wählen
Ich habe Default gewählt und die drupalicons per css ausgewählt, weil sie auf dieser Seite nicht zur Auswahl angeboten werden.
Imagecache einrichten
http://www.example.com/admin/settings/imagecache
Preset namespace: sr_middle (für die Node-Ansicht)
Add a new action: Scale (update preset)
Width: 180 (die Breite wählen, wie gewünscht)
Preset namespace: sr_teaser (für die Teaser-Ansicht)
Add a new action: Scale (update preset)
Width: 150 (die Breite wählen, wie gewünscht)
Inhaltstyp anlegen
http://www.example.com/admin/content/types
Name: Showroom
Typ: showroom
Beschriftung des Titelfeldes: Name der Webseite
Beschriftung des Inhaltsfeldes: Beschreibung der Webseite
Standardeinstellungen editieren
Standard Kommentar-Einstellungen editieren
Five Star ratings:
Enable Five Star rating
Allow users to undo their votes, falls erwünscht (es erscheint dann ein roter Kreis neben den Stars)
Anzahl der Stars einstellen:
Five Star display style: Stars and average
Widget location (teaser): Below the teaser body
Widget location (full node): Below the node body
Speichern und wieder bearbeiten.
Neues Feld anlegen:
Name: websiteurl
Field type: Link
Feld erzeugen.
Label: URL der Webseite
Data settings: Erforderlich
Link Title: no Title
Nofollow Value: Add rel="nofollow" Attribute, falls erwünscht
Speichern, neues Feld hinzufügen.
Name: websitescreenshot
Field type: Image
Feld erzeugen.
Label: Screenshot der Webseite
Maximum resolution for Images: 640x640
(640x640 habe ich so vom drupalcenter übernommen, könnte wahrscheinlich auch kleiner sein, weil es keine große Ansicht gibt.)
Image path: Verzeichnis angeben, falls erwünscht
Hilfetext eingeben, falls erwünscht, speichern.
* Kategorien anlegen.
http://www.example.com/admin/content/taxonomy
Neues Vokabular erstellen.
Typen: * Showroom anklicken
Hierarchie einstellen, Mehrfachauswahl und "Erforderlich" anklicken.
Die entsprechenden Begriffe hinzufügen.
* Reihenfolge der Felder festlegen.
http://www.example.com/admin/content/types/showroom/fields
URL der Webseite: -4
Screenshot der Webseite: -2
(Wer die Bearbeitungsansicht verändern will, hier ein Tutorial dazu: http://drupal.org/node/101092)
* Anzeige der Felder festlegen
http://www.example.com/admin/content/types/showroom/display
URL der Webseite: Teaser: hidden - Full: Default as link
Screenshot der Webseite: Teaser: sr_teaser as link - Full: sr_middle
* URL zu den Showrooms einstellen
http://www.example.com/admin/settings/pathauto
Unter Node path settings: Pattern for all Showroom paths: showroom/[nid] eintragen.
* Berechtigungen setzen
http://www.example.com/admin/user/access
Festlegen, wer einen Showroom erstellen darf (node-Module) und wer Content bewerten und die Bewertungen sehen darf (fivestar-Module).
Beispielwebseiten erstellen
Jetzt bietet es sich an einige Showseiten anzulegen, um nach dem Erstellen der Views die Ansichten auch sehen zu können.
Views erzeugen
http://www.example.com/admin/build/views
Name: showroom_all
Provide Page View
URL: showroom/latest
View Type: Teaser List
Enable:
Use Pager
Breadcrumb trail should not include "Home"
Menü:
Enable:
Provide Menu
Provide Menu as Tab
Make Default Menu Tab
Menu Title: Teaseransicht
Filter:
Node: Type - einstellen auf "Showroom"
Sort Criteria:
Comment: Created Time -> Descending
Speichern und zweites View hinzufügen.
Name: showroom_sort
Provide Page View
URL: showroom/sortable
View Type: Table View
Enable:
Use Pager
Breadcrumb trail should not include "Home"
Menü:
Enable:
Provide Menu
Provide Menu as Tab
Tab Weight: 5
Menu Title: Tabellenansicht (sortierbar)
Filter:
Node: Type - einstellen auf "Showroom"
Fields:
Image: Screenshot der Webseite - Label: Screenshot der Webseite - do not group multiple values - sr_teaser as link
Node: Title: Label: Name - Normal - As Link - ja - none
VotingAPI percent vote result (count): Label: Stimmen - Raw value - Ja - none
VotingAPI percent vote result (average): Label: Voting - Cleaned Version - Ja - Descending
Speichern.
Das Template für die Views
Die Datei node-showroom.tpl.php in das verwendete theme kopieren. Hier ein Beispiel:
<div id="node-<?php print $nid ?>" class="node<?php print ($sticky && $page == 0) ? " sticky" : ""; ?><?php print ($page == 0) ? " teaser" : " "; ?><?php print ' ' . ($node->type); ?><?php print ($submitted && !$page) ? " cal" : ""?>">
<?php if ($page == 0) { ?>
<h2 class="title"><a href="<?php print $node_url ?>"><?php print $title ?></a></h2>
<div class="field-items">
<div class="screen">
<?php foreach ((array)$field_websitescreenshot as $item) { ?>
<div><?php print $item['view'] ?></div>
<?php } ?>
</div>
<?php print $node->content['body']['#value'] ?>
</div>
<div class="field-items showroomfooter">
<div class="taxonomy"><?php print $terms ?></div>
<div class="voting"><?php print $node->content['fivestar_widget']['#value'] ?></div>
</div>
<div class="meta">
<?php if ($submitted) { ?>
<div class="submitted"><?php print $submitted ?></div>
<?php } ?>
<?php if ($links){ ?>
<div class="links">» <?php print $links ?></div>
<?php } ?>
</div>
<?php } ?>
<?php if ($page) { ?>
<div class="field-items">
<div class="screen">
<div class="field-label">Screenshot der Webseite</div>
<?php foreach ((array)$field_websitescreenshot as $item) { ?>
<div><?php print $item['view'] ?></div>
<?php } ?>
</div>
<div class="body">
<div class="field-label">Beschreibung der Webseite</div>
<?php print $node->content['body']['#value'] ?>
</div>
</div>
<div class="field-items">
<div class="field-label">URL der Webseite</div>
<?php foreach ((array)$field_websiteurl as $item) { ?>
<div class="field-item"><?php print $item['view'] ?></div>
<?php } ?>
</div>
<div class="field-items showroomfooter">
<div class="taxonomy"><?php print $terms ?></div>
<div class="voting"><?php print $node->content['fivestar_widget']['#value'] ?></div>
</div>
<div class="meta">
<?php if ($submitted) { ?>
<div class="submitted"><?php print $submitted ?></div>
<?php } ?>
<?php if ($links){ ?>
<div class="links">» <?php print $links ?></div>
<?php } ?>
</div>
<?php if ($comment_count) { ?>
<h2><?php print t('Comments') ?></h2>
<?php } ?>
<?php } ?>
</div>Css hinzufügen
Die dazugehörigen styles für die Views in die style.css eintragen.
Aus dem Verzeichnis modules/fivestar/widgets/drupal die styles für die Bewertungsicons herauskopieren und die Pfadangaben entsprechend verändern. Im Verzeichnis widgets liegen noch andere Ordner, die auch "stars" anbieten - oder eben ein eigenes Icon machen.
/*showroom*/
.showroom h2 a {
padding: 0;
margin: 0;
margin-left: -30px !important;
}
.showroom .field-items {
clear: both;
float: left;
width: 100%;
margin-left: 10px;
padding: 10px;
border-width: 1px 1px 0 1px;
border-style: solid;
border-color: #CCCCCC;
}
.showroom .field-label {
margin-bottom: 3px;
font-weight: bold;
}
.showroom .screen {
float: left;
width: 40%;
}
.showroom .screen img {
margin-top: 12px;
}
.showroom .body {
float: right;
width: 55%;
}
.showroom .showroomfooter {
border-bottom: 1px solid #CCCCCC;
}
.showroom .taxonomy {
float: left;
width: 70% !important;
margin: 0 !important;
}
.showroom .voting {
float: right;
margin: 0;
padding: 0 10px;
border-left: 1px solid #CCCCCC;
}
.showroom .voting .form-item {
margin: 0;
padding: 0;
}
.showroom .meta {
clear: both;
}
.view-showroom-sort tr.even {
padding: 0.5em 0.6em;
}
.view-showroom-sort tr.odd {
background-color: white;
padding: 0.5em 0.6em;
}
.view-showroom-sort thead th {
padding:0.1em;
text-align:center;
}
/* Static View-only Star Version */
.showroom div.fivestar-widget-static .star {
width: 17px;
height: 16px;
background: url(/sites/example.com/modules/fivestar/widgets/drupal/druplicon.gif) no-repeat 0 0px;
}
.showroom div.fivestar-widget-static .star span.on {
background: url(/sites/example.com/modules/fivestar/widgets/drupal/druplicon.gif) no-repeat 0 -32px;
}
.showroom div.fivestar-widget-static .star span.off {
background: url(/sites/example.com/modules/fivestar/widgets/drupal/druplicon.gif) no-repeat 0 0px;
}
/* Javascript Star Version */
.showroom div.fivestar-widget .cancel, div.fivestar-widget .star {
width: 17px;
height: 16px;
}
.showroom div.fivestar-widget .star, div.fivestar-widget .star a {
background: url(/sites/example.com/modules/fivestar/widgets/drupal/druplicon.gif) no-repeat 0 0px;
}
.showroom div.fivestar-widget div.on a {
background-position: 0 -16px;
}
.showroom div.fivestar-widget div.hover a, div.rating div a:hover {
background-position: 0 -32px;
}
/**/- Anmelden oder Registrieren um Kommentare zu schreiben
Image-API noch erforderlich
am 24.11.2008 - 14:09 Uhr
Hallo,
zuallererst einmal vielen Dank an Petra für dieses gute Tutorial. Ich habe mir gerade die benötigten Module gedownloaded, da ist mir aufgefallen, dass das Modul ImageCache seit der Version 'imagecache 2.x' auch das Modul 'imageapi' ( benötigt. Es wird empfohlen, das Modul 'imageapi' VOR Installation bzw. Upgrade von 'imagecache 2.x' zu installieren und zu aktivieren. Wenn ihr das bitte noch im Tutorial ergänzen könntet, dann ist diese Klippe auch umschifft :-)
-----------------------------------------
Zitat:"Ich habe die Länge und Breite dieses Landes bereist und mit den besten Leuten geredet, und ich kann Ihnen versichern, daß Datenverarbeitung ein Tick ist, welcher dieses Jahr nicht überleben wird.“ Editor für Computerbücher bei Prentice Hall, 1957.
Zitat:"Ich habe die Länge und Breite dieses Landes bereist und mit den besten Leuten geredet, und ich kann Ihnen versichern, daß Datenverarbeitung ein Tick ist, welcher dieses Jahr nicht überleben wird.“ Editor für Computerbücher bei Prentice Hall, 1957.
Image-API
am 24.11.2008 - 14:44 Uhr
Hallo 2Be,
danke für den Hinweis!
Ich habe das Tutorial aktualisiert.
Ist genial aber...
am 21.01.2009 - 19:20 Uhr
Hallo
also ich habe ees mal probiert wie Ihr es beschrieben habt aber ich stehe jetzt bei dem Punkt Inhaltstypen anlegen an.
Arbeite erst seit drei Tagen mit Drupal
Aber könnt Ihr mir vielleicht erklären wie man Inhaltstypen anleget so das ich es auch verstehe
Bitte Danke
LG
Denit3210
Sorry...
am 21.01.2009 - 19:42 Uhr
... aber das sprengt den Rahmen des Tutorials. Es gibt sicherlich viele Stellen, an denen die grundlegenden Schritte, wie Inhaltstypen anlegen, erklärt sind. Einfach mal danach suchen ;-)
Schöne Grüße
Petra