Startseite
  • » Home
  • » Handbuch & FAQ
  • » Forum
  • » Übersetzungsserver
  • » Suche
Startseite › Benutzerhandbuch › Fortgeschrittene › Tutorials & How To's - Tipps & Tricks ›

Variation vom Showroom auf drupalcenter.de

Eingetragen von Petra (54) am 12.07.2007 - 14:44 Uhr in
  • Drupal 5.x

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">&raquo; <?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">&raquo; <?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;
}

/**/

‹ Validierung von Usereingaben bei Nodes nach oben View mit Eingabeformular für neue Beiträge ›
  • Anmelden oder Registrieren um Kommentare zu schreiben

Image-API noch erforderlich

Eingetragen von 2Be (361)
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.

  • Anmelden oder Registrieren um Kommentare zu schreiben

Image-API

Eingetragen von Petra (54)
am 24.11.2008 - 14:44 Uhr

Hallo 2Be,

danke für den Hinweis!
Ich habe das Tutorial aktualisiert.

  • Anmelden oder Registrieren um Kommentare zu schreiben

Ist genial aber...

Eingetragen von denit3210 (7)
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

  • Anmelden oder Registrieren um Kommentare zu schreiben

Sorry...

Eingetragen von Petra (54)
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

  • Anmelden oder Registrieren um Kommentare zu schreiben

Benutzeranmeldung

  • Registrieren
  • Neues Passwort anfordern

Aktive Forenthemen

  • PHP 8.1 - Deprecated function: rtrim()
  • Preloader / Spnner entfernen Menu Link Modal-Modul
  • Schriftgröße standard einstellen
  • Drupal Website gestalten
  • MariaDB 10.6
  • Entity Reference - Title Felder werden als Link angezeigt
  • Tokens werden in Viev als Link angezeigt
  • [bug entdeckt & workaround gefunden] benutzerdefinierte Felder vom Userprofil tauchen ungefragt auch in den Forumtopics auf...
  • [gelöst] Mass contact Empfängerliste nach Taxonomy Term statt Rolle
  • Update V. 9.3.12 auf V. 9.4 mit Fehler: Modul mySQL fehlt. Bitte Hilfe.
  • Sprachpfad, in Drupal Korrekt einstellen, auch bei den Meta-Tags
  • Update von Drupal 9.3 auf 9.4 oder bei 9.3 bleiben
Weiter

Neue Kommentare

  • Danke fürs Feedback. Gut dass
    vor 21 Stunden 58 Minuten
  • Patch angewandt
    vor 1 Tag 1 Stunde
  • core_version_requirement: ^8
    vor 3 Tagen 2 Stunden
  • core_version_requirement: ^8
    vor 3 Tagen 2 Stunden
  • ok. Wenn ich das mache
    vor 3 Tagen 2 Stunden
  • Bei gleichem Namen hat das
    vor 3 Tagen 3 Stunden
  • Sorry, dass ich mich hier
    vor 3 Tagen 3 Stunden
  • Habe Patch versucht
    vor 3 Tagen 10 Stunden
  • Hier wird ein Patsch
    vor 3 Tagen 12 Stunden
  • Mit Drupal geht das um 150
    vor 3 Tagen 23 Stunden

Statistik

Beiträge im Forum: 247866
Registrierte User: 19594

Neue User:

  • Davidsnins
  • kudes
  • Tkakah

» Alle User anzeigen

User nach Punkten sortiert:
wla9213
stBorchert6003
quiptime4972
Tobias Bähr4019
bv3924
ronald3845
md3717
Thoor3678
Alexander Langer3416
Exterior2903
» User nach Punkten
Zur Zeit sind 0 User und 7 Gäste online.

DrupalCenter durchsuchen:

Benutzerhandbuch

  • FAQ - Häufig gestellte Fragen.
  • Links & Downloads
  • Über Drupalcenter.de und das deutschsprachige Benutzerhandbuch
  • Über Drupal
  • Einsteiger
  • Fortgeschrittene
    • Best Practice - Drupal Sites - Guidelines
    • Die beliebtesten Themes und Module
    • Tutorials & How To's - Tipps & Tricks
      • Kurztipps - Dinge die Stunden sparen können.
      • Notfallpläne - Tipps die Deine Drupalinstallation retten können
      • Anleitung zur Erstellung eines einfachen Kontaktformulars
      • Arbeiten mit dem Drupal Taxonomie-System [beinhaltet veraltete Inhalte]
      • Bearbeiten-Tab zu jeden Block hinzufügen
      • Block View mit Argument
      • Das Tagebuch einer Site
      • Drupal 6 - Automatisch unterschiedliche Bildgröße bei Teaser und Artikel
      • Drupal 6 - Eigene CSS Datei in ein Theme integrieren
      • Drupal 6 - Einfache Bildergalerie mit Image und Lightbox2
      • Drupal 6 - Einrichten eines Kalenders
      • Drupal 6 - Google Adsense ohne Zusatzmodul einbinden
      • Drupal 6 - Hauptnavigation mit DropDown Effekt ab Ebene Zwei
      • Drupal 6 - ImageMagick mit XAMPP Lite nutzen
      • Drupal 6 - Imagefield mit Imagecache und Colorbox
      • Drupal 6 - Installation FCK Editor
      • Drupal 6 - Installieren der WYSIWYG API inkl. Editoren
      • Drupal 7: mehrere Bilder in Node: 1 Bild in Anrisstext
      • Drupal Code Highlighting in Redmine Projektarchiv (CodeRay)
      • Drupal Theming: JavaScript einhängen in Abhängigkeit von Page-Variablen
      • Drush - Das Schweizermesser für Drupal auf Kommandozeile
      • Einfaches und erfolgreiches Patchen unter Windows
      • Eingabeformat & Inputfilter
      • Einrichten eines einfachen, statischen Menüsystems
      • Erstellen von Patches
      • Gallery mit CCK und Views erstellen (Drupal 5)
      • Header image Modul einrichten
      • Inhaltsübersicht für einen User mit einem View erstellen
      • Javascript und CSS-Dateien einbinden
      • Kontaktformular mit Jquery aufwerten
      • Leitfaden zur Erstellung von Suchmaschinenoptimierten Drupal-Sites
      • Mac OSX - Backupskript für Websites auf MAMP
      • Module updaten via Shell auf Windows
      • Module übersetzen
      • Perl-Script zum Erzeugen einer statischen Kopie einer Drupal-Website
      • Portierung eine Themes von openwebdesign.org
      • Prozentbalken bei Views (Balkendiagramm)
      • Themen eines Node-Formulars
      • Titel mit Stil
      • Umkreissuche mit Location- und Views-Modul
      • Usergalerie mit ImageCache, CCK, Views + Thickbox
      • Userprofil mit Usernodes erstellen
      • Validierung von Usereingaben bei Nodes
      • Variation vom Showroom auf drupalcenter.de
      • View mit Eingabeformular für neue Beiträge
      • WebSVN mit Drupal Code Highlighting
      • Zusätzliche Submit-Schaltfläche in Node-Formularen
      • i18n Language Switcher Block, die Links mit den Flaggen themen
      • ui.slider als Ersatz für den Ajax-Pager von Views
      • Zugriffsbeschränkungen für Nodes - eine Übersicht der Möglichkeiten
  • Entwicklung von Modulen und Themes
  • Drupalcenters Community
  • Drupal 7 Video-Trainings (Deutsch)
  • Drupal-Testumgebung erstellen
  • Drupal 6 Module
  • Drupal 7 Module
  • Drupal Screencasts auf deutsch
  • Archiv

Das Copyright des deutschsprachigen Drupal-Benutzerhandbuches unterliegt den jeweiligen Autoren. Übersetzungen des englischsprachigen Drupal-Benutzerhandbuches unterliegen der Creative Commons License, Attribution-ShareAlike 2.0.

Hauptmenü

  • » Home
  • » Handbuch & FAQ
  • » Forum
  • » Übersetzungsserver
  • » Suche

Quicklinks I

  • Infos
  • Drupal Showcase
  • Installation
  • Update
  • Forum
  • Team
  • Verhaltensregeln

Quicklinks II

  • Drupal Jobs
  • FAQ
  • Drupal-Kochbuch
  • Best Practice - Drupal Sites - Guidelines
  • Drupal How To's

Quicklinks III

  • Tipps & Tricks
  • Drupal Theme System
  • Theme Handbuch
  • Leitfaden zur Entwicklung von Modulen

RSS & Twitter

  • Drupal Planet deutsch
  • RSS Feed News
  • RSS Feed Planet
  • Twitter Drupalcenter
Drupalcenter Team | Impressum & Datenschutz | Kontakt
Angetrieben von Drupal | Drupal is a registered trademark of Dries Buytaert.
Drupal Initiative - Drupal Association