Wie lasse ich ein Bild, mit php Code eingebunden, rechts statt mittig anzeigen?

Question

Guten Tag liebes Sosci Survey Team,

ich habe in meiner Studie drei Gruppen, die an einer Stelle einen leicht veränderten Text erhalten und an drei Stellen jeweils ein anderes Bild sehen.

Dazu habe ich bei der Gruppeneinteilung folgende Codes verwendet:

if (value('V007') == 1) {
  text('V004');
} elseif (value('V007') == 2) {
  text('V006');
} elseif (value('V007') == 3) {
  text('V005');
}

if (value('V007') == 1) {
  html('<img src="Maria_echter_Mensch_ohne_Hintergrund_update.png" alt="">');
} elseif (value('V007') == 2) {
  html('<img src="Maria_KI_Artguru_ohne_Hintergrund.png" alt="">');
} elseif (value('V007') == 3) {
  html('<img src="PC_ohne_Hintergrund.jpg" alt="">');
}

Das klappt auch soweit, allerdings sind die Bilder unter dem Text angeordnet und ich hätte die lieber seitlich davon.

Wie lässt sich dies umsetzen, die Codes, die ich fand und probierte, funktionieren nicht.
Könnte man die Bilder zudem noch verkleinern?

Vielen Dank vorab und schöne Grüße!

Comments

der zweite Code wurde nicht korrekt übernommen. So sieht das aus:
if (value('V007') == 1) {
  html('<img src="Maria_echter_Mensch_ohne_Hintergrund_update.png" alt="">');
} elseif (value('V007') == 2) {
  html('<img src="Maria_KI_Artguru_ohne_Hintergrund.png" alt="">');
} elseif (value('V007') == 3) {
  html('<img src="PC_ohne_Hintergrund.jpg" alt="">');
}

Answer 1

Wenn Text und Bild ohnehin immer zusammen erscheinen, können Sie die Texte auch als HTML-Code gestalten, und das Bild gleich an die richtige Stelle setzen.

Für "Nebeneinander" gibt es in HTML viele Möglichkeiten, eine wäre, dass Sie die BIlder nach oben setzen und wie folgt ändern:

if (value('V007') == 1) {
  html('<img style="float: right; margin: 0 0 1em 1em" src="Maria_echter_Mensch_ohne_Hintergrund_update.png" alt="">');
} elseif ...

Eine andere Option wäre, dass Sie mit flexbox-Elementen arbeiten. Von Tabellenkontruktionen (Elemente nebeneinander platzieren) würde ich hingegen eher abraten, falls Sie auch Teilnehmer:innen haben, die den Fragebogen auf dem Smartphone ausfüllen.

Comments

Vielen Dank für die schnelle Antwort. Das Bild der Person hat sich nun nach rechts verschoben. Darüber befindet sich ein recht hohes Freitextfeld und darüber die entsprechende Frage und eine ausführliche Anweisung.
Getestet wird in der Studie, ob die Art des Teampartners Unterschiede im Erleben der Zusammenarbeit hervorbringt, weshalb ich das Bild des Teampartners gerne neben dem Anweisungstext/Hilfestellung, die der Teampartner gibt, platzieren würde. So sieht man nämlich nur den halben Kopf und muss runterscrollen. Wäre das "Elemente nebeneinander platzieren", oder geht das auch anders ?
Viele Grüße

---

Wie gesagt: Ändern Sie die Darstellung des Textes mal zu "HTML-Code" und binden Sie das Bild dann mit dem passenden HTML-Code direkt ein. Ob Sie dann ein float oder eine flexbox verwenden, damit können Sie nach Bedarf experimentieren. Mit HTML-Code kennt sich notfalls auch ChatGPT gut aus.