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.