Serendipity Forums

Posted: **Wed Oct 17, 2012 6:14 pm**

Hi

Vielleicht hat da ja jemand schon mehr Erfahrungen gesammelt...

Gibt es eine Möglichkeit das usergallery Plugin so zu pimpen, dass vertikale thumb Bilder nicht auf das default size 110px aufgezogen werden, da sie sonst sehr verschwommen sind?

Oder sollte man besser erst geeignete vertikale Thumbs in der ML anlegen?

Gäbe es überhaupt ein gallery plugin was eventuell besser für ein Fotoblog geeignet ist?

Zb. wünschte ich auch, man könnte den Verzeichnisbaum als "Bild"-Ordner, also statt der Verzeichnisbaum Links ein Ordner-Bild o.ä. anzeigen.

Wenn ich so darüber nachdenke, ließe sich bestimmt noch mehr finden....

Posted: **Wed Oct 17, 2012 6:45 pm**

Timbalu wrote:Gibt es eine Möglichkeit das usergallery Plugin so zu pimpen, dass vertikale thumb Bilder nicht auf das default size 110px aufgezogen werden, da sie sonst sehr verschwommen sind?

Ich denke mal, Du meinst windschief. Verschwommen würde eher auf eine ungünstige Kompressionsrate bei JPGs hin deuten.

Nein, gibt es (soweit ich sehe) nicht. Man kann ja in der Konfiguration lediglich einstellen, über welche Seite die Beschränkung auf welches Maß festgelegt wird.

Generell wäre das meines Erachtens sehr löblich – die allseits beliebten „Bilderreihen“ in Einträgen z.B. wären dann deutlich einfacher zu bändigen. Allerdings müsste man dafür eben einen Ausschnitt des Bildes machen, der exakt dem eingestellten Format und idealerweise auch mindestens den eingestellten Dimensionen entspricht, damit es weder windschief wird noch Qualitätsverluste durch hochskalieren entstehen.

YL

Posted: **Wed Oct 17, 2012 7:00 pm**

"windschief" ist ein schönes Wort!

Es wird allerding proportional richtig vergößert, kommt aber vom viel kleineren thumb, also zb 74x110px und hat dann dadurch doch etwas verschwommenes ...

Rein theroretisch kann man das element style { width: 100% } mit

Code: Select all

img.gallery_thumb {
    width: auto !important;
}

überschreiben, aber das ist auch noch nicht so das Wahre!

Ich hätte gerne etwas zumindest semiprofessionelles!

Posted: **Wed Oct 17, 2012 9:27 pm**

Timbalu wrote:"windschief" ist ein schönes Wort!

Wir haben hier oben jede Menge Bäume, die das sind.

Ist aber nicht genau das, was ich meinte, aber offenbar auch nicht das, was Du meintest. Was ich meine, passiert z.B., wenn man ein 4:3-Bild auf einem 16:9-Bildschirm auf volle Größe skaliert. Sieht man meistens als erstes an Köpfen.

Timbalu wrote:Es wird allerding proportional richtig vergößert, kommt aber vom viel kleineren thumb, also zb 74x110px und hat dann dadurch doch etwas verschwommenes ...

Also hat das Bild z.B. physikalisch 74x110 Pixel, wird aber gemäß Voreinstellung auf z.B. 110xwasauchimmer hochgezogen? Das wäre „normaler“ Qualitätsverlust. Man kann ein Bild (oder besser: eine Binärgrafik, mit Rastergrafiken wie SVG geht das natürlich) nicht wirklich ohne Qualitätsverlust (meist in Form von Artefakten) größer ziehen, als es ursprünglich ist, schon gar nicht mit (womöglich schon totkomprimierten) JPGs als Ausgangsbild.

Oder hat das Bild wasauchimmer und es wird ein Thumbnail von 74x110 Pixeln erzeugt, der dann übel aussieht? (Kannst Du davon mal ein Beispiel posten?) Das wäre … öhm … komisch.

Timbalu wrote:Rein theroretisch kann man das element style { width: 100% }

Äh. Wo kommt denn das her und worauf genau wird es angewendet? Doch nicht etwa auf das img-Element? Das kann natürlich nur scheiße aussehen. Dann wird die Breite des Bildes auf 100% des Elternelementes gesetzt, die Höhe aber wahrscheinlich nicht angepasst – das sähe dann aus wie das eingangs beschriebene 4:3/16:9-Beispiel.

YL

Posted: **Thu Oct 18, 2012 8:19 am**

Die usergallery speist sich ja aus der der normalen MediaLibrary. Dort werden Bilder auf das Format 110x(~73)px im horizontalen Format und (~73)x110px im vertikalen Format zugeschnitten. Das sind die Fotos die als image01.serendipityThumb.ext vorliegen und ebenso an die usergallery weitergegeben werden. Die usergallery pimpt das img dann mit w:100% style wie beschrieben auf.
Womit wir - nach unserem kleinen Ausflug - wieder bei der Ausgangsfrage wären, denn eine Überschreibung mit 'auto' oder 'inherit' ist nur ein kurzfristiger workaround für das eigentliche Problem und leider etwas zu klein.

Posted: **Thu Oct 18, 2012 8:45 am**

Hi!

Äh, verstehe ich das richtig, Du willst das alle Bilder im selben Format, also z.b. 4:3 vorliegen - also immer 110x83 Pixel - und willst dann in einem anders proportioneten Bild aus 110x73 die 110x83 Pixel machen?

Sowas geht ja nur, indem man das Bild beschneidet. Das ist leider immer relativ komplex, weil man ja das Bild automatisch beschneiden muss und dann evtl wichtige Bildteile wegschneiden würde...?

Grüße,
Garvin

Posted: **Thu Oct 18, 2012 9:08 am**

garvinhicking wrote:Du willst das alle Bilder im selben Format, also z.b. 4:3 vorliegen - also immer 110x83 Pixel - und willst dann in einem anders proportioneten Bild aus 110x73 die 110x83 Pixel machen?

Das wäre sogar noch interessanter ... wie meinen??

Allerdings die IMHO beste Lösung für thumb Galerien ist das quadratische Format. Damit ließen sich am einfachsten tolle Lösungen auf der Ausgabeseite zelebrieren. Man müsste in der ML einfach ein zusätzliches tool anbieten, was die automatische Thumbgenerierung auf einen mittelgroßen quadratischen Ausschnitt - natürlich als User request - reduziert.

Die usergallery macht eben folgendes - sie setzt die columns <div class="serendipity_gallery_thumbs" style="width: 19%;"> zb bei 4 Bildern per row oder <div class="serendipity_gallery_thumbs" style="width: 14%;"> bei 5 Bildern per row. Das beeinflusst natürlich die Ausgabe erheblich, die wie gesagt ihr img.100% setzt. Da da das aber auf den SerendipityThumbs basiert, kann man sich ja leicht vorstellen, dass Vergrößerungen entsprechend verschwommen aussehen.

Posted: **Thu Oct 18, 2012 11:17 am**

Timbalu wrote:Das beeinflusst natürlich die Ausgabe erheblich, die wie gesagt ihr img.100% setzt. Da da das aber auf den SerendipityThumbs basiert, kann man sich ja leicht vorstellen, dass Vergrößerungen entsprechend verschwommen aussehen.

Vor allem ist Bildskalierung mittels CSS ziemlich „teuer“ in puncto Performance, zumal man nicht unbedingt davon ausgehen kann, dass jeder die Thumbnails auf 110px einstellt, und sieht spätestens dann scheiße aus, wenn die Bilder vergrößert werden müssen. Das sollte schon serverseitig bei der Thumbnail-Generierung passieren.

Ich hab in einer Bildergalerie bei einem Kunden den Fall, dass alle Thumbnails im gleichen Format ud ggf. als Ausschnitt (automagisch) erzeugt werden (siehe Bild 7) – das ist schon aus Sicht eines Foto-Perfektionisten nicht schön, aber eben in Sachen Gestaltung der Vorschauliste ziemlich ideal.

YL

Posted: **Thu Oct 18, 2012 11:26 am**

Eben!

Interessant. Mit was genau hast du das realisiert?

Posted: **Thu Oct 18, 2012 12:14 pm**

Timbalu wrote:Mit was genau hast du das realisiert?

Mit ProcessWire. Viel mehr kann ich dazu tatsächlich gar nicht sagen, denn ich übergebe da im Template wirklich nur die gewünschte Thumbnail-Größe, den Rest erledigt das System.

Die (sehr geniale) PW-API stellt mir für Bilder eine Methode namens size() zur Verfügung, der ich nur die gewünschten Dimensionen übergebe. Die generiert die Thumbnails, ist aber eben darauf ausgelegt, bei Bedarf zu beschneiden – wollte man in PW das Verhalten von s9y emulieren, müsste man da lustigerweise ziemlich viel Template-Code schreiben.

YL

Posted: **Thu Oct 18, 2012 12:29 pm**

Hi!

Also Template-Code müsste man eigentlich garnicht so viel basteln, kann man ja durchaus als Smarty-Fnktion implementieren:

Code: Select all

<img src="{$file|@cropThumbnail:110:110}">

Das wiederum könnte man an die serendipity_makeThumbnail() sache durchreichen, das bei Smarty-Aufruf wiederum die Datei nur überschreibt wenn sie noch nicht existiert.

Der knackendere Teil hiervon wäre allerdings auch die Beschneidungsmethode. Da bin ich immer noch nicht so überzeugt wie man das Beschneiden regulieren sollte, ob man da von der bildmitte ausgeht, oder vom oberen linken oder unteren rechten Rand...optimalerweise sollte man das wohl als Parameter durchreichen.

Sowohl imagemagick als auch gdlib unterstützen das beschneiden eines Bildes, man müsste also "eigentlich nur" die entsprechenden Parameter raussuchen.

Grüße,
Garvin

Posted: **Thu Oct 18, 2012 12:57 pm**

garvinhicking wrote:Der knackendere Teil hiervon wäre allerdings auch die Beschneidungsmethode. Da bin ich immer noch nicht so überzeugt wie man das Beschneiden regulieren sollte, ob man da von der bildmitte ausgeht, oder vom oberen linken oder unteren rechten Rand...optimalerweise sollte man das wohl als Parameter durchreichen.

Optimalerweise legt man für jedes Bild den Ursprung des Ausschnitts manuell fest, um sicherzustellen, dass die bildwichtigen Anteile mitgenommen werden. Das ist natürlich unbenutzbar, wenn man mal davon ausgeht, das solche Galerien ziemlich groß sein können und kein Mensch sich durch zig Bilder hampelt, um den perfekten Bildausschnitt festzulegen.

Woran sollten aber GD/ImageMagick „erkennen“, was die bildwichtigen Anteile sind? Die einzig denkbare Lösung wäre wohl, den Ausschnitt (wenn er denn überhaupt nötig ist) automagisch aus der Bildmitte zu erzeugen (was bei nicht sooo wenig Bildern auch ganz gut funktionieren dürfte) und dann diesen optional manuell „überschreiben“ zu können.

YL

Posted: **Thu Oct 18, 2012 1:45 pm**

yellowled wrote:Die einzig denkbare Lösung wäre wohl, den Ausschnitt (wenn er denn überhaupt nötig ist) automagisch aus der Bildmitte zu erzeugen (was bei nicht sooo wenig Bildern auch ganz gut funktionieren dürfte) und dann diesen optional manuell „überschreiben“ zu können.

Sehe ich auch so!
Sollten wir tatsächlich so etwas für die ML implementieren können, fände ich das sehr schick.
Die /serendipity_admin_image_selector.php?serendipity[adminModule]=images&serendipity[adminAction]=imgedit&serendipity[fid]=5 macht ja auch schon so etwas - annähernd...

Vielleicht bräuchten wir (da) nur so eine Stapelverarbeitung a la

Code: Select all

exec('/path/to/convert -size 120x120 '$filename.'.'.$extention.' -thumbnail 120x120^ -gravity center -extent 120x120 '120x120-'.$filename.'.'.$extention.');

einfügen
Das im template über Smarty oder so zu machen wäre glaube ich nicht so ideal, dann lieber als plugin.

Posted: **Thu Oct 18, 2012 2:41 pm**

Ist das eigentlich so vorgesehen, dass crop images von serendipity_admin_image_selector.php so eine backup Datei in der ML hinterlässt? 1350565959.Foto-88.JPG.backup

Posted: **Thu Oct 18, 2012 2:47 pm**

Timbalu wrote:Ist das eigentlich so vorgesehen, dass crop images von serendipity_admin_image_selector.php so eine backup Datei in der ML hinterlässt? 1350565959.Foto-88.JPG.backup

Die Crop-Funktion wurde niemals ordentlich implementiert; ich hatte sie geschrieben und wollte nur nicht dass es total verloren geht.

Das ganze als Smarty-Modifier zu implementieren das automatisch, ohne Benutzerinteraktion, skalieren kann fände ich schon am praktikabelsten...

Grüße,
Garvin

Serendipity Forums

pimp usergallery plugin vertical images

pimp usergallery plugin vertical images

Re: pimp usergallery plugin vertical images

Re: pimp usergallery plugin vertical images

Re: pimp usergallery plugin vertical images

Re: pimp usergallery plugin vertical images

Re: pimp usergallery plugin vertical images

Re: pimp usergallery plugin vertical images

Re: pimp usergallery plugin vertical images

Re: pimp usergallery plugin vertical images

Re: pimp usergallery plugin vertical images

Re: pimp usergallery plugin vertical images

Re: pimp usergallery plugin vertical images

Re: pimp usergallery plugin vertical images

Re: pimp usergallery plugin vertical images

Re: pimp usergallery plugin vertical images