Layouteinstellung für Darstellung zweier Bilder nebeneinander, ohne jede Fragebogenseite einzeln zu bearbeiten?

Question

Hallo liebes SoSci-Support-Team,

kann ich in einem Fragebogen-Layout (einmalig/global) einbauen, dass alle meine (per Drag & Drop aus den Mediendateien) auf den Fragebogen dargebotenen Bilder nebeneinander dargestellt werden und nur auf Smartphones untereinander stehen? Den Artikel "Elemente nebeneinander platzieren" habe ich gelesen, der adressiert nach meinem Verständnis aber nur die Darstellung auf einer einzelnen Seite, oder? Ich habe ca. 270 Seiten mit je zwei Bildern, es wäre recht aufwändig, alle "IMG_....jpeg" in einzelnen Codes auf einzelnen Fragebogenseiten zu referenzieren. Danke vorab für eure Mühe!

Bisher erfolglose Lösungsversuche:

Flexbox (display:flex)
Container eingeführt (.image-row {display:flex;})
Problem: Funktionierte nicht global, da SoSci die Bilder direkt ins %questionnaire% rendert, ohne zusätzliche Container.

inline-block für Bilder
img { display:inline-block; max-width:48%; }
Problem: Teilweise überschreibt SoSci die Darstellung oder rendert Bilder in Tabellen/Divs → wieder untereinander.

Selektor nach src-Muster (img[src^="IMG"])
Versuch, gezielt SoSci-Bilder anzusprechen.
Problem: führte dazu, dass Bilder verschwanden, weil sie aus dem DOM gelöst wurden.
Grid- oder Flex-Lösungen mit Umbruch

flex-wrap: wrap; getestet, damit Bilder auf kleineren Screens umbrechen.
Führte nicht zur gewünschten konsistenten Zweier-Anordnung.

Answer 1

Ich habe ca. 270 Seiten mit je zwei Bildern

Ehrlich gesagt denke ich, dann bereits an dieser Stelle eine konzeptionelle Schwäche liegt. Wenn Sie irgend etwas mehr als 3-mal wiederholen, dann sollten Sie dies über eine Schleife, z.B. mittels loopPage() erledigen.

Die Bilder würden Sie dann auch nicht alle auf die Seiten ziehen, sondern z.B. über ein Array (kann man recht einfach über Excel + VERKETTEN() erzeugen) oder über die Datenbank für Inhalte zuspielen.

Und ja, im Prinzip können Sie vor und hinter die Bilder ein <div class="..."> und </div> setzen und dann mit CSS-Code arbeiten (die Flexbox wäre da schon ein sinnvoller Weg). Aber dabei müssen Sie natürlich in Betracht ziehen, dass SoSci Survey die Bilder nicht direkt als <img> in die Seite einfügt, sondern innerhalb eines <div>, um Ausrichtung und Abstände zu ermöglichen.

Comments

Gerne mache ich das, ich habe auch alle Items und Fotos bereits "code-freundlich" angelegt, nur wie stelle ich eine Seite als Loopseite ein? Oder geschieht das ausschließlich per Code?

Ich habe die Rubrik mit 80 FoodItems als FI01-FI80 angelegt, Loopfragen mit L101-L180 textleer, Anweisung per HTML. Die zwei Bilder pro Seite beginnen beide mit 01-80, sodass immer klar ist, wenn Item 78 gezogen wird braucht es FI78 und L178.

Bei einer zweiten und dritten Schätzung soll das ganze nochmal passieren mit dem einzigen Unterschied, dass L201-L280 und L301-L380 verwendet werden.

Danke vorab für Ihre Mühe!

---

> Oder geschieht das ausschließlich per Code?

Ja, korrekt. Mit dem Befehl loopPage() oder loopToPage(), je nach Anwendungsfall.

Der Code für eine Seite, die 80 Bilder mit zugehörigen Fragen anzeigt wäre z.B.

$i = loopPage(80);
show(id('FI', $i + 1));
show(id('L1', $i + 1));

Darunter kann man bequem noch HTML- oder CSS-Code einfügen.