Crop-Funktion

[Matze-Katze]

Moin moin,

ich wollt ma fragen, ob nicht irgendwer Lust hat, ne Extension zu erstellen, die es ermöglicht, Ausschnitte von Bildern zu erstellen.

Das wäre besonders bei News im Zusammenhang mit Vorschaubildern praktisch. Die jetzige Crop-Funktion, die in TL integriert ist, ist sehr vereinfacht und schneidet immer nur von der Mitte aus.
Was ich meine, ist hier verwirklicht: http://www.phpimageeditor.se/phpimag...src=sample.jpg
(einfach auf den Reiter "Crop Image" klicken)

Die Scripts dazu sind open source.

Hab das in meinem eigenem CMS eingebaut und dort alles automatisiert ablaufen lassen:
- Bild wird per ajax hochgeladen und auf minimale Bildgröße überprüft
- dann als Entwurf zwischengespeichert
- jetzt kann man den Ausschnitt des Bildes, der bei mir einfachheitshalber schon in der Höhe und Breite vordefiniert ist, mit dem oben verlinkten Editor auswählen.
- Wenn der Artikel geschrieben ist und man auf Speichern klickt, werden von dem Entwurf drei Bilder erstellt: eins in "Originalgröße", eins als großes Vorschaubild (500x250) und ein kleines Vorschaubild (212x106)

Bin jetzt mit ner Website auf TYPOlight umgestiegen und hab noch keine Ahnung davon, wie man hier Extensions erstellt bzw. das Backend von TYPOlight anpasst.

[andreas.schempp]

Hallo Matze,

Das Problem ist wo das in TYPOlight umgesetzt werden sollte. Am ehesten wohl in der Dateiverwaltung, damit Bilder als Duplikat mit neuem Namen gespeichert werden können. Oder was meinst du?

[planepix]

Hallo zusammen,
so etwas ähnliches verwendet SlideshowPro Director.
Dort kann der User innerhalb eines Bildes den Mittelpunkt bestimmen.
Vielleicht eine Möglichkeit / Anregung?

[andreas.schempp]

Also der Bildpunkt müsste ja dann in der Datenbank gespeichert werden, aber Bilder sind nicht in der Datenbank abgelegt.
Was haltet Ihr denn davon wenn Bilder in der Dateiverwaltung zugeschnitten werde können? Die Frage ist halt warum nicht gleich lokal, was sicherlich besser wäre...

[planepix]

Hallo Andreas,

ja lokal ist sicher sinnvoll(er); aus der Praxis weiß ich jedoch auch, das spätere Anwender (Redakteure) trotz Schulung und Hinweis auf Bildgrößen etc. doch gerne einfach die Bilder direkt aus der Kamera auf den Server "schieben" und wenns dann nix aussieht das gerne online ändern würden....

Eine Crop-Funktion fände ich optional sinnvoll.

[do_while]

Nun wissen wir aber alle, wenn erstmal ein zu großes Bild hochgeladen ist, kommt man ggf. nicht mehr ohne Fehlermeldung in die Dateiverwaltung hinein. Ein Löschen über FTP ist dann notwendig.

[planepix]

Danke Hagen, das dann ergänzend dazu... Und via FTP haben viele nicht die Möglichkeit...

[andreas.schempp]

Eine Verkleinerung von Bildern über 3000px ist wohl nur mit ImageMagick möglich. Ich habe dazu bereits ein Ticket eröffnet (weis aber gar nicht was der Stand ist).

Am schönsten wäre natürlich ein direktes Cropping im Inhaltselement, aber ich sehe nicht wie das möglich sein sollte...

[Matze-Katze]

Es kann doch wohl nicht so schwer sein, diesen imageeditor einzubinden?!
Man macht "einfach" bei der Dateiverwaltung nen Button neben die Bilder, der, wenn man ihn anklickt, den Editor mit dem ausgewählten Bild öffnet. Dann kann man die Cropfunktion des Editors benutzen und auf Speichern klicken. Gegebenenfalls macht man noch einen "Speichern unter..."-Button daneben, für die, die das alte Bild auch noch behalten wollen.

Diesen "Bild bearbeiten"-Button könnte man dann ja theoretisch neben jedes "Bild einfügen"-Element bei Artikeln, Nachrichten etc. setzen, sodass man, wenn man ein Bild für z.B. eine News auswählt, dieses bei der Auswahl auf das gewünschte Format "croppen" kann.

[Matze-Katze]

Genial
Freu mich schon auf das Ergebnis!

[Iblass]

Also ich denke es wäre praktischer, wenn diese Funktion dann zur Verfügung steht, wenn man die Bilder benutzt, also wenn man sie in den Inhalt einfügt. Sei es jetzt in tinymce oder als Inhaltselement.

Und mir fällt grad noch ein schönen Feature ein. Mit imagick lassen sich auch 2 Bilder übereinanderlegen. So könnte man vllt zusätzlich noch eine Option machen, in der man auswählen kann, welches Bild man (zb. als Rahmen) dadrüber legen will.
Das ganze vllt auch als externes Modul, sodass man erst Rahmen definieren kann und die dann auswählt.

[Nils Riel]

Wie wäre es denn damit? http://tinymce.moxiecode.com/plugins_imagemanager.php

Wobei der direkt nicht geht, es gibt aber bestimmt Alternativen, welche unter GPL oder so stehen.

[FloydThreepwood]

Wirklich nett wär ja auch sowas: http://www.nwhite.net/MooCrop/

Allerdings finde ich schon, dass man damit den FileTree erweitern sollte und nicht die Deteiverwaltung. Diese Crop oder auch sonstwie bearbeiteten Fotos sollten dann einfach in einen Temp Ordner geschoben werden.

[andreas.schempp]

Wirklich nett wär ja auch sowas: http://www.nwhite.net/MooCrop/

Genau das habe ich schon in meiner FancyAvatar Erweiterung eingebaut: http://demo.iserv.ch/index.php/fancyavatar.html

Allerdings finde ich schon, dass man damit den FileTree erweitern sollte und nicht die Deteiverwaltung. Diese Crop oder auch sonstwie bearbeiteten Fotos sollten dann einfach in einen Temp Ordner geschoben werden.

Wie bereits angesprochen wird das nicht gehen... Denn der FileTree speichert den Pfad zur Originaldatei und nicht zu einer "zugeschnittenen Version". Die Datei müsste im entsprechenden tl_files Ordner abgelegt und dann mittels FileTree ausgewählt werden.

[Toflar]

Und ich erwähne es gerne auch noch einmal. TL ist nicht Photoshop. Bearbeitungsprogramme gehören lokal auf ein Comp und nicht ins Internet - das kann man dem Kunden sehr einfach klar machen

[Matze-Katze]

Und ich erwähne es gerne auch noch einmal. TL ist nicht Photoshop. Bearbeitungsprogramme gehören lokal auf ein Comp und nicht ins Internet - das kann man dem Kunden sehr einfach klar machen

Meine Güte. Wenn ich ein Ausschnitt von einem Bild haben will, öffne ich auch nicht Photoshop.
Es ist tausendmal praktischer, online ein Tool zu haben, mit dem man die Ausschnitte erstellt, als es offline zu machen.
Gerade für Kunden, die mit Computern sonst nicht viel am Hut haben, ist es äußerst mühsam denen die Funktionsweise eines Bildbearbeitungsprogramm zu erklären.

Jedes professionell erstellte Newssystem beinhaltet entweder eine automatisiertes Croppen oder eine Auswahlmöglichkeit des Ausschnitts mit bereits festgelegten Werten für Höhe und Breite.

Es kann mir keiner erzählen, dass Spiegel Online Redakteure ihre Bilder mit Photoshop zurechtschneiden, bevor sie sie hochladen!

EDIT:
@leo.unglaub: Wär toll, wenn du mir mitteilen könntest, wann es mit deiner Extension so weit ist

[Toflar]

@Matze-Katze: Praktischer mags schon sein, aber es ist sicher nicht der richtige Weg, ein 1200px breites Bild hochzuladen und dann zuzuschneiden. Ihr könnt mir erzählen was ihr wollt, aber das ist nicht "normaler" Umgang mit dem Web

Mal schauen was Leo so hinzaubert

[FloydThreepwood]

Wie bereits angesprochen wird das nicht gehen... Denn der FileTree speichert den Pfad zur Originaldatei und nicht zu einer "zugeschnittenen Version". Die Datei müsste im entsprechenden tl_files Ordner abgelegt und dann mittels FileTree ausgewählt werden.

Wie sicher ist denn das? Man kann ja nun seinen eigenen FileTree ableiten und als zusätzliches Widget bereitstellen, dieses könnte dann wie die Avatar Erweiterung einen eigenen Ordner bekommen oder den TL-TMP Ordner nutzen und eine andere Bilddatei zurückliefern, bzw. einen anderen Pfad in die DB ablegen. Andererseits könnte man aber immer-noch in einer eigenen Tabelle die Originaldatei speichern und für Backend-Nachbearbeitung bereitlegen. Wo ist da der Gedankenfehler?

Ach und nur weil TYPOlight kein Photoshop ist, ist ein klein wenig Bildbearbeitung bestimmt nichts schlimmes.

[Matze-Katze]

@Toflar: Ich denke schon, denn das 1200px Bild würde dann beim Hochladen automatisch auf meinetwegen 800x600px verkleinert.

Mit dem zurechtschneiden meine ich übrigens das hier:
"orginial": http://www.spiegel.de/images/image-4...eryV9-hcjv.jpg
Ausschnitt: http://www.spiegel.de/images/image-4...9free-hcjv.jpg

[FloydThreepwood]

Der Gedankenfehler ist dass du das Bild in der DB speichern willst. Das ist einfach unschön und extrem schlechter Programmierstil. So was mache ich nicht und ich hoffe der Rest hier auch nicht.

Nein, ich meine den Originalpfad. Das original Bild kann dann weiterhin aus dem Dateisystem gelöscht werden und da hänge ich mich ein und lösche dann auch das bearbeitete Bild (Cron-Job). Es wäre nur ein Modul als Mittler notwendig.

Dadurch halte ich mich an die von TL vorgegebenen Grundlagen und erweitere sie nur um einen zusätzlichen Zwischenspeicher. Aber wir hätten den Vorteil, dass ein Bild in mehreren Varianten und Schnitten auftreten kann. Etwas was meiner Meinung nach in Typolight durchaus gewünscht ist, nur bisher ohne User-Interface existiert. Schließlich muss ein Thumbnail ja nicht zwangsläufig ein identisches Verhältnis mit seiner Großansicht haben.

[FloydThreepwood]

GENAU! Ich mache jetzt schon die 2. Page auf der ich serverseitig Runde Ecken um die Bilder Klebe. Zwar hab ich das bisher immer über spezielle Inhaltselemente gelöst, denke aber schon länger über eine finalere Lösung nach. Wenn man so eine Erweiterung hätte, die Bilder im TMP ablegt und HOOKS erlaubt könnte man sich da einfach einklinken. Und besser noch, einen FileTree könnte ich auch über beliebige Module ausweiten nur indem ich den DCA ändere/überlagere.

Ich werd das in Zukunft mal ausprobieren, denke ich. Oder bedenke ich da doch was nicht?

[Matze-Katze]

Gibt's was neues?

[andreasisaak]

Das Thema interessiert mich auch. Gibt es mittlerweile was neues?


Um mich der Diskussion anzuschließen:

Ich weiß aus dem Berufsalltag das man zwar gerne Photoshop für jedes noch so kleine Bild nutzt aber manche Kunden haben nunmal kein Photoshop oder gleich gute Alternativen.

So habe ich beispielsweise in einem aktuellen Projekt den Fall das auf der Kontaktseite eine Anzahl von Ansprechpartner + Bild abgebildet werden. Neben dem Bild steht der Name, der Titel, die E-Mail, Telefon und Fax. Die normale Größe beträgt 75px + 100px... Da aber bei manchen keine Fax Nr. angezeigt werden soll, habe ich mich dafür entschieden 2 Bildgrößen zu benutzen. Soll der Kunde jetzt wirklich immer ein neues Bild hochladen wenn bei einem Mitarbeiter die Faxnr wegfällt?

Wäre es nicht sinnvoller das verkleinerte Bild mit einer Cropfunktion so zu bearbeiten das der Kopf auf jeden Fall nicht abgeschnitten wird?

Ich hab mal ein Beispielbild hinzugefügt.

Wie man sieht sind die oberen 2 Bilder etwas höher. Wenn ich da jetzt ein Originalbild einklinke wird alles super angezeigt. Sobald ich aber die unteren beiden durch ein Original tausche, wird bei dem Ansprechpartner der Kopf angeschnitten....

[Matze-Katze]

Hey,

sieht schon mal ganz gut aus.

Hab hier ein paar Verbesserungsvorschläge/Bugs:
1. ich würd das Inputfed mit dem neuen Dateinamen länger machen.
2. wenn man eine Datei mit neuer Dateiendung abspeichert (z.B. png), wird in der Dateiverwaltung ausgegeben, dass es keine valide PNG-Datei sei. Ich würde das Verändern der Dateiendung nicht erlauben und in dem Inputfeld einfach nur den Dateinamen eintragen lassen.
3. Wenn man den Ausschnitt speichert, kommt keinerlei Bestätigung. Es wäre gut, wenn sich das Fenster beim erfolgreichen Speichern (beim nicht erfolgreichen Speichern sollte dann ne Fehlermeldung ausgegeben werden) schließt und dann das Backendfenster aktualisiert und die Dateiverwaltung öffnet.
4. Ich denke, dass dieses Tool in der Dateiverwaltung nicht unbedingt am sinnvollsten platziert ist. Wie wäre es, wenn man den Cropbutton bei jeder Bildauswahl hinzufügt, bei der man einen Ausschnitt auswählen kann.
Ich könnte mir das so vorstellen, dass man das Bild auswählt, die Breite und Höhe auswählt (z.B. 500x250) und dann auf einen Button "Ausschnitt wählen..." klickt, der ein neues Fenster mit dem ausgewählten Bild öffnet und das Auswahlviereck erscheint, das die angegebenen Maße (500x250) hat und nicht veränderbar ist, sondern nur verschiebbar.
Entweder man speichert das ausgeschnittene Bild irgendwo neu ab oder man speichert nur die Daten des Ausschnitts in der DB und lässt das Bild cachen.

[andreasisaak]

@leo

Hi, ich hab das Tool mal installiert und ausprobiert aber leider finde ich das Viereck zum beschneiden des Bildes nicht. Ich hab auf das Symbol geklickt, das neue Popup ging auf und das wars dann auch schon. Weder ein Viereck war zu sehen, noch hat er mir das Bild unter dem neuen Dateinamen abgespeichert.

Der Ordner und das Bild haben die korrekten Rechte. Das habe ich überprüft. Hast du eine Idee was noch falsch sein könnte?

PS: Die Platzierung der Funktion ist wirklich etwas unglücklich gewählt

[andreasisaak]

Ja nur wie soll der User/Admin das wissen nachdem er das Modul installiert? Es fehlt zumindest der Hinweis..

Oder ich habe ihn beim besten Willen noch nicht entdecken können

Danke dir übrigens fürs schnelle Bugfixing

[andreasisaak]

Hm du magst recht haben.
Ich persönlich habe den Dateimanager im letzten Jahr grade mal 2x aufgehabt. Am liebsten würde ich den Button und die Funktion in den Einstellungen entfernen (solange keine Redakteure vorhanden sind) und nie wieder aufmachen müssen.

SFTP ist für mich als Entwickler einfach schneller!
Das Redakteure den Dateimanager benötigen steht natürlich außer Frage. Die würden den Button schneller entdecken als ich ;-)

Soll aber in keine Diskussion ausarten, war nur als Info gedacht. Vielleicht handhaben es viele Admins ja ähnlich.

[andreasisaak]

Keine Sorge. Bilder sollten auch nicht in der DB gespeichert werden ;-) hab ich ja nie behauptet.

Mach wie du es magst. Ist nicht meine Extension!

[Matze-Katze]

Wenn du selbst .dev bist wie du sagst dann kannst du es ja gerne in den Artikel oder das Content Element rein packen, aber ich werde NICHT die DAten im CE bearbeiten und dann womöglich die Bilddaten in der DB ablegen. Das geht gegen jede Coder-Ehre.

Wo sollte es denn deiner Meinung nach angesiedelt sein?

Wer lesen kann, ist ...

Ich habe nie gesagt, dass man das Bild in der DB speichert. Ich weiß, dass das ein ziemliches No-Go ist.
Ich weiß aber, dass das Javascript beim betätigen des Submitbuttons bestimmte Informationen ausgibt, die in einer PHP-Klasse benutzt werden, um das Bild dementsprechend auszuschneiden und abzuspeichern.

Soweit ich weiß, sind das:

$finalCropLeft = 0;
$finalCropRight = 0;
$finalCropTop = 0;
$finalCropBottom = 0; 

Diese vier Werte kann man wunderbar in einer DB speichern und damit das Bild cachen, wenn es als Inhaltselement z.B. bei einer Nachricht ausgegeben wird.


Hier habe ich bereits beschrieben, wo man diese Funktion (meinetwegen auch zusätzlich) ansiedeln kann:

4. Ich denke, dass dieses Tool in der Dateiverwaltung nicht unbedingt am sinnvollsten platziert ist. Wie wäre es, wenn man den Cropbutton bei jeder Bildauswahl hinzufügt, bei der man einen Ausschnitt auswählen kann.
Ich könnte mir das so vorstellen, dass man das Bild auswählt, die Breite und Höhe auswählt (z.B. 500x250) und dann auf einen Button "Ausschnitt wählen..." klickt, der ein neues Fenster mit dem ausgewählten Bild öffnet und das Auswahlviereck erscheint, das die angegebenen Maße (500x250) hat und nicht veränderbar ist, sondern nur verschiebbar.
Entweder man speichert das ausgeschnittene Bild irgendwo neu ab oder man speichert nur die Daten des Ausschnitts in der DB und lässt das Bild cachen.

[Matze-Katze]

Das ist doch momentan nicht anders? Oder nicht? Ich kenn mich mit dem Core, wie bereits gesagt, noch nicht so genau aus.
Aber die Bilder werden doch, wenn ich bei einem Newsbeitrag einen Ausschnitt von 500x250 Pixel von einem Bild wähle, auch gecroppt. Zwar nur von der Mitte, aber das dürfte einen nicht so großen Unterschied erzeugen.

Weil das zu viel Ressourcen frisst cached man die Bilder doch dann... Oder seh ich das falsch?

[FloydThreepwood]

ne, nicht du, aber da hatte jemand in dieser diskussion verlangt oder vorgeschlagen.

Och du meine Güte, musst du mich jetzt zum 2. Mal falsch zitieren?

MFG Jan

[Matze-Katze]

Das ist doch momentan nicht anders? Oder nicht? Ich kenn mich mit dem Core, wie bereits gesagt, noch nicht so genau aus.
Aber die Bilder werden doch, wenn ich bei einem Newsbeitrag einen Ausschnitt von 500x250 Pixel von einem Bild wähle, auch gecroppt. Zwar nur von der Mitte, aber das dürfte einen nicht so großen Unterschied erzeugen.

Weil das zu viel Ressourcen frisst cached man die Bilder doch dann... Oder seh ich das falsch?

Krieg ich noch ne Antwort auf meine Frage? Das würd mich noch interessieren...

Und gibts mittlerweile Fortschritte, was die Crop-Funktion angeht?