Bedingte Bilder nebeneinander anzeigen lassen

Question

Hallo.

Ich möchte auf einer Seite unter meiner Fragebogenskala 2 Bilder anzeigen lassen, die davon abhängig sind, welcher Versuchsgruppe die Person vorher per Zufallsgenerator zugewiesen wurde. Ich habe bereits einen php Code dafür geschrieben, mit dem das gut funktioniert. Meine Frage ist eine rein optische. Und zwar möchte ich die beiden Bilder gerne nebeneinander zeigen lassen anstatt untereinander. Ich finde leider wirklich nicht heraus, wich sich das innerhalb eines php Codes umsetzen lässt.
Dieser sieht übrigens so aus:

if (value('CO01') == 1) {
html('');
html('');
}
if (value('CO01') == 2) {
html('');
html('');
}
if (value('CO01') == 3) {
html('');
html('');
}
if (value('CO01') == 4) {
html('');
html('');
}

Vielen Dank.

Answer 1

Ich würde empfehlen, dass Sie im IF erstmal nur die Dateinamen setzen:

if (value('CO01') == 1) {
  $bild1 = 'alpha.png';
  $bild2 = 'beta.png';
}
if (value('CO01') == 2) {
  $bild1 = 'gamma.png';
  $bild2 = 'delta.png';
}
u.s.w.

Und dann als HTML-Konstruktion darunter folgendes:

html('
<div style="display: flex; flex-wrap: wrap; gap: 1em;">
    <img src="'.$bild1.'" alt="" style="flex: 1 1 45%; min-width: 400px">
    <img src="'.$bild2.'" alt="" style="flex: 1 1 45%; min-width: 400px">
</div>
');

Die CSS Flexbox sorgt dafür, dass die Bilder schön skalieren und auf Mobilgeräten dann doch untereinander angezeigt werden, wenn sie sonst zu klein (hier: <400 Pixel) werden würden.

Comments

Vielen Dank für die Antwort.
Ich habe das so angewendet, allerdings werden jetzt die Bilder wieder sehr groß und untereinander auf der Seite angezeigt. Mein Ziel ist es, sie klein und nebeneinander darzustellen. Wie könnte ich das erreichen?

---

Vielleicht kann man das mit der Tabellenfunktion o.ä. machen? Ich habe es schon probiert, aber finde nicht heraus, wie man hier php und html code verbinden kann, sodass es funktioniert.

---

Posten Sie mal einen Pretest-Link - und reduzieren Sie die 400px evtl. mal auf 300px. Untereinander werden die Bilder mit der o.g. Lösung nur angezeigt, wenn der Bildschirm weniger als 800 Pixel Breite bietet.

Ich habe explizit keine Tabelle vorgeschlagen, weil Sie damit Nutzer:innen von Smartphones (das dürfte eine relevanter Anteil sein) ausschließen.