(1) Erforderliche Module (Version: Drupal7.0)
Views
Views Slideshow
Chaos tool suite
Libraries
Link Field
Token
(2) Installieren Sie die Module
In Drupal7 können Sie Module aus dem Admin-Bereich installieren, aber ich bin immer noch der Meinung, dass diese neue Funktion keine Bedeutung hat, da wir auf der Druapl-Site nach dem Modul-Link suchen und dann kopieren und in den Installationsbereich des Admin-Moduls einfügen müssen verrückt. Es wäre so gut gewesen, wenn sie es so etwas wie WordPress zu einem kleinen Suchfest gemacht hätten. Wie auch immer, ich werde es einfach herunterladen und auf die alte Art installieren (ich empfehle diese alte Art immer noch).
Laden Sie alle Module von der Drupal-Site herunter und installieren Sie sie im Verzeichnis yourename / sites / all / modules. Gehen Sie zu http://www.yoursitename.com/node#overlay=admin/modules und aktivieren Sie diese Module wie folgt.
(1) Ansichten (2) Ansichten Benutzeroberfläche (3) Ansichten Diashow (4) Ansichten Diashow: Zyklus (5) Chaos-Werkzeuge (6) Verknüpfung (7) Bibliotheken (8) Token (optional) (3) Bildcache erstellen
In Drupal7 ist der Imagecache Teil des Kernmoduls und wird als Image-Stil bezeichnet. Erstellen wir also von hier aus zwei Bildcaches, einen für das Schiebereglerbild in voller Größe und einen für das Miniaturbild. In diesem Tutorial verwende ich die Abmessung 935 x 293 (Pixel) für das Schiebereglerbild in voller Größe und die Abmessung 210 x 100 (Pixel) für das Miniaturbild. Hinweis: Diese Konfigurationen können je nach Ihren Anforderungen verschoben werden.
- Fullsize Slider-Bildeinstellungen
Gehen Sie zu http://www.yoursitename.com/node#overlay=admin/config/media/image-styles und klicken Sie auf den Link Neuen Stil hinzufügen (1) Geben Sie einen Bildstilnamen ein und klicken Sie auf die Schaltfläche Neuen Stil erstellen (2) ) Wählen Sie im nächsten Konfigurationsbildschirm den gewünschten neuen Stil aus und klicken Sie dann auf die Schaltfläche Hinzufügen (In diesem Tutorial wähle ich die Größe des Stils ändern). (3) Stellen Sie im nächsten Bildschirm die Breite und Höhe ein und klicken Sie auf die Schaltfläche Effekt hinzufügen. (Die Einstellungen können je nach gewähltem Stil variieren.) Ich habe die Breite auf 935 und die Höhe auf 293 Pixel eingestellt.
Führen Sie diesen Vorgang auch für das Miniaturbild aus. (Für die Miniaturbildgröße habe ich die Breite auf 210 und die Höhe auf 100 Pixel festgelegt.) (4) Neuen Inhaltstyp erstellen
Erstellen wir einen neuen Inhaltstyp. Klicken Sie in der Dashboard-Menüleiste auf Struktur und dann auf Inhaltstypen und dann auf den Link Neuen Inhaltstyp hinzufügen.
(1) Geben Sie einen für Menschen lesbaren Namen an. Ich habe ihn als "Empfohlener Schieberegler" bezeichnet (der Maschinenname wird basierend auf dem für Menschen lesbaren Namen automatisch generiert.) (2) Geben Sie eine kurze und relevante Beschreibung. (3) Einstellungen für das Einreichungsformular, die ich als Standardeinstellungen (4) Veröffentlichungsoptionen, ich habe nur veröffentlicht aktiviert (alle anderen Einstellungen deaktiviert) (5) Anzeigeeinstellungen, ich habe die Authentifizierungs- und Datumsinformationen deaktiviert. (6) Kommentareinstellungen, ich habe versteckt (deaktiviert) (7) Menüeinstellungen, ich lasse als Standardeinstellungen. (8) Klicken Sie auf die Schaltfläche Felder speichern und hinzufügen. (5) Neue Felder erstellen
Hier in diesem Beispiel erstelle ich nur zwei Dateien, und sie sind Bildfeld und Verknüpfungsfeld. Wir verwenden das Bildfeld zum Hochladen unseres Schiebereglerbilds und das Linkfeld zum Erstellen eines benutzerdefinierten Links, über den unser Schieberegler verknüpft werden soll.
Bildfeldeinstellungen
(1) Label: Slider Image
(2) Field: slider_image
(3) Field type: image
(4) Widget (form element): image
(5) Click Save button, and on the field settings page leave default settings and click on Save field settings button.
(6) On the image field configuration settings page you can configure as you wish.
Ich habe dieses Feld nach Bedarf eingestellt und einen File Director-Namen namens Slider-Image hinzugefügt, damit diese Bilder getrennt von anderen Bildern angeordnet werden. Sie können hier die maximale Upload-Größe und -Auflösung einstellen. Ich habe das Alt- und Titelfeld aktiviert und klicke schließlich auf die Schaltfläche Einstellungen speichern.
Erstellen Sie mit derselben Methode auch das Verknüpfungsfeld.
Verknüpfungsfeldeinstellungen (1) Bezeichnung: Schieberegler Verknüpfung (2) Feld: slider_link (3) Feldtyp: Verknüpfung (4) Widget (Formularelement): Verknüpfung (5) Klicken Sie auf die Schaltfläche Speichern. Für die Verknüpfungsfeldkonfigurationen überlassen Sie alles den Standardeinstellungen . Ich habe das Feld wie unten gezeigt neu angeordnet. Titelfeld Bildfeld Verknüpfungsfeld Textfeld (Sie können dieses Feld bei Bedarf sogar entfernen) Anzeige verwalten Auf der Registerkarte Anzeige verwalten können Sie konfigurieren, wie die Ausgabe des Felds angezeigt werden soll. Ich habe das Linkfeld als ausgeblendet und die Bildbezeichnung als ausgeblendet festgelegt. Drupal7: Felder verwalten (6) Feature Slider-Inhalt erstellen
Ich habe für dieses Tutorial vier vorgestellte Slider-Inhalte erstellt.
(1) Klicken Sie auf den Link zum Hinzufügen von Inhalten. (2) Erstellen Sie den Inhalt des empfohlenen Schiebereglers. (3) Geben Sie einen richtigen Titelnamen an. (4) Laden Sie das Schiebereglerbild hoch. (5) Geben Sie die Namen der Alt- und Titelfelder an Der zu verknüpfende Schieberegler (7) Belassen Sie alle anderen Einstellungen als Standardeinstellungen mit Ausnahme des Pfadfelds. Wenn Sie möchten, können Sie einen SEO-freundlichen URL-Alias angeben. (8) Speichern Sie den Inhalt.
Auf die gleiche Weise können Sie weitere Inhalte für empfohlene Schieberegler erstellen (ich habe vier Inhalte erstellt). (7) Erstellen Sie eine neue Ansicht
Jetzt ist es Zeit, unsere neue Diashow-Ansicht zu erstellen. Klicken Sie im Dashboard-Menü auf Struktur und dann auf Ansichten.
(1) Klicken Sie auf Link "Neue Ansicht hinzufügen". (2) Geben Sie den Namen der Ansicht an, den ich als "Empfohlener Schieberegler" bezeichnet habe (der Maschinenname wird automatisch generiert). (3) Geben Sie eine entsprechende Beschreibung der Ansicht ein. (4) Wählen Sie "Inhalt anzeigen" vom Typ "Empfohlener Schieberegler" (Ihr Inhalt) Modellname). (5) Deaktivieren Sie "Pge erstellen" und aktivieren Sie "Block erstellen". (6) Geben Sie den Blocktitel ein und wählen Sie das Anzeigeformat als "Diashow" der "Felder" -Elemente pro Seite 5 (Sie können die Anzahl der anzuzeigenden Elemente eingeben) (7) ) Klicken Sie auf die Schaltfläche "Fortfahren & Bearbeiten". Einstellungen für Ansichtsfelder Zuerst fügen wir ein Linkfeld hinzu (Link muss das erste Feld sein, damit alles ordnungsgemäß funktioniert). Klicken Sie also auf das Symbol "Hinzufügen" und wählen Sie in den Filtergruppen "Inhalt hinzufügen Inhalt: Link" "Schaltfläche hinzufügen & konfigurieren" im nächsten Konfigurationsfenster deaktivieren Sie "Etikett erstellen". "Prüfen" Von der Anzeige ausschließen. Klicken Sie auf "Übernehmen".
Als nächstes fügen wir ein Bildfeld hinzu. Klicken Sie also auf das Symbol Hinzufügen und wählen Sie im Filter Gruppen Inhalt aus. Inhalt hinzufügen: Bildfeld (Hinweis: Stellen Sie sicher, dass Sie das Bildfeld auswählen, das wir nur für diesen Schieberegler-Inhaltstyp erstellt haben.) Klicken Sie auf "Hinzufügen und konfigurieren" Schaltfläche "Im nächsten Konfigurationsfenster deaktivieren Sie" Etikett erstellen ".
Formatierer: Bild (wenn Sie Colorbox oder Lightbox installiert haben, können Sie diese hier auswählen!) Bildstil: Vollformat (Wählen Sie den im obigen Schritt erstellten Bildcache aus) Verknüpfen Sie das Bild mit: Nichts Stileinstellungen: Standardeinstellungen beibehalten Kein Ergebnisverhalten: Verlassen Standardeinstellungen Ergebnisse umschreiben: Aktivieren Sie Dieses Feld als Link ausgeben. Linkpfad: [view_node] (Hinweis: Scrollen Sie ein wenig nach unten, und Sie können Ersatzmuster sehen, die vom Core Token-Modul erstellt wurden (wenn wir das Linkfeld nicht als erstes festgelegt haben) Linkfeldoption kann hier nicht angezeigt werden) Kopieren Sie nur [view_node], scrollen Sie nach oben und fügen Sie es in das Linkpfadfeld ein.) Klicken Sie auf "Übernehmen".
Schließlich benötigen wir noch ein Feld für die Miniaturansicht. Klicken Sie also auf das Symbol Hinzufügen und wählen Sie im Filter Gruppen Inhalt Inhalt hinzufügen: Bildfeld (Hinweis: Stellen Sie sicher, dass Sie das Bildfeld auswählen, das wir nur für diesen Schieberegler-Inhaltstyp erstellt haben.) Klicken Sie im nächsten Konfigurationsfenster auf "Hinzufügen & Konfigurieren", deaktivieren Sie "Etikett erstellen" und PRÜFEN SIE AUSSCHLUSS AUS ANZEIGE, Formatierer: Bild (wenn Sie Colorbox oder Lightbox installiert haben, können Sie diese hier auswählen!) Bildstil: Miniaturbild (Wählen Sie den Bildcache Sie haben im obigen Schritt erstellt.) Bild verknüpfen mit: Nichts Stileinstellungen: Standardeinstellungen beibehalten Kein Ergebnisverhalten: Standardeinstellungen beibehalten Ergebnisse umschreiben: Aktivieren Aktivieren Sie dieses Feld als Link. Verknüpfungspfad: [view_node] (Hinweis: Scrollen Sie ein wenig nach unten und Sie können Ersatzmuster sehen, die vom Core Token-Modul erstellt wurden (falls nicht)t Setzen Sie das Linkfeld so, dass zuerst die Linkfeldoption hier nicht angezeigt wird.) Kopieren Sie nur [view_node], scrollen Sie nach oben und fügen Sie es in das Linkpfadfeld ein.) Klicken Sie auf "Übernehmen".
Ansichten Filtereinstellungen
In Ansichten3 werden die Filter am Anfang erstellt, während wir den Inhaltstyp und andere Einstellungen auswählen! Wenn Sie zusätzliche Filter benötigen, können Sie diese hier erstellen!
Ansichten Stileinstellungen
Klicken Sie auf Diashow formatieren | Einstellungen und im nächsten Konfigurationsfenster wie unten eingestellt; (1) Listentyp: Ungeordnete Liste (2) Wrapper-Klasse: Standardeinstellungen beibehalten (3) Stil> Skin: taub (4) Folien> Diashow-Typ: Zyklus (5) Zyklusoptionen Sie müssen das jQuery-Zyklus-Plugin herunterladen und jquery kopieren. cycle.all.min.js to sites / all / library / jquery.cycle Das Plugin finden Sie unter http://malsup.com/jquery/cycle .
IN EINFACHEM ENGLISCH Erstellen Sie einen Ordner mit dem Namen "Bibliotheken" im Verzeichnis site / all und erstellen Sie dann einen weiteren Ordner mit dem Namen "jquery.cycle" in diesem Verzeichnis. Kopieren Sie schließlich nur "jquery.cycle.all.min.js" und fügen Sie ihn ein dieses Verzeichnis.
(6) Transittion: Fade (7) Aktion: Pause beim Hover (8) Internet Explorer Tweaks: Standard (9) Widgets: Sie können entweder oder beide oben und unten wählen (ich wähle hier unten und die erweiterten Einstellungen wie folgt;) (10) Untere Widgets> Pager> Pager-Typ: Felder (11) Pager-Feld: Inhalt: Bild (Hinweis: Das letzte, das wir für den Daumen hinzugefügt haben, verwechseln Sie nicht, da beide Felder den gleichen Namen haben.) (12) Folie aktivieren und Pause beim Pager-Hove: Aktiviert, Steuerelemente und Schieberegler bleiben deaktiviert. (13) Klicken Sie auf die Schaltfläche Übernehmen.
Format Feldeinstellungen anzeigen
Inline fields: Choose the thumbnail field as inline.
Click Apply button. (Note: Well it actually doesn't change much in appearance but it does change in the code. Next step use the firebug and find the class and add some styles to display properly.)
(8) Erstellen Sie eine benutzerdefinierte Region (optionaler Schritt)
(1) Öffnen Sie in Ihrem Themenordner die Datei your_theme_name.info und fügen Sie eine neue Region wie die unten gezeigte hinzu. Regionen [Featured_Slider] = Featured Slider und speichern Sie die .info-Datei. (2) Öffnen Sie die Datei themen page.tpl.php und fügen Sie diesen Code dort hinzu, wo Ihre Folie wie unten gezeigt angezeigt werden soll.
Sie können sogar eine benutzerdefinierte Titelseitenvorlage wie page - front.tpl.php erstellen, sodass Sie keine Änderungen an der Standardvorlage page.tpl.php vornehmen müssen. [9] Aktivieren und konfigurieren Sie den Block
Jetzt wird dieser Block im deaktivierten Bereich der Blöcke angezeigt. Gehen Sie daher im Dashboard-Menü zu Struktur> Blockieren und aktivieren Sie den Block für einen Standardbereich für Themen oder den von uns erstellten benutzerdefinierten Bereich (Featured_Slider). (Die Regionen variieren je nach verwendetem Thema.)
Blockkonfigurationseinstellungen Nachdem Sie den Block aktiviert haben, erhalten Sie einen Link zum Konfigurieren des Blocks. Klicken Sie daher auf den Link Konfigurieren und dann auf den unten festgelegten Abschnitt Einstellungen.
(1) Blocktitel (wenn Sie nicht möchten, dass der Blobk-Titel angezeigt wird, geben Sie einfach ein) (2) Sie erhalten erneut alle aktivierten themenspezifischen Regionseinstellungen. Bei Sichtbarkeitseinstellungen (3) Seiten> Block auf bestimmter Seite anzeigen: Wählen Sie Nur die aufgelisteten Seiten und geben Sie ein, damit dieser Block nur auf der Startseite angezeigt wird. CSS-TIPPS ZUR ANZEIGE VON THUMBNAILS INLINE
Fügen Sie diese CSS-Codes zu Ihrem Themen-Stylesheet hinzu, um die Miniaturansichten inline anzuzeigen. .views-Diashow-Steuerelemente-unten .views-Diashow-Pager-Feldelement {float: left; Rand: 20px 6px; } Nehmen Sie die erforderlichen Anpassungen vor.
Schauen Sie sich diesen Senfkorn-Medien-Podcast an: Views Slideshow Theming .
Während des Podcasts führt Bob einige der Grundlagen der Diashow "Ansichten" sowie das Thema der Ausgabe durch. Es basiert auf Drupal 6, aber ich glaube, dass die meisten Grundlagen und Lektionen gleich sein werden. Mit nur wenig CSS kann eine Diashow eine Tonne besser aussehen . Ich kann diesen Podcast nur empfehlen, wenn Sie gut aussehende Diashows wünschen.
quelle
Wenn Sie mehr über die Diashow von Ansichten erfahren möchten (z. B. mit Miniaturansichten), müssen Sie dieses gute Tutorial sehen: http://www.brightwebsitedesign.com/how-to-install-views-slideshow-module-on-drupal7
quelle