Isabell_Mader
I'm new here

Responsive Design und Eingabe im CMS

Hallo zusammen,

vielleicht hat ja jemand ein Beispiel wie man folgende Anforderung lösen könnte:

Der Redakteuer erstellt im CMS seine Inhalte.

Diese Inhalte werden in der Desktop Version dreizeilig dargestellt, in der mobilen Version zweizeilig und so sortiert, dass der erste Inhalt der rechten Spalte direkt unterhalb dem zweispaltigen Inhalt der ersten Zeile erscheint, siehe anghängtes PDF.

Im CMS könnte man jetzt alle Inhalte in der "content" Spalte einfügen, d.h. der Redakteur müsste die Sortierung übernehmen, was sicherlich intuitiver geht.

Erstellt man im CMS zwei Spalten "content" und "right" für die rechte Spalte, dann klappt es mit der Sortierung nicht mehr.

Hat hierzu jemand ein Beispiel?

Danke im Voraus + viele Grüße

Isabell Mader

10 Replies
sglock
I'm new here

Hallo Isabell,

ich gehe davon aus, dass in der CMS-Preview immer die Desktop-Variante dargestellt wird, richtig? Aus Redakteurssicht finde ich es in diesem Fall durchaus sinnvoll, mit zwei Absatzbereichen zu arbeiten. So kann man beide Bereiche getrennt sortieren und ggf. auch verschiedene Absätze erlauben.

Entscheidend ist, welche Reihenfolge und Auszeichnung die einzelnen Blöcke im Markup haben müssen, damit das JavaScript sie je nach Viewport richtig zusammenpuzzelt. Statt beide Absatzbereiche einfach nacheinander auszugeben (1,2,3,R1,R2,R3) ist es ebenfalls möglich, die Absätze aus den beiden Bodybereichen zu mischen (1,R1,2,R2 etc.)

Komplex wird es, wenn Elemente mehrere Spalten einnehmen (können). Hier muss man u.U. recht viele Prüfungen und Fallbacks definieren, damit keine Lücken oder Überlappungen entstehen.

0 Kudos

Hallo Sebastian,

danke für die Antwort, so was ähnliches hatte ich angedacht, aber das Beispiel fehlt 🙂 Wie genau kann ich einzelne Absätze ansprechen und diese dann sortiert ausgeben?

Denn ich kann dann ja nicht folgendermaßen arbeiten:

$CMS_VALUE(#global.page.body("content"))$

$CMS_VALUE(#global.page.body("right"))$

So würden die Absätze untereinander ausgegeben.

Die Frage ist, wie kann ich die einzelnen Absätze (content + right) im CMS in einen neuen Topf kopieren, und diese dann an das Javaskript übergeben?

Element können auch bis zu zwei Spalten einnehmen, ausser die rechte Spalte.

Viele Grüße

Isabell

0 Kudos
Isabell_Mader
I'm new here

Hallo zusammen,

hat vielleicht doch jemand ein Beispiel? 🙂

Danke + viele Grüße

Isabell

0 Kudos

Hallo Isabell,

um die Absätze abwechselnd auszugeben kannst Du z.B. folgendermaßen vorgehen (der Einfachheit halber ohne Leer-Prüfung):

$CMS_SET(set_content_sections, #global.page.body("content").getChildren(class("de.espirit.firstspirit.access.store.pagestore.Section")).toList())$

$CMS_SET(set_right_sections, #global.page.body("right").getChildren(class("de.espirit.firstspirit.access.store.pagestore.Section")).toList())$

$CMS_VALUE(set_content_sections.get(0))$

$CMS_VALUE(set_right_sections.get(0))$

$CMS_VALUE(set_content_sections.get(1))$

$CMS_VALUE(set_right_sections.get(1))$

0 Kudos
novomind
I'm new here

Hallo Zusammen,

novomind arbeitet an einem Showrroom für weitere Informationen und neutrale Lösungsansätze für die Thematik Responsive Design. Das wird noch etwas dauern -  Ziel ist es, die Infos dazu über den e-Spirit Marketplace verfügbar zu machen.

Grüße.

Ronny

Hallo Isabell,

Um dein Problem genauer zu verstehen: Wird der Inhalt in der mobilen Version in einem anderen Kanal ausgespielt, oder ist das HTML für Desktop und Mobile am Ende dasselbe?

Viele Grüße.

0 Kudos

Hallo Ronny,

das HTML für Desktop und Mobile ist am Ende dasselbe.

Viele Grüße

Isabell

0 Kudos

Hallo Isabell,

Wenn die Reihenfolge bestehen bleiben soll, also das rechte Element eine Zeile darunter links angezeigt werden soll und diese Regel immer gilt, macht es doch eher Sinn das HTML fluid zu gestalten und es dem HTML(css/javascript) zu überlassen die Boxen in der Mobilen Variante zu verschieben.

Viele Grüße.

0 Kudos

Hallo Ronny,

stimmt genau, wir überlassen die Sortierung auch dem HTML(css/javascript).

Nur leider muss im Moment der Redakteur die Absätze so einpflegen, dass er mitrechnen muss. Er hat max. 3 Spalten zur Verfügung und setzt z.B. in die erste Zeile eine 2-spaltige Stage. Jetzt darf er aber nur noch einen einspaltigen Absatz auswählen, ein zweispaltiger Absatz würde ja nicht passen. Im Moment unterscheiden wir das mit der Template-Bezeichnung (2-SP= zwei-spaltig). Das ist unschön. Es wäre besser wenn der Redakteur das intuitiver bedienen könnte, ohne dass es viel programmieraufwand gibt 🙂

Hast Du da eine Idee?

Viele Grüße

Isabell

0 Kudos