Vorschau für Medienpool
muenzberg-me opened this issue · 60 comments
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:
- Auswahl eines Medientyps des Media Managers
- Einblenden der Vorschau auf Grunde der Daten des Medientyps.
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
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.
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 ...
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...
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
Vielleicht warten wir auf den neuen Medienpool...
Wer weiß wann der kommt ;) vielleicht habe ich später mal Muse und werfe einen Vorschlag/PR in den Raum
Sehr gerne! (darfst du auch direkt mergen :-))
Keinen Stress ist ein NiceToHave
Gehts hier um den Media Manager Effekt, den ich noch nie benutzt habe und von dem ich auch nicht weiss, was er macht?
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
@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.
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...
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.
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 :-))
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
@eaCe ja super.
@muenzberg-me Kannst du genauer beschreiben was du meinst?
@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?
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?
Mann könnte aus "Focuspoint zurücksetzten" auch noch einen Button ("Reset") machen und den Button und das Select nebeneinander platzieren... was mein ihr?
Ja das wäre das optische schönere
Okay, nächster Versuch… :)
Perfekt!!!!!
Los Los will haben :-P
@eaCe Werden die erstellten Bilder gecached? Und könntest du in deinem GIF einmal verschiedene Formate (Hoch/Quer) zeigen.
@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?
Lege mal einen Mediatypen mit dem focuspoint_fit Effekt an mit diesen Einstellungen. Keine weitere Effekte
Verändere den Focalpoint und das Bild müsste neu erstellt und gecached werden.
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.
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?
Aktuell nutze ich CSS, kann aber auch den Typen nehmen, das ist mir recht egal :)
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.
Dann verlieren wir aber den Kontext gegenüber den ausgewählten Medientypen? Dann wäre es eine generelle Vorschau.
Sinnvoll wäre es, das ja noch mehr Effekte auf dem generierten Bild passieren angewendet werden könnten.
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.
Ich hatte @muenzberg-me so verstanden, das die Vorschau anhand eines vorhanden Typen erzeugt werden soll.
Die Typen sind alle vorhanden und du gibts diese bereits in der Auswahl vor.
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?
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
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.
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.
@muenzberg-me du kannst zum testen die aktuelle Version nutzen:
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.
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.
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.
Okay, das heißt aber auch, wenn das Bild nicht beschnitten/resized wird, sieht man keinen Effekt, richtig?
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.
Genau deswegen bin ich nicht sicher, ob mein Ansatz falsch ist oder ob hier vielleicht ein Einstellungsfehler bei @muenzberg-me vorliegt :|
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
Ausgabe 1:1
Ausgabe 16:9
Ausgabe 21:9
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.
Find ich super!
Eine Sache noch… Wenn ich das „echte“ Bild mit einem Focuspoint-Fit Effekt anzeigen live aktualisieren möchte, muss ich den Focuspoint vorher speichern. So würde ich bei jedem setzen des Focuspoints die Daten direkt speichern. Ich bin nicht sicher ob man das so machen sollte oder ob das einige verwirren könnte?
@eaCe muss ich den Focuspoint vorher speichern.
Nicht unbedingt. Du kannst die Werte im Effekt "focuspoint_fit" auch direkt anpassen (siehe Beispiel unten). Das Problem wird dann aber das Caching sein. Durch das Speichern des Formulars werden die bisherigen Cachedateien auf jedenfall gelöscht. Wie wäre es neben "Focuspoint zurücksetzen" einen Button "Focuspoint speichern" zu setzen. Der würde ebenfalls einfach das Formular abschicken.
Hier ist ein Beispiel wie ich die Höhen und Breiten einzelner Effekte anpasse.
Aufruf für den EP
https://github.com/yakamara/yakme/blob/master/boot.php#L32
Dazugehöriger Code
https://github.com/yakamara/yakme/blob/master/lib/Yakme/Effects/effect_responsive.php#L34-L54
Nicht wundern das die Methode in einem Effekt liegt. Ich wollte den Effekt und die Extension nur beisammen haben.
Okay, habe es nun hinbekommen. Es funktioniert wie gedacht, allerdings muss ich den Speichervorgang noch optimieren... Danke @tbaddade ich nutze zum löschen des Bildcaches rex_media_manager::deleteCache
Nun ist aufgeräumt und die neue Test-Version liegt bei mir:
https://github.com/eaCe/focuspoint/
Vielleicht kann @muenzberg-me diese ja noch ein mal testen.
Wenn die Vorschau aktiv ist, wird der Focuspoint, wenn dieser verschoben wird, in der DB gespeichert.
Bei einem Klick auf zurücksetzen wird dieser auch in der DB entfernt.
Ich werfe nun einfach mal den PR rein, wenn jemand etwas auffällt wird man sich schon melden...
Die Version ist aber noch nicht im Installer - oder?
(Gerade getestet. Gefällt mir sehr gut! Daumen hoch!!!)
Nein noch nicht im Installer, ich dachte diesen schritt "muss" der Besitzer machen?
Nö. Muß nicht :-) Wir sind alle die "Besitzer".
Ich würde vorschlagen, dass wir jetzt noch warten ob Chris sich zu meinem PR meldet und dann kommt das alles zusammen in den Installer. Oder?
LG
Oliver
Alles klar! 