Inhaltselement Text mit Bild

Das Inhaltselement Text mit Bild wird immer dann verwendet, wenn Text in Verbindung mit ein Bild eingefügt werden soll. Die Anzahl der einfügbaren Bilder ist dabei nicht begrenzt.

Typischer Seiteninhalt

Das Inhaltselement Text mit Bild gehört zur Kategorie "Typischer Seiteninhalt", d.h. es ist ein Standard Seiteninhaltelement von TYPO3 das durch TYPO3 entwickelt wird. Wir sind bestrebt "Typische Seiteninhalte" NICHT durch das Theme strukturell oder konzeptionell zu verändern , für eine bessere TYPO3 Updatesicherheit.

Wie kann das Bild positioniert werden?

Es gibt verschiedene Möglichkeiten, das Bild im Text zu positieren:

oben mittig / rechts / links
unten mittig / rechts / links
im Text rechts / links → Text umfließt das Bild (wird umgebrochen)
neben dem Text rechts / links → Text daneben wird nicht umgebrochen

Die Positionierung kann nur insgesamt für alle im Inhaltselement verwendeten Bilder festgelegt werden. Sollen die Bilder verschieden angeordnet werden, muss entweder auf mehrere Inhaltselemente oder ein Boxenelement zurückgegriffen werden.

Bild positionieren Beispiele:

Neben dem Text links Text wird nicht umgebrochen

Was es bedeutet, wenn der Text daneben nicht umgebrochen wird, soll dies Beispiel hier verdeutlichen. Der Text steht dabei statisch neben dem Bild. Ganz egal wie lang er ist. Er wird nicht umgebrochen. Außerdem fällt auf, dass die Überschrift nicht obendrüber, sondern ebenfalls auf der Seite steht, auf welcher sich der Text befindet.

Im Text linksText umfließt das Bild

Deutlich eleganter sieht es aus, wenn der Text das Bild umfließt. Dafür muss nur die Option "Im Text links" ausgewählt werden und schon passt sich der Text der Größe des Bildes an und umfließt es harmonisch. Um dies demonstrieren zu können, muss der Text natürlich entsprechend lang sein. Die Überschrift befindet sich bei dieser Art der Ausrichtung übrigens oben, was ich als äußerst sinnvoll empfinde. Wie es aussieht, wenn man mehrere Bilder in ein Inhaltselement Text mit Bild stopft, zeigt euch gleich das nächste Beispiel.

Über dem Text Bild links

Was es bedeutet, wenn der Text daneben nicht umgebrochen wird, soll dies Beispiel hier verdeutlichen. Der Text steht dabei statisch neben dem Bild. Ganz egal wie lang er ist. Er wird nicht umgebrochen. Außerdem fällt auf, dass die Überschrift nicht obendrüber, sondern ebenfalls auf der Seite steht, auf welcher sich der Text befindet.

Unter dem Text Bild zentriert

Was es bedeutet, wenn der Text daneben nicht umgebrochen wird, soll dies Beispiel hier verdeutlichen. Der Text steht dabei statisch neben dem Bild. Ganz egal wie lang er ist. Er wird nicht umgebrochen. Außerdem fällt auf, dass die Überschrift nicht obendrüber, sondern ebenfalls auf der Seite steht, auf welcher sich der Text befindet.

Unter dem Text Bild links

Was es bedeutet, wenn der Text daneben nicht umgebrochen wird, soll dies Beispiel hier verdeutlichen. Der Text steht dabei statisch neben dem Bild. Ganz egal wie lang er ist. Er wird nicht umgebrochen. Außerdem fällt auf, dass die Überschrift nicht obendrüber, sondern ebenfalls auf der Seite steht, auf welcher sich der Text befindet.

Neben dem Text rechts Text wird nicht umgebrochen

Was es bedeutet, wenn der Text daneben nicht umgebrochen wird, soll dies Beispiel hier verdeutlichen. Der Text steht dabei statisch neben dem Bild. Ganz egal wie lang er ist. Er wird nicht umgebrochen. Außerdem fällt auf, dass die Überschrift nicht obendrüber, sondern ebenfalls auf der Seite steht, auf welcher sich der Text befindet.

Im Text rechtsText umfließt das Bild

Deutlich eleganter sieht es aus, wenn der Text das Bild umfließt. Dafür muss nur die Option "Im Text rechts" ausgewählt werden und schon passt sich der Text der Größe des Bildes an und umfließt es harmonisch. Um dies demonstrieren zu können, muss der Text natürlich entsprechend lang sein. Die Überschrift befindet sich bei dieser Art der Ausrichtung übrigens oben, was ich als äußerst sinnvoll empfinde. Wie es aussieht, wenn man mehrere Bilder in ein Inhaltselement Text mit Bild stopft, zeigt euch gleich das nächste Beispiel.

Über dem Text Bild rechts

Was es bedeutet, wenn der Text daneben nicht umgebrochen wird, soll dies Beispiel hier verdeutlichen. Der Text steht dabei statisch neben dem Bild. Ganz egal wie lang er ist. Er wird nicht umgebrochen. Außerdem fällt auf, dass die Überschrift nicht obendrüber, sondern ebenfalls auf der Seite steht, auf welcher sich der Text befindet.

Über dem Text Bild zentriert

Was es bedeutet, wenn der Text daneben nicht umgebrochen wird, soll dies Beispiel hier verdeutlichen. Der Text steht dabei statisch neben dem Bild. Ganz egal wie lang er ist. Er wird nicht umgebrochen. Außerdem fällt auf, dass die Überschrift nicht obendrüber, sondern ebenfalls auf der Seite steht, auf welcher sich der Text befindet.

Unter dem Text Bild rechts

Was es bedeutet, wenn der Text daneben nicht umgebrochen wird, soll dies Beispiel hier verdeutlichen. Der Text steht dabei statisch neben dem Bild. Ganz egal wie lang er ist. Er wird nicht umgebrochen. Außerdem fällt auf, dass die Überschrift nicht obendrüber, sondern ebenfalls auf der Seite steht, auf welcher sich der Text befindet.

Mehrere Bilder in Spalten anordnen?

Werden dem Inhaltselement mehrere Bilder hinzugefügt, können diese neben dem Text in Spalten angeordnet werden. Damit die Bilder wie im Beispiel obendrüber zweispaltig angezeigt werden, muss bei den Gallery Settings unter "Anzahl an Spalten" eine 2 eingetragen sein.

Mehrere Bilder in Spalten Beispiel:

Im Text rechts / Anzahl an Spalten: 2

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla

Im Text, links / Anzahl an Spalten: 2

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Unter Text, zentriert / Anzahl an Spalten: 2

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla

Unter Text, zentriert / Anzahl an Spalten: 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla

Unter Text, zentriert / Anzahl an Spalten: 3

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla