FriendsOfREDAXO / focuspoint

Erweitert den Medienpool um die Fähigkeit, den Fokuspunkt eines Bildes zu bestimmen.
MIT License
58 stars 7 forks source link

Vorschau für Medienpool #30

Closed muenzberg-me closed 6 years ago

muenzberg-me commented 6 years ago

Sehr praktisch wäre es, wenn man im Medienpool beim setzen des Focuspoints direkt eine Vorschau für einen bestimmten Bildausschnitt bekommt.

Ich stell mir das etwa so vor:

  1. Auswahl eines Medientyps des Media Managers
  2. Einblenden der Vorschau auf Grunde der Daten des Medientyps.
olien commented 6 years ago

Hallo,

das ist eine coole Idee aber wie willst Du das realisieren (nicht der technische Teil)? Ich kann doch mit den Daten beliebig viele MediaManager Typen bestimmen. Je nach Anwendung "passt" das Bild ja auch im Hoch- und Querformat!

Welches Bild hiervon würdest Du anzeigen?

http://jonom.github.io/jquery-focuspoint/demos/grid/dolphin.html

Und welchen Nutzen hätte das?

Freue mich über weitere Ideen / Erklärungen!

LG Oliver

muenzberg-me commented 6 years ago

Ich würde das als Auswahlfeld gestalten, wo man auswählt welcher Medientyp geprüft werden soll.

Auch wäre ein Multifocuspoint cool für verschiedene Medientypen.

Ich bin selbst gleichzeitig Fotograf und hab da immer eine genaue Vorstellung was angezeigt werden soll. Immer wieder ins Frontend oder so zuschauen ob es passt nervt.

olien commented 6 years ago

Ich bin überfordert. :-) Wie soll z.B.: ein MedienTyp für ein großes Bild (SliderContent) gut darstellbar sein?

Wäre so etwas nicht besser für Dich?

https://fengyuanchen.github.io/cropper/

Evtl. als AddOn mit einer eigenen Seite. Losgelöst vom Medienpool? Da der Medienpool gerade neu gebaut wird würde ich mal abwarten was kommt ...

eaCe commented 6 years ago

Das könnte man über ein Dropdown machen, der die Typen abfragt. Dann wäre nur die Frage wo man das ganze anzeigen sollte (vielleicht ein Modal?). Funktioniert aber auch nur dann gut, wenn im Typ eine größe angegeben ist, ansonsten halt default Bootstrap-Responsive-Img...

muenzberg-me commented 6 years ago

Genau ich würde ein DropDown machen und unter dem Bild wo man den Focuspoint setzt kann man ein Vorschaubild machen. Es muss ja nur den passenden Ausschnitt zeigen nicht die reale Größe

olien commented 6 years ago

Vielleicht warten wir auf den neuen Medienpool...

eaCe commented 6 years ago

Wer weiß wann der kommt ;) vielleicht habe ich später mal Muse und werfe einen Vorschlag/PR in den Raum

olien commented 6 years ago

Sehr gerne! (darfst du auch direkt mergen :-))

muenzberg-me commented 6 years ago

Keinen Stress ist ein NiceToHave

IngoWinter commented 6 years ago

Gehts hier um den Media Manager Effekt, den ich noch nie benutzt habe und von dem ich auch nicht weiss, was er macht?

olien commented 6 years ago

Ja. Wenn Du die Focuspoint Daten für die Ausgabe per CSS nutzt bleibt das ganze Bild erhalten und du brauchst den MM Effekt nicht.

Die Mediamanger Effekte (fit/resize) berücksichtigen bei der Erstellung der Datei den gesetzten Focuspoint.

LG Oliver

tbaddade commented 6 years ago

@IngoWinter Wenn du ein Hochformat hast und willst daraus ein Querformat croppen, dann definierst du via Focuspoint den Punkt, der auf jeden Fall im Querformat zu sehen sein soll. Der Punkt ist somit Bild abhängig und nicht wie im Crop Effekt (horizontale/vertikale Ausrichtung) global für alle Bilder.

Außerdem eignet sich das AddOn auch gut für responsive Bilder. Wenn du unterschiedliche Formate für die Breakpoints ausliefern willst. Bsp. Quadrat auf Mobile und 16:9 ab Tablet. Der festgelegte Focalpoint ist dann immer mit im Bild enthalten.

eaCe commented 6 years ago

Moin,

hat etwas gedauert, aber hier mal ein Ansatz. Bevor ich den Kram allerdings als PR einreiche wollte ich das ganze noch ein mal zur Diskussion stellen. Ich habe hier mal ein .gif als Vorschau. Ich hoffe man erkennt die Funktionsweise...

mediapreview

tbaddade commented 6 years ago

Sehr schöne Sache @eaCe

Mir würde gefallen, wenn das select unterhalb des Originalbildes auf die rechte Seite geht und direkt nach einer Auswahl darunter das Bild erscheint. Ohne Modal sozusagen.

olien commented 6 years ago

Hey @eaCe,

ich finde es superklasse. Select rechts fände ich auch sinniger. Das Modal würde ich auch nicht brauchen...

Gruß Oliver (freu mich grad!)

P.S:

PR Kannst Du direkt mergen wenn Du magst. (Versionsänderung, Changelog und evtl. Redame nicht vergessen :-))

eaCe commented 6 years ago

@tbaddade @olien

So dann vielleicht?

mediapreview2

muenzberg-me commented 6 years ago

So sieht das nach was geilem aus aber so das sich das Bild Live ändert wäre noch cool dazu gibts ja eigentlich ein Java-Script dabei

tbaddade commented 6 years ago

@eace ja super.

@muenzberg-me Kannst du genauer beschreiben was du meinst?

muenzberg-me commented 6 years ago

@tbaddade In dem Addon gibt es ja auch noch die Möglichkeit den Focuspoint über etwas css und das beiliegende JavaScript zu setzen. Damit könnte man doch sicher eine Art Liveansicht bauen, direkt die Veränderung des Focuspoints angezeigt wird. Ohne ständig neu das Bild laden zu müssen?

tbaddade commented 6 years ago

Ohne ständig neu das Bild laden zu müssen?

Das Bild muss geladen werden, da es unterschiedliche Mediatypen gibt. Das Bild sollte aber nicht neu erstellt werden, da es nach dem ersten Laden aus dem Cache geholt wird. Wobei @eaCe ich vermute du erstellst das Bild direkt live oder?

olien commented 6 years ago

@eaCe Find ich super...

olien commented 6 years ago

Mann könnte aus "Focuspoint zurücksetzten" auch noch einen Button ("Reset") machen und den Button und das Select nebeneinander platzieren... was mein ihr?

muenzberg-me commented 6 years ago

Ja das wäre das optische schönere

eaCe commented 6 years ago

Okay, nächster Versuch… :)

mediapreview3

muenzberg-me commented 6 years ago

Perfekt!!!!!

Los Los will haben :-P

tbaddade commented 6 years ago

@eaCe Werden die erstellten Bilder gecached? Und könntest du in deinem GIF einmal verschiedene Formate (Hoch/Quer) zeigen.

eaCe commented 6 years ago

@tbaddade ich rufe die Bilder für die Vorschau über index.php?rex_media_type=... auf, reicht das alleine schon? Ich dachte dann werden die Bilder generell gecached. Es wird hier ja auch nichts beschnitten und müsste neu gecached werden?

tbaddade commented 6 years ago

Lege mal einen Mediatypen mit dem focuspoint_fit Effekt an mit diesen Einstellungen. Keine weitere Effekte

screenshot 2017-12-14 12 26 24

Verändere den Focalpoint und das Bild müsste neu erstellt und gecached werden.

eaCe commented 6 years ago

Ich bin nicht sicher ob ich das richtig verstehe, aber ich müsste den Typen dann auch nutzen um den Cache zu erstellen? Oder sollte das speichern eines Focuspoints dazu ausreichend sein? Denn nur mit Typ kann ich im Cache-Ordner nichts finden.

tbaddade commented 6 years ago

Du wählst doch den Typen in deinem select aus und lässt dir das Bild liefern. Oder nutzt du die CSS-Angaben um das Bild zu positionieren?

eaCe commented 6 years ago

Aktuell nutze ich CSS, kann aber auch den Typen nehmen, das ist mir recht egal :)

tbaddade commented 6 years ago

Ich fände es gut, wenn das Bild tatsächlich durch die Auswahl des MediaTypen vom MediaManager erstellt wird. In der Box ein max-width: 100% und man hat die richtige Vorschau des Bildes.

eaCe commented 6 years ago

Dann verlieren wir aber den Kontext gegenüber den ausgewählten Medientypen? Dann wäre es eine generelle Vorschau.

olien commented 6 years ago

Sinnvoll wäre es, das ja noch mehr Effekte auf dem generierten Bild passieren angewendet werden könnten.

tbaddade commented 6 years ago

Dann wäre es eine generelle Vorschau.

Ging es denn nicht darum? Ich dachte die Vorschau soll genau das Bild mit dem gesetzten Focalpoint und der Auswahl des Mediatypen zeigen. Sozusagen eine Vorschau wie es tatsächlich im Frontend ausgegeben wird.

eaCe commented 6 years ago

Ich hatte @muenzberg-me so verstanden, das die Vorschau anhand eines vorhanden Typen erzeugt werden soll.

tbaddade commented 6 years ago

Die Typen sind alle vorhanden und du gibts diese bereits in der Auswahl vor.

eaCe commented 6 years ago

Okay, dann müsste aber jeder Benutzer den Effekt für sich selbst anlegen. Denn wenn ich focuspoint_fit nutze ist die Ausgabe nur dann sinnvoll wenn ich auch die gewünschte Größe wähle oder sehe ich das falsch?

olien commented 6 years ago

Stimmt. Vielleicht macht es sinn bei keiner Auswahl eine MM Types die CSS Geschichte zu nutzen und wenn ein MM Typ ausgewählt wird dann wird der in der Vorschau angezeigt.

Vielleicht können auch nur die MM Typen zur Auswahl angezeigt werden, bei denen auch die Effekte Focuspoint: fit oder Focuspoint: resize benutzt werden :-)

LG Oliver

eaCe commented 6 years ago

Ich überlasse diese Entscheidung euch. Ich halte es für sinnvoll, wenn die Vorschau für alle Typen verfügbar ist, auch wenn es nicht unbedingt Auswirkungen auf die Vorschau gibt…

Und zu unterscheiden ob die Effekte genutzt werden oder nicht sollte auch recht problemlos funktionieren. Das würde ich dann wie von Oliver vorgeschlagen übernehmen.

muenzberg-me commented 6 years ago

Also was @eaCe da gebastelt hat und im letzten Gif gezeigt hat ist genau das was ich wollte.

Mir ging es selbst nie darum das alle Effekte angezeigt werden sondern lediglich eine Vorschau was der Focuspoint im ausgewählten MM Type für Auswirkungen hat um das genau einstellen zu können. Da ich auch viel mit der Fotografie mache ist das für mich wichtig, das entsprechende Thumbnails oder Banner das richtige anzeigen.

Der Effekt Focuspoint: resize hat für mich absolut null Funktion, da es da ja nur um die pure Skalierung geht und nicht um die Beschneidung wie im Focuspoint: fit.

Ich würde sehr gern mal die aktuelle version von @eaCe auf meiner Seite testen wollen.

eaCe commented 6 years ago

@muenzberg-me du kannst zum testen die aktuelle Version nutzen:

https://github.com/eaCe/focuspoint

muenzberg-me commented 6 years ago

Okay da läuft noch was recht schief. Also bei mir ist das Bild voll gezoomt obwohl ich im Focuspoint: fit eingestellt habe Zoo 100%. ich glaube dein Ansatz ist nicht ganz richtig.

eaCe commented 6 years ago

Wie ist denn die Ausgabe im FE? Kannst du den Vergleich vielleicht mal zeigen? Ich habe Zielgröße verwenden (0%) benutzt und es hatte den Anschein das es funktioniert.

tbaddade commented 6 years ago

Der Effekt Focuspoint: resize hat für mich absolut null Funktion, da es da ja nur um die pure Skalierung geht und nicht um die Beschneidung wie im Focuspoint: fit.

Genau. Wir verwenden auch nur den focuspoint_fit mit 100%. @eaCe 100% bedeutet hier, das soviel Bild wie möglich um den Focalpoint herum verwendet werden soll.

eaCe commented 6 years ago

Okay, das heißt aber auch, wenn das Bild nicht beschnitten/resized wird, sieht man keinen Effekt, richtig?

tbaddade commented 6 years ago

sieht man keinen Effekt, richtig?

"Effekt" wäre hier das falsche Wort, da der Mediatyp verschiedene Effekte haben kann.

Man sieht keine Änderung des Bildes. Es kann durchaus passieren, dass Bilder 1:1 durchgereicht werden.

eaCe commented 6 years ago

Genau deswegen bin ich nicht sicher, ob mein Ansatz falsch ist oder ob hier vielleicht ein Einstellungsfehler bei @muenzberg-me vorliegt :|

tbaddade commented 6 years ago

Verwende nur den Effekt "focuspint_fit" und alle anderen Effekte würde ich bei Tests außen vor lassen.

Bsp. Die Breite des Bildes ist dabei immer 400px.

Focuspoint screenshot 2017-12-14 17 27 15

Ausgabe 1:1 semperoper

Ausgabe 16:9 semperoper-2

Ausgabe 21:9 semperoper-3

eaCe commented 6 years ago

Das ist genau das Verhalten das ich erwarte.

Ich übernehme nun die Idee von Oliver und werde checken ob im Mediatypen ein Focuspoint-Effekt vorhanden ist und das Bild ausgeben. Im anderen Falle werde ich bei der CSS Variante bleiben, wenn das so für alle in Ordnung ist.