Drupal Tutorial: Erstellung einer Masonry-Grid-Landingpage mit Flow2

Eine starke Online-Präsenz zieht nicht nur potenzielle Kunden an und vermittelt einen guten Eindruck von Ihrem Unternehmen, sondern kann auch dazu beitragen, sich durch die richtige Kombination aus optisch ansprechenden Designs und Inhalten von der Konkurrenz abzuheben.

jQuery Masonry wird als ein revolutionäres Grid-Layout-Plugin bezeichnet, das Elemente vertikal verschiebt und so den Abstand vertikaler Höhen minimiert, im Gegensatz zu CSS-Floats, die Elemente von links nach rechts verschieben. Es platziert Elemente optimal basierend auf dem verfügbaren vertikalen Raum, ähnlich wie ein Maurer Steine in eine Wand einpasst. Das Masonry- oder Grid-Style-Website-Template kann Ihrer Website einen zusätzlichen "Oomph"-Faktor verleihen, der Ihre Website von anderen abhebt. Es sorgt dafür, dass die Websites sauber und organisiert aussehen und mit den regulären Websites im Web mithalten können.

Flow2 ist ein Sub-Theme, das auf Bootstrap basiert und in Verbindung mit Masonry Grid Layout in Bezug auf die Präsentation Wunder wirken kann. Es positioniert jedes Element an der nächsten offenen Stelle im Raster, wodurch vertikale Lücken zwischen Elementen unterschiedlicher Höhe minimiert werden.

In diesem Tutorial erstellen wir eine Masonry-Grid-Landingpage mit Flow 2 in Drupal 8.

TL;DR

Erstellen Sie ein Flow 2 Sub-Theme mit Bootstrap als Basistheme und einigen zugehörigen Modulen, um ein Masonry-Grid-Layout zu erhalten, indem Sie -
 
Schritt 1: Theme-Installation
Schritt 2: Installation abhängiger Module
Schritt 3: Site-Konfiguration

Entwicklung des Masonry-Theme-Layouts

• Schritt 1: Installieren Sie das Theme
   
  • Um das Flow 2 Theme zu installieren, installieren Sie zuerst das erforderliche Bootstrap Theme als Basis.
     
  • Laden Sie das Flow Theme von Drupal.org herunter, installieren Sie es und legen Sie es als Standard fest.
     
  • Erstellen Sie Dummy-Artikel, um das Ausgaberesultat zu überprüfen. Im Moment ist die Ausgabe der Drupal-Standard mit Flow 2 Theme-Stil. Die Standardausgabe nach der Aktivierung des Flow2 Themes ist:

    

• Schritt 2: Installieren der erforderlichen Module
   
  • Um das Masonry-Grid-Layout zu erreichen, benötigen Sie die folgenden zusätzlichen Module.
    Masonry API
    Masonry Views
    Diese beiden Module arbeiten mit dem Libraries-Modul zusammen.
     
  • Installieren Sie das Modul mit Composer mit den folgenden Schritten:
     
    • Öffnen Sie Ihr Terminal oder CMD oder führen Sie den folgenden Befehl aus: 'drupal/masonry_views:^1.0'
      Dadurch werden alle Ihre abhängigen Module im Ordner /module heruntergeladen.
       
  • Laden Sie das Masonry-Plugin herunter
    
    v2 mit Branch 2.x. Benennen Sie die Datei um, damit sie sich befindet unter: /libraries/masonry/jquery.masonry.min.js
    v3 mit Branch 3.x. Benennen Sie die Datei um, damit sie sich befindet unter: /libraries/masonry/masonry.pkgd.min.js
     
    • Erstellen Sie ein Verzeichnis für Bilder (im Bibliotheksverzeichnis) und laden Sie die imagesloaded library herunter.
       
    • Benennen Sie es um, damit es sich befindet unter: /libraries/imagesloaded/imagesloaded.pkgd.min.js
       
    • Laden Sie die Masonry API herunter und aktivieren Sie sie (und optional Masonry Views)
       
    • Überprüfen Sie /admin/reports/status, um sicherzustellen, dass das Masonry-Plugin erkannt wurde.
       
    • Klicken Sie einfach auf v2, v3, imagesloaded.pkgd.min.js.
       
    • Speichern und verschieben. Erstellen Sie einen Ordner im Stammverzeichnis, in dem sich die Site- und Modulordner befinden.
       
    • Ordnername Bibliotheken > Masonry oder imagesloaded > Fügen Sie Ihre Datei masonry > v2, v3 und imagesloaded > imagesloaded.pkgd.min.js ein
       
• Schritt 3: Konfigurieren des Themes
   
  • Fügen Sie mehrere Artikel in Drupal hinzu
     
  • Ansichtskonfiguration. Gehen Sie zu Ansicht und bearbeiten Sie die Startseite
     
    • Format | Stil
      
      Öffnen Sie Format > wählen Sie den Masonry-Stil aus der genannten Liste aus.
    • Format | Einstellung
      
      In den Stileinstellungen haben wir die Möglichkeit, eine Zeilenklasse hinzuzufügen.Im Stilsystem

Final Responsive Output

Und es ist geschafft!

Das Drupal Flow 2 Modul wird von OpenSense Labs entwickelt und unterstützt. Das Projekt ist nicht durch die Sicherheitsrichtlinie abgedeckt. Die Nutzung erfolgt auf eigenes Risiko.