Test Plugin ImageFilter

Vorbemerkung: Bei den Beispielen unten handelt es sich um png-Grafiken. Ein erster Test mit jpg-Grafiken war nicht erfolgreich. Ggf. sollte auch noch geprüft werden, ob auf dem Debian-Linux-System unter Windows die Uploadgröße angepasst werden kann.

Mit »ImageFilter« können Bildfilter auf die Bilder der Website angewendet werden. Das Originalbild wird dabei nicht verändert. Es werden neue Bilder erstellt und in Unterordnern gespeichert. Ein Standardfilter kann in der Datei »yellow-system.ini« festgelegt werden.

Außerdem können Sie in der Datei „yellow-system.ini“ auswählen, ob die neuen Bilder im WebP-Format gespeichert werden sollen. Dort kann auch die Qualität der WebP-Bilder eingestellt werden.

Vor der Verwendung von »ImageFilter«

»ImageFilter« muss die neuen Bilder komprimieren, da die Bilddatei sonst zu groß wird. Datenstrom Yellow komprimiert die Bilder jedoch bereits beim Hochladen auf Ihren Webserver. Der Wert für die Komprimierung kann jedoch in der Datei »yellow-system.ini« festgelegt werden. Ich empfehle, „ImageUploadJpegQuality“ bei Verwendung von „ImageFilter“ von „80“ auf „95“ zu setzen.

Verwendung

  • Sie wählen den Filter als „Klasse“ in Ihrem „img-Tag“ mit der Kennung „imfi-“ aus. Beispiel:[image your-image.jpg „Alt-Text“ „imfi-contrast und Ihre Stilklassen“]
  • Verwenden Sie nur einen Filter pro „img-Tag“.
  • Nehmen Sie Ihre Einstellungen in der „yellow-system.ini“ vor.
  • „ImageFilter“ enthält nur die Filter „imfi-lowsharpen“, „imfi-sharpen“ und „imfi-contrast“.
  • Weitere Filter oder eigene Filter finden Sie unter „ImageFilterCollection“.

yellow-system.ini

  • ImageFilterDevMode: 0 or 1 (0)
  • ImageFilterUseTitleTag: 0 or 1 (0)
  • ImageFilterUseWebp: 0 or 1 (1)
  • ImageFilterImageWebpQuality: 0 - 100 (60)
  • ImageFilterImageJpegQuality: 0 -100 (80)
  • ImageFilterDefaultImfi: imfi-sharpen or imfi-yourFilter ... (imfi-original)

ImageFilterDevMode

Der »ImageFilterDevMode« ist hilfreich, wenn Sie selbst Filter entwickeln möchten. Ohne »ImageFilterDevMode« prüft »ImageFilter«, ob ein Bild bereits vorhanden ist. Bei der Entwicklung neuer Filter müssen Sie immer direkt die Wirkung sehen können. Daher werden die vorhandenen Bilder im »ImageFilterDevMode« immer überschrieben.

ImageFilterUseTitleTag

Datenstrom Yellow verwendet den „title“ für das „image tag“. Yellow verwendet hier den „alt“-Text. Mit „ImageFilterUseTitleTag“ können Sie entscheiden, ob der „title“ verwendet werden soll.

ImageFilterUseWebp

Mit „ImageFilterUseWebp“ können Sie entscheiden, ob Sie „WebP“ verwenden möchten. Weitere Informationen zu „WebP“ finden Sie beispielsweise hier:

https://developers.google.com/speed/webp?hl=de

ImageFilterImageWebpQuality

Hier kann die gewünschte Qualität der Bilder im »WebP«-Format eingestellt werden. Je niedriger die Zahl, desto schlechter die Bildqualität und desto kleiner die Bilddatei. Bitte beachten Sie, dass Datenstrom Yellow die Bilder bereits beim Hochladen auf Ihren Webserver komprimiert. Wenn Sie „ImageFilter“ verwenden, sollten Sie „ImageUploadJpegQuality“ am besten auf einen Wert zwischen „80“ und „95“ einstellen.

ImageFilterImageJpegQuality

Hier kann die gewünschte Qualität der Bilder im „JPG/JPEG“-Format eingestellt werden. Je niedriger die Zahl, desto schlechter die Bildqualität und desto kleiner die Bilddatei. Bitte beachten Sie, dass Datenstrom Yellow die Bilder bereits beim Hochladen auf Ihren Webserver komprimiert. Wenn Sie „ImageFilter“ verwenden, sollten Sie „ImageUploadJpegQuality“ am besten von „80“ auf „95“ einstellen.

ImageFilterDefaultImfi

Hier kann ein Standardfilter definiert werden. Dieser Filter wird dann auf alle Filter angewendet, wenn kein anderer Filter als CSS-Klasse angegeben ist.

Mehr siehe:https://github.com/PetersOtto/yellow-ImageFilter

Beispiele

Normale Einbindung einer Grafik

Dies geschieht z.B. mit dem Code

[image scholz-01-00.png "Er war einmal Kanzler"]

Das sieht dann so aus:

Er war einmal Kanzler

Die Filter

Es gibt die folgenden Filter:

  1. imfi-lowsharpen (imageFilter)
  2. imfi-sharpen (imageFilter)
  3. imfi-contrast (imageFilter)
  4. imfi-beach (ImageFilterCollection)
  5. imfi-beachvi (ImageFilterCollection)
  6. imfi-bw (ImageFilterCollection)
  7. imfi-bwvi (ImageFilterCollection)

Mit (aus imageFilter)

[image scholz-01-00.png "Er war einmal Kanzler" imfi-lowsharpen]

Er war einmal Kanzler

Mit

[image scholz-01-00.png "Er war einmal Kanzler" imfi-sharpen]

Er war einmal Kanzler

Mit

[image scholz-01-00.png "Er war einmal Kanzler" imfi-contrast]

Er war einmal Kanzler

Mit

[image scholz-01-00.png "Er war einmal Kanzler" imfi-beach]

Er war einmal Kanzler

Mit

[image scholz-01-00.png "Er war einmal Kanzler" imfi-beachvi]

Er war einmal Kanzler

Mit

[image scholz-01-00.png "Er war einmal Kanzler" imfi-bw]

Er war einmal Kanzler

Mit

[image scholz-01-00.png "Er war einmal Kanzler" imfi-bwvi]

Er war einmal Kanzler

Bild ohne Beschreibung

imfi-bwvi