Aktualisierung functions.api.images.php

Fragen zur Installation von CONTENIDO 4.10? Probleme bei der Konfiguration? Hinweise oder Fragen zur Entwicklung des Systemes oder zur Sicherheit?
bodil
Beiträge: 340
Registriert: Fr 7. Okt 2011, 04:10
Kontaktdaten:

Re: Aktualisierung functions.api.images.php

Beitrag von bodil » Mi 12. Aug 2020, 17:19

class.image.1.1.zip
Gezippte Version der Datei class.image.php (Version 1.1)
(6.44 KiB) 103-mal heruntergeladen
Liebe Gemeinde!
Ich habe einen ersten Entwurf zu einer Klasse, die im Prinzip das können soll, was die functions.api.images.php macht, aber einfacher zu nutzen ist und mehr Bildformate unterstützt.
Etliche Bildformate, die mit PHP verarbeitet werden können, sind fürs Internet bedeutungslos (Bitmap, wbmp, xpm, xbm) werden von meiner Klasse aber trotzdem unterstützt.
Die wesentlichen Features sind:
  • Als Input funktionieren nicht nur die Pfade zu Bildern im Upload-Bereich, es wird je auch die idupl akzeptiert.
  • Wird die Klasse über einen Dateipfad initialisiert, ist es egal, ob das Mandantenverzeichnis, der gesamte Serverpfad, nur ein upload/ oder nichts von dem enthalten ist. meinPfad/meineDatei.jpg geht genauso gut wie var/meinSerbver/meineProjekte/meineDomain/cms/upload/meinPfad/meineDatei.jpg
  • Die Klasse übernimmt viel Bildgrößenberechnung. Wer ein Bild skalieren will, muss nur Höhe oder Breite des gewünschten Outputs festlegen. Werden beide Werte festgelegt, kann entschieden werden, ob es sich dabei um Maximal- oder Minimalwerte handelt. Für die Unterscheidung gibt man der Methode (entsprechend zum css-Parameter background-size) die Werte 'cover' oder 'contain' mit.
  • Man kann aus einem einmal eingelesenen Bild beliebig viele Versionen generieren.
  • Hat man ein sehr großes Bild im Upload-Bereich, von dem man viele kleine Versionen braucht, würde das Umrechnen für jedes Bild lange dauern. Deshalb kann man der Klasse beim Initialisieren Maximalgrößen für das Bild mitgeben. Das Bild wird dann erst kleingerechnet, ehe die kleinen Versionen generiert werden.
  • Die Bildqualität lässt sich (sofern für ein Bildformat einstellbar) über die Klasse für jedes Bildformat einzeln festlegen.
  • Werden transparente Bilder in nicht-transparente Bilder umgewandelt, lässt sich festlegen, welche Hintergrundfarbe hierbei zum Einsatz kommen soll.
Grundsätzlich ist es so, dass ich die functions.api.images.php nicht komplett durchgearbeitet oder gar verstanden habe. Diese Klasse kann demzufolge durchaus Probleme aufweisen, die die functions.api.images.php längst gelöst hat. Zielgruppe dieser Klasse bin vor allem ich selbst.
Was nicht geht:
  • Die Nutzung von ImageMagick wird nicht unterstützt.
Primäres Ziel der Klasse ist es, in responsiblen Webseiten möglichst einfach Bilder in verschieden Größen zur Verfügung stellen zu können.

Arbeitsweise:
Wie mit der functions.api.images.php auch, geht es um das Generieren von (in der Regel verkleinerten) Bildversionen, die im cache-Verzeichnis abgelegt werden. Ehe ein Bild generiert wird, wird überprüft, ob es nicht schon existiert. Die get-Funktionen geben den Pfad zur gecachten Datei zurück, unabhängig davon, ob ein Bild generiert werden muss, oder ob es schon existiert.

Beispiele:

Initialisieren

Code: Alles auswählen

//laden über den Dateipfad
$im = new cImage('test/myImage.png');

//laden über die idupl
$im = new cImage(74);

// optional: unser Originalbild hat 2000 × 3000 Pixel
// wir brauchen es aber nur mit max. 400 Px breite
$im = new cImage(74, 400);
Bilder generieren

Code: Alles auswählen

// generieren einer jpg-Datei der Breite 200 Px:
$src = $im->getJpg(200);

//generieren einer jpg-Datei der Höhe 200 Px:
$src = $im->getJpg(0, 200);

//generieren einer jpg-Datei die mind. 200 Px breit und mindestens 200 Px hoch ist:
$src = $im->getJpg(200, 200);
// alternativ:
$src = $im->getJpg(200, 200, 'cover');

//generieren einer jpg-Datei die max. 200 Px breit und mindestens 200 Px hoch ist:
$src = $im->getJpg(200,200, 'contain');
Das Zuschneiden von Bilder funktioniert mit derselben Methode:

Code: Alles auswählen

//generieren einer jpg-Datei die genau 200 Px breit und genau 200 Px hoch ist
// (und ggf. nur einen Bildausschnit verwendet):
$src = $im->getJpg(200, 200, 'crop');
Die Möglichkeit zur Bildgenerierung gibt es analog für alle Bildformate:

Code: Alles auswählen

// generieren einer png-Datei der Breite 200 Px:
$src = $im->getPng(200);

// generieren einer gif-Datei der Breite 200 Px:
$src = $im->getGif(200);

// generieren einer webp-Datei der Breite 200 Px:
$src = $im->getWebp(200);

// etc.
Fehler vermeiden
Beim Umwandeln von Bildern kann viel schiefgehen. Damit weder das Errorlog vollläuft, noch die ganze Seite stehenbleibt, sind verschiedene Tests möglich.

Code: Alles auswählen

//laden über die idupl
$im = new cImage(74);

// hat das Laden funktioniert? (Gibts ein Bild mit dieser Id?)
if ($im->exists()) {
...
}
Die Klasse unterstützt jedes Bildformat, das vom Server (der GD) unterstützt wird. Welches Format möglich ist, lässt sich überprüfen:

Code: Alles auswählen

// kann der Server webp?
if ($im->typeAvailable('webp')) {
	$src = $im->getWebp(200);
}
Hintergründe
Beim Einsatz von transparenten Bildern (png oder gif) kann festgelegt werden, welche Hintergrundfarbe beim Rendern von z. B. jpg-Dateien eingesetzt werden soll. Voreingestellt ist die Farbe Weiß (255, 255, 255)

Code: Alles auswählen

// Freigestellte Bilder sollen so beigen Hintergrund haben, wie der Rest der Seite:
$im->setBackgroundColor(245, 245, 220);
$src = $im->getJpg(0, 200);
Werden Gif- oder Png-Dateien generiert, kann festgelegt werden, ob sie transparent bleiben dürfen, oder ob sie eine Hintergrundfarbe bekommen sollen. Voreingestellt ist, dass Transparenz möglich ist.

Code: Alles auswählen

// png-Dateien sollen NICHT transparent sein
$src = $im->allowTransparency(false)->setBackgroundColor(173,255,47)->getPng(250);
Bildqualität
Die Bildformate Jpg, Png und Webp erlauben die Wahl verschiedener Bildqualitäten. Hier sind Werte voreingestellt (Jpg: 80, Png: -1, Webp: 80), die aber überschrieben werden können:

Code: Alles auswählen

// generieren einer jpg-Datei mit höchster Qualität
$im->setJpgQuality(100)->getJpg(200,400);

// generieren einer Png-Datei mit Qualität 8
$im->setPngQuality(8)->getPng(200,400);

// generieren einer Webp-Datei mit Qualität 60
$im->setWebQuality(60)->getWebp(200,400);
Bildvergrößerung
Bilder werden per Voreinstellung nicht vergrößert. Es ist aber möglich, eine Vergrößerung der Bilder zuzulassen.

Code: Alles auswählen

$im->allowEnlargement(true);
Pfad des Originalbildes
Es ist möglich, Bilder über die idupl zu initialisieren. In diesen Fällen kann es nützlich sein, auch den Pfad zur ursprünglichen Datei zu erhalten:

Code: Alles auswählen

<picture>
<?php
$sizes = array(200 =>200, 400 => 450, 800 => 400, 1200 => 500, 1600 => 600);
$im = new cImage(12);
if ($im->exists()) {
  foreach ($sizes as $maxScreenWidth => $imgWidth) {
    // generate webp if available
    if ($im->typeAvailable('webp')) {
      echo '<source media="(max-width:' .  $maxScreenWidth. ')" srcset="' . $img->getWebp($imgWidth) . '">';
    }
    // generate jpg if available
    if ($im->typeAvailable('jpg')) {
      echo '<source media="(max-width:' .  $maxScreenWidth. ')" srcset="' . $img->getJpg($imgWidth) . '">';
    }
    // welcher Dateipfad gehört zu idupl 12?
    echo '<img src="' . $im->getSrc() . '" alt="' . $alt . '" title="' . $title . '">';
    // Bildresource freigeben
    $im->free();
  }
}
?>
</picture>
jpg vs. jpeg
Es werden immer beide Schreibweisen akzeptiert. Zu den Methoden getJpg() und setJpgQuality() gibt es die Alias-Methoden getJpeg() und setJpegQuality(). Die Methode typeAvailable() akzeptiert 'jpg' und 'jpeg' als Parameter.

Jetzt freu ich mich auf euer Feedback!
Grüße!
Bodil
Zuletzt geändert von bodil am Do 24. Sep 2020, 10:33, insgesamt 1-mal geändert.

Faar
Beiträge: 1915
Registriert: Sa 8. Sep 2007, 16:23
Wohnort: Brandenburg
Kontaktdaten:

Re: Aktualisierung functions.api.images.php

Beitrag von Faar » Do 13. Aug 2020, 13:46

Danke erstmal.
Viel zu lesen. Praktisch muss ich die Kommentare mal rauslöschen, um den Code besser lesen zu können.
Die functions.api.images.php fand ich jetzt nicht schlecht, sie ist aufeinander aufgebaut und kann erweitert werden.
Es werden nur nicht alle Funktionen konsequent genutzt in den Modulen.

Also müsste man Deine Klasse nur ins /classes Verzeichnis hochladen und in den Autoloader eintragen und in einem eigenen Modul nutzen?
Ich habe noch Zeitnot in einem Kaugummi-Projekt, also muss ein anderer dran.

Wo es mir meistens fehlte, das sind die Bild-Möglichkeiten im Editor, also Javascript für den TinyMCE.
Wenn ein Redakteur ein Bild einfügen will, tut er das meistens im Editor und hier fehlt mir diese Möglichkeit:

Code: Alles auswählen

 <picture>
  <source srcset="img_smallflower.jpg" media="(max-width: 400px)">
  <source srcset="img_flowers.jpg">
  <img src="img_flowers.jpg" alt="Flowers">
</picture> 
Man kann für so etwas ein Modul bauen und dieses greift dann auf Deine Klasse zurück, aber man kann es nicht über den Editor machen, soviel ich weiß?

Ich stelle mir das auch nicht so einfach vor, weil das Javascript vom tinyMCE auf PHP zugreifen müsste und aus einem Bild zeitgleich mehrere Bilder in den Größen machen, die man dann auswählen kann.
Eine Möglichkeit wäre, deine Klasse über eine Chain zu nutzen, die dann die Bilder beim Upload gleich in mehrere Größen erzeugt. Nur ist das Unsinn für alle Bilder, weil es nicht für alle sinnvoll ist.
Die möglichkeiten in eine Chain zur Laufzeit einzugreifen sind minimal.
Also fiele Chain hier aus?

Bleibt es wieder beim Javascript, das ein PHP Programm anstößt, um ein ausgewähltes Bild in verschiedenen Größen zu erzeugen und in den oben genannten Code einzubinden.

Soweit erstmal von mir.
Fliegt der Bauer übers Dach, ist der Wind weißgott nicht schwach.

bodil
Beiträge: 340
Registriert: Fr 7. Okt 2011, 04:10
Kontaktdaten:

Re: Aktualisierung functions.api.images.php

Beitrag von bodil » Do 13. Aug 2020, 14:33

Vielen Dank für dein Feedback!
Bilder aus dem Texteditor sind ein Problem. Eigentlich müsste es aber so gehen:
  • Zunächst müsste man sich überlegen, welche Arten (css-Klassen) es im Editor für Bilder geben kann und müsste für die festlegen, welche Größe die bei welchen Displaybreiten haben sollen. Diesen Zusammenhang zwischen Display-Breite und Bildgröße müsste man in einem Array ablegen. (Wie in meinem letzten Code-Beispiel.)
  • Eine Chain kann vor Ausliefern des HTML-Codes nach img-Tags suchen, die css-Klasse und das src-Attribut erkennen und den vorhandenen Tag durch ein passendes picture-Element ersetzen - generiert mit den Angaben im passenden Array.
Selbstgeschriebene Klassen lege ich grundsätzlich in einen Unterordner des Mandantenverzeichnisses und binde sie dann explizit ein:

Code: Alles auswählen

cinclude('frontend', 'includes/classes/class.image.php');
Damit gehen sie mir beim Update nicht verloren.

Oldperl
Beiträge: 4250
Registriert: Do 30. Jun 2005, 22:56
Wohnort: Eltmann, Unterfranken, Bayern
Kontaktdaten:

Re: Aktualisierung functions.api.images.php

Beitrag von Oldperl » Do 13. Aug 2020, 17:08

Servus,

das hier habt ihr dabei sicherlich schon gesehen :arrow: https://www.tiny.cloud/docs/demo/image-tools/
Inwieweit man sich da einklinken, bzw. etwas dazu bauen kann, müsste man sich halt mal anschauen.

Gruß aus Franken

Ortwin
ConLite 2.1, alternatives und stabiles Update von Contenido 4.8.x unter PHP 7.x - Download und Repo auf Gitport.de
phpBO Search Advanced - das Suchwort-Plugin für CONTENIDO 4.9
Mein Entwickler-Blog

bodil
Beiträge: 340
Registriert: Fr 7. Okt 2011, 04:10
Kontaktdaten:

Re: Aktualisierung functions.api.images.php

Beitrag von bodil » Sa 15. Aug 2020, 10:24

Nein, das kannte ich noch nicht! Danke für den Hinweis.
Das mag jetzt Geschmacksache sein, aber diese Bildbearbeitung im Text-Editor begeistert mich nicht.
Nach meiner Vorstellung sollte die Größe von Bildern im Text im Design festgelegt sein. Den Menschen in der Redaktion würde ich dann noch zugestehen, zwischen n Bildformaten auszuwählen. Aber Bilder nach Gutdünken groß- oder kleinziehen? Das passt dann doch eher zu Leuten, die gerne mal ein paar Wörter in ComicSans schreiben und Absätze nach Belieben einfärben können wollen.
Daran hängt noch ein technsiches Problem. Wie das Bild im Editor aussieht oder wirkt ist nicht aussagefähig, umsoweniger, wenn das Bild auf Displays unterschiedlichster Breite funktionieren soll. Und auch hier helfen festgelegte Bildformate. Entscheidet sich die Redakteurin für ein Bild vom Typ A, hat ihr Contenido eine Chance zu wissen, in welchen Größen das Bild für welches Display ausgeliefert werden soll.

Interssant finde ich einzig die Option, einen Bildausschnitt festlegen zu können. Aber das fände ich in der Dateiverwaltung besser aufgehoben.

bodil
Beiträge: 340
Registriert: Fr 7. Okt 2011, 04:10
Kontaktdaten:

Re: Aktualisierung functions.api.images.php

Beitrag von bodil » Do 24. Sep 2020, 10:40

Ich habe mal eine neue Version meiner Bilder-Klasse hochgeladen. Ein paar Bugs waren drin, außerdem berücksichtigt die neuste Version, dass webp-Dateien auch transparent sein können.
Den Download gibts hier: posting.php?mode=reply&f=115&t=44019#pr181269

Antworten