Hinzufügen von Zuschneiden zu Bild-Uploads in Drupal 8

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

Diese Lernprogramm wird führen Drupal 8 Benutzer durch die zur Installation erforderlichen Schritte Bild Miniaturansicht Funktionen zum Hochladen mit JavaScript. einstellen Bild Miniaturansicht Größen und Zuschneiden hochgeladener Dateien manuell, um das richtige Gleichgewicht zu gewährleisten & Fokus für Frames.


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

  1. Das Bibliotheken Das Modul muss installiert sein, um Drittanbieter zu hosten JavaScript.
  2. Das Bild-Widget-Zuschneiden Modul & Voraussetzungen müssen installiert sein.

Es gibt zusätzliche Optionen, um das Zuschneiden zu automatisieren, das Zuschneiden in gängige Seiteneditor-Skripte zu integrieren und die Funktionalität zu implementieren Drupal CCK Felder auf Inhaltstypen. Stellen Sie vor dem Start sicher, dass Sie ein gutes Drupal-Hosting haben.

Erster Schritt: Installieren Sie das Bibliotheksmodul & Neues Verzeichnis erstellen

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

Erforderliche Module – Download-Links:

  • Bibliotheks-API:(Dateien herunterladen)

Aufbau: Nach der Installation der Bibliotheks-API Modul öffnen Dateimanager im cPanel und erstellen Sie ein neues Verzeichnis im Stammverzeichnis des Drupal 8 Installation (Adresse:. ../ Bibliotheken).

Hinzufügen von Zuschneiden zu Bild-Uploads in Drupal 8

Im nächsten Schritt muss ein Satz von hochgeladen werden JavaScript Dateien an die / Bibliotheken Mappe.

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

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

Erforderliche Module – Download-Links:

  • Cropper:(Dateien herunterladen)

Aufbau: Nach dem Herunterladen der Cropper JQuery Dateien von GitHub, Packen Sie das Archiv aus & Laden Sie die / dist Ordner zu / library / cropper / dist auf Ihrem Webserver.

Hinweis: Behalten Sie alle JQuery-Dateien bei, die sich in der befinden / dist Ordner im Originalzustand.

Hinzufügen von Zuschneiden zu Bild-Uploads in Drupal 8

Nach der Installation der Bibliotheken Modul & das Cropper JQuery Dateien, alle Voraussetzungen für die Ausführung der Bild-Widget-Zuschneiden Modul ein Drupal 8 Websites sind vollständig.

Schritt 3: Installieren Sie das Image Widget Crop Module für D8

Zum Installieren der Image-Zuschneidefunktion sind zwei Module erforderlich Drupal 8. Wie bei der Bibliotheken Modul, installieren Sie diese nach Wahl von FTP, Git, Drush, etc..

Erforderliche Module – Download-Links:

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

Aufbau: Im Konfigurationsabschnitt für das Modul finden Sie unter:

  • Verwaltung: / admin / config / media / Crop-Widget

Vergewissern Sie sich, dass die Module korrekt installiert wurden & Legen Sie die Miniaturansichten fest.

Hinzufügen von Zuschneiden zu Bild-Uploads in Drupal 8

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

Schritt 4: Legen Sie die Miniaturbildgrößen für Bilder in Drupal Admin fest

Um eine benutzerdefinierte Miniaturansicht für Bilder zu erstellen Drupal 8, Navigieren Sie zu: admin / config / media / image-styles und klicken Sie auf die Schaltfläche zu “Bildstil hinzufügen”.

Benennen Sie die Einstellung und wählen Sie dann “Ernte” aus dem Menü unter “Auswirkungen” und klicken Sie auf “Hinzufügen”. Geben Sie numerische Werte für die Länge ein & Breite der Ernte in Pixel & Speichern Sie die Einstellungen.

Hinzufügen von Zuschneiden zu Bild-Uploads in Drupal 8

Stellen Sie die Pixelwerte für das Master-Bild ein & dann speichern. Das Bild Miniaturansicht Einstellungen müssen auf ein Bildfeld in einem der Inhaltstypen in angewendet werden Drupal 8 für den Einsatz.

Fünfter Schritt: Konfigurieren der Bildfeldeinstellungen für Inhaltstypen

Navigieren Sie abschließend zu Drupal 8 Inhaltstypen Abschnitt und aktivieren Sie die verschiedenen Miniaturansichten zur Verwendung auf der Website. Sie können für jeden Knotentyp unterschiedliche Werte beibehalten, z Artikel & Blogs, Aufbau eines Multimedia-Publishing-Systems mit dem CMS.

Hinzufügen von Zuschneiden zu Bild-Uploads in Drupal 8

Aufbau: Navigieren Sie zu admin / struktur / typen & Überprüfen Sie die Bildfeldeinstellungen für jeden Inhaltstyp. Wenn das Bildfeld verwendet wird, stellen Sie die Größe der Miniaturbilder entsprechend ein.

Klicken Sie auf “Felder verwalten”verlinken und weiter zum “Anzeige verwalten” Tab. Überprüfen Sie die Einstellungen für das Bildfeld und ändern Sie die Anzeige auf die erforderliche Miniaturbildgröße.

Fazit: Hochladen & Bilder auf Miniaturbildgröße zuschneiden

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

Mit dieser Methode können Inhaltsersteller das endgültige Erscheinungsbild von Bildern auf Webseiten besser steuern. Funktioniert mit Tools wie IMCE, CKEditor, Bootstrap, Entity Browser usw..

Schauen Sie sich diese Top 3 Drupal Hosting Services an:

ChemiCloud

Startpreis:
2,76 $


Verlässlichkeit
10


Preisgestaltung
9.9


Benutzerfreundlich
9.9


Unterstützung
10


Eigenschaften
9.9

Bewertungen lesen

Besuchen Sie ChemiCloud

Hostinger

Startpreis:
0,99 $


Verlässlichkeit
9.3


Preisgestaltung
9.3


Benutzerfreundlich
9.4


Unterstützung
9.4


Eigenschaften
9.2

Bewertungen lesen

Besuchen Sie Hostinger

A2 Hosting

Startpreis:
$ 3,92


Verlässlichkeit
9.3


Preisgestaltung
9.0


Benutzerfreundlich
9.3


Unterstützung
9.3


Eigenschaften
9.3

Bewertungen lesen

Besuchen Sie A2 Hosting

Verwandte Anleitungen

  • So erstellen Sie eine animierte Diashow in Drupal 8
    mittlere
  • So verwalten Sie Social Media-Miniaturansichten in Drupal 8?
    mittlere
  • Verwendung Verschlüsseln Sie SSL-Zertifikate mit Drupal 8
    mittlere
  • Wie installiert man & Konfigurieren Sie Ubecart mit Drupal
    Neuling
  • Wie installiert man & Verwenden Sie Twitter Bootstrap als Drupal 8-Theme
    Neuling
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me