So fügen Sie Bild-Uploads in Drupal 8 einen Zuschnitt hinzu

Einführung: Bild-Uploads auf Miniaturbildgrößen zuschneiden

Dieses Tutorial führt Drupal 8  -Benutzer durch die Schritte, die zum Installieren der Funktionen zum Zuschneiden von Miniaturansichten  für Uploads mit JavaScript erforderlich sind . Legen Sie die Größe der Miniaturansichten fest  und schneiden Sie hochgeladene Dateien manuell zu, um die richtige Balance und den richtigen Fokus für die Bilder zu gewährleisten.

Um die Zuschneidefunktion zu Bildergalerien in Drupal 8 hinzuzufügen:

  1. Das Bibliotheksmodul muss installiert sein, um JavaScript  von Drittanbietern zu hosten .
  2. Das Image Widget Crop-  Modul und die Voraussetzungen müssen installiert sein.

Es gibt zusätzliche Optionen zum Automatisieren des Zuschneidens, zum Integrieren des Zuschneidens in gängige Seiteneditor-Skripte und zum Implementieren der Funktionalität von Drupal CCK-Feldern  für Inhaltstypen. Bevor Sie beginnen, stellen Sie sicher, dass Sie über ein gutes Drupal-Hosting verfügen.

Schritt eins:
Installieren Sie das Bibliotheksmodul und erstellen Sie ein neues Verzeichnis

Laden Sie zunächst die für die Installation erforderlichen Moduldateien von drupal.org herunter. Navigieren Sie dann zu admin/modules/install und installieren Sie die Dateien, indem Sie die zip/gzip-Pakete hochladen oder verwenden Sie für den Vorgang wie gewohnt eine andere Methode wie FTP, Git, Drush usw.

Erforderliche Module – Download-Links:

  • Bibliotheken-API: ( Dateien herunterladen )

Konfiguration: Öffnen Sie  nach der Installation des Bibliotheks-API-  Moduls den Dateimanager  in cPanel und erstellen Sie ein neues Verzeichnis im Stammverzeichnis der Drupal 8-  Installation (Adresse: . ../libraries ).

So fügen Sie Bild-Uploads in Drupal 8 einen Zuschnitt hinzu

Im nächsten Schritt ist es erforderlich, eine Reihe von JavaScript-  Dateien in den Ordner /libraries hochzuladen  .

Schritt zwei:
Laden Sie die Cropper-JavaScript-Dateien auf den Webserver hoch

Navigieren Sie zur GitHub-  Seite des Cropper JQuery -Projekts, das in  Drupal 8  zum Verwalten der Bild-Uploads  verwendet wird . Die JQuery-Dateien werden für das Drupal-Modul benötigt.

Erforderliche Module – Download-Links:

  • Cropper: ( Dateien herunterladen )

Konfiguration:  Nachdem Sie die Cropper-JQuery-  Dateien von GitHub heruntergeladen haben , entpacken Sie das Archiv und laden Sie den Ordner /dist nach /libraries/cropper/dist  auf Ihrem Webserver hoch.

Hinweis: Behalten Sie alle JQuery-Dateien im Ordner /dist im Originalzustand bei.

So fügen Sie Bild-Uploads in Drupal 8 einen Zuschnitt hinzu

Nach der Installation des Bibliotheksmoduls  und der Cropper-JQuery-  Dateien sind alle Voraussetzungen für die Ausführung des Image Widget Crop-  Moduls auf Drupal 8 -Websites erfüllt.

Schritt drei:
Installieren Sie das Bild-Widget-Zuschneidemodul für D8

Um die Bildzuschneidefunktion zu installieren, sind für Drupal 8 zwei Module erforderlich . Installieren Sie diese wie beim Bibliotheksmodul  je nach Wahl von FTP, Git, Drush usw.

Erforderliche Module – Download-Links:

  • Crop API: ( Dateien herunterladen )
  • Bild-Widget-Zuschnitt: ( Dateien herunterladen )

Konfiguration:  Im Konfigurationsabschnitt für das Modul, zu finden unter:

  • Administration: /admin/config/media/crop-widget

Vergewissern Sie sich, dass die Module korrekt installiert wurden, und legen Sie die Miniaturbildeinstellungen fest.

So fügen Sie Bild-Uploads in Drupal 8 einen Zuschnitt hinzu

Hinweis: Wenn der Zuschneidetyp nicht angezeigt wird, legen Sie einen Bildstil fest. Klicken Sie auf das Kontrollkästchen, um Benutzer zu warnen, wenn Bilder in mehreren Einstellungen verwendet werden, und um die Konfigurationswerte zu speichern.

Schritt vier:
Legen Sie die Größe der Miniaturansichten von Bildern in Drupal Admin fest

Um in Drupal 8 eine benutzerdefinierte Einstellung für die Miniaturansicht von Bildern zu erstellen , navigieren Sie zu: admin/config/media/image-styles  und klicken Sie auf die Schaltfläche „Bildstil hinzufügen“ .

Benennen Sie die Einstellung und wählen Sie dann „Zuschneiden“ aus dem Menü unter „Effekte“ und klicken Sie auf „Hinzufügen“ . Geben Sie numerische Werte für die Länge und Breite des Zuschnitts  in Pixel ein und speichern Sie die Einstellungen.

So fügen Sie Bild-Uploads in Drupal 8 einen Zuschnitt hinzu

Legen Sie die Pixelwerte für das Masterbild fest und speichern Sie es anschließend. Die Einstellungen für Bildminiaturansichten müssen zur Verwendung auf ein Bildfeld in einem der Inhaltstypen in Drupal 8 angewendet werden  .

Schritt fünf:
Konfigurieren Sie Bildfeldeinstellungen für Inhaltstypen

Navigieren Sie abschließend zum Abschnitt „Drupal 8 -Inhaltstypen“ und aktivieren Sie die verschiedenen Miniaturbildgrößen  für die Verwendung auf der Website. Sie können für jeden Knotentyp, z. B. „Artikel und  Blogs“ , unterschiedliche Werte beibehalten, um mit dem CMS ein Multimedia-Veröffentlichungssystem aufzubauen.

So fügen Sie Bild-Uploads in Drupal 8 einen Zuschnitt hinzu

Konfiguration: Navigieren Sie zu Admin/Struktur/Typen  und überprüfen Sie die Bildfeldeinstellungen für jeden Inhaltstyp. Wenn das Bildfeld verwendet wird, stellen Sie die Miniaturbildgröße entsprechend ein.

Klicken Sie auf den Link „Felder verwalten“ und gehen Sie zur Registerkarte „Anzeige verwalten“  . Überprüfen Sie die Einstellungen für das Bildfeld und ändern Sie die Anzeige auf die erforderliche Bildminiaturgröße.

Fazit: Bilder hochladen und auf Miniaturbildgröße zuschneiden

Mit diesem System können Web-Publisher jeden Bild-Upload für Artikel, Blogs, Produkte usw. in Drupal 8 mithilfe von Cropper JQuery manuell  entsprechend einer festen Miniaturbildgröße zuschneiden .

Diese Methode ermöglicht den Erstellern von Inhalten mehr Kontrolle über das endgültige Erscheinungsbild von Bildern auf Webseiten. Funktioniert mit Tools wie IMCE, CKEditor, Bootstrap, Entity Browser usw.

Schauen Sie sich diese drei Top-Drupal-Hosting-Dienste an:

Kamatera
4.8

141 Benutzerbewertungen

4,00 $ /Monat
Startpreis

Besuchen Sie Kamatera

Bewertung basierend auf Expertenbewertung
  • Benutzerfreundlich
    3.5
  • Unterstützung
    3,0
  • Merkmale
    3.9
  • Zuverlässigkeit
    4,0
  • Preisgestaltung
    4.3
Hostinger
4.6

2.435 Nutzerbewertungen

2,99 $ /Monat
Startpreis

Besuchen Sie Hostinger

Bewertung basierend auf Expertenbewertung
  • Benutzerfreundlich
    4.7
  • Unterstützung
    4.7
  • Merkmale
    4.8
  • Zuverlässigkeit
    4.8
  • Preisgestaltung
    4.7
FastComet
4.8

1.588 Nutzerbewertungen

1,79 $ /Monat
Startpreis

Besuchen Sie FastComet

Bewertung basierend auf Expertenbewertung
  • Benutzerfreundlich
    4.7
  • Unterstützung
    5,0
  • Merkmale
    4.8
  • Zuverlässigkeit
    4.5
  • Preisgestaltung
    5,0
  • Möchten Sie Top-Empfehlungen zum besten Hosting erhalten ? Klicken Sie einfach auf diesen Link!