Questions & Answers

[daniel_philippi]

Hallo Zusammen.

Im Zuge der Retinaiisierung der Displays ist es nötig bei den meisten Bildern zwei Bildausschnitte zu bestimmen und dem selben Image Element zuzuweisen.

Der Aufbau im HTML soll z.B. der sein:

<img data-retina="image_res_retina.jpg" src="image_res_default.jpg" alt="">

Frage: Wie kann ich auf einfache Weise im WEBCLIENT bei einem Bild zwei Ausschnitte bestimmen.

Viele Grüße,

Daniel

[rednoss]

Hallo Daniel,

könntest du dein Problem genauer beschreiben?

Möchtest du wissen wie man verschiedene Auflösungen erstellt und verwendet oder wie man auflösungsspezifische Bildauschnitte anlegt und wie man diese dann einbindet?

Wie wird Dein Attribut data-retina ausgewertet?

Viele Grüße

René

[daniel_philippi]

Hallo René.

Das data-retina Attribut wird später von JavaScript ausgewertet und das entsprechende Bild mit höhrerer Auflösung nachgeladen falls ein Retina Display vorliegt und JS Unterstützung gegeben ist, wenn nicht bleibt das "normale" Bild (die "normale" Auflösung).

Wenn der Redakteur also das Bild das er im WebClient sieht zuschneidet (Standardauflösung), muss er auch die Möglichkeit haben die RETINA Version (Retina Auflösung) für ein und das selbe Bild zuzuschneiden.

Dafür müsste ich einen zusätzlichen Button einbauen oder ähnliches um dies dem Redakteur zu ermöglichen. Hier suche ich nach einer optimalen Herangehensweise.

Gruß,

Daniel

PS: Optimaler Weise wäre es sogar so, dass die zweite Auflösung automatisch Anhand der ersten Auflösung erstellt wird. Dass man also nur das Bild das man im WebClient sieht zuschneidet und damit gleichzeitig die RETINA Version zuschneidet. Wäre das denkbar?

[rednoss]

Hallo Daniel,

eine gute Lösung wäre es im WebClient den Ausschnitt des Bildes mit der Original-Auflösung zu bestimmen. Somit änderst du gleichzeitig die Bildausschnitte für die anderen Auflösungen.

Dabei ist zu beachten, dass der neue Bildauschnitt nur für die Auflösungen übernommen werden, die im JavaClient noch nicht bearbeitet worden sind.

Mit dem unten stehenden Code kannst du überprüfen ob du im WebClient bist.

$CMS_IF( #global.is("WEBEDIT") )$

     ...

$CMS_END_IF$

Viele Grüße

René

[daniel_philippi]

Hallo nochmal.

Das ändern des Originals ist für uns leider keine Lösung, da das Bild auch an anderen Stellen verwendet werden soll.

Ich hatte nun eine neue Idee, nämlich abzufragen ob für die Standardauflösung ein Bildausschnitt bestimmt wurde und wenn ja eine Meldung anzeigen, dass die Retina Auflösung noch erstellt werden muss. Das funktioniert auch wunderbar. Jetzt ist nur die Frage wie ich die zweite Auflösung dem Redakteur zur pflege anzeigen kann. Mein bisheriges vorgehen ist, dass ich nur im Webclient ein neues div einbaue über das das Bild mit den RETINA Auflösung gepflegt werden kann.

Das funktioniert, nur möchte ich nun gern, dass das DIV nur angezeigt wird, wenn auch die WebEdit Toolbar angezeigt wird. Optimal wäre es, dass das Element bei dem die Toolbar angezeigt wird z.B. eine CSS-Klasse "webedit-active-edit" hätte. Dann wäre es einfach über das CSS zu regeln. Ist so etwas geplant?

Gibt es vielleicht noch eine elegantere Möglichkeit?

Viele Grüße,

Daniel

[feddersen]

Hallo Daniel,

da ist aktuell nichts geplant. Wenn ich dich richtig verstanden habe, solltest du das aber mit etwas Javascript und CSS selbst bauen können.

Viele Grüße

Christoph

[daniel_philippi]

Hallo Christoph.

Ich habe es nun so gelößt, dass per JS bei "Mouseover" der extra Button angezeigt wird, dieser verschwindet aber, wenn ich über die Toolbar fahre was die Redaktuere etwas verwirrt. Daher die Frage ob es möglich ist per JavaScript das Element das zur aktuell angezeigten Toolbar gehört ausfindig zu machen.

Die WebEdit Toolbar wird am Ende der Seite erzeugt und dann irgendwie dem aktuellen Element zugeordnet. Hier fehlt mir zu Zuordnung/Verknüpfung.

Hast du da einen Idee?

Gruß,

Daniel

[thmarx]

Hallo Daniel,

hat sich das Problem mittlerweile erledigt?

Viele Grüße

Thorsten

[daniel_philippi]

Hallo Thorsten.

Nein, leider nicht. Ich warte immer noch auf eine Antwort.

Gruß,

Daniel

[sglock]

Hallo Daniel,

Deine Anforderung kann man über ein Skript im Freigabeworkflow auf Medien lösen. Der Vorteil ist, dass der Redakteur keine zusätzlichen Arbeitsschritte erledigen muss und HD- und LD-Crop exakt den gleichen Bildausschnitt zeigen.

In Kurzfassung:

• Der Redakteur bestimmt den gewünschten Ausschnitt eines Bildes in der HD-Auflösung. Hierzu kann das Bild in WebEdit in HD ausgeleitet und per CSS für die Darstellung im Desktop-Browser herunterskaliert werden.
• Im Freigabeskript wird über alle HD-Auflösungen des Bildes iteriert. Die HD-Auflösungen tragen  den festen Suffix "_2x".
• Wenn eine HD-Auflösung manuell gecropt ist, holt sich das Skript den Imagestream und skaliert das Bild auf 50% herunter.
• Das kleine Bild wird in die korrespondierende LD-Auflösung geschrieben, das Medium wird gespeichert und freigegeben.

Das Skalieren selbst funktioniert mit JDK-Bordmitteln, u.a. javax.imageio und java.awt.

Viele Grüße

Sebastian