Wie geht page4 mit Inhaltselementen um
Um zu verstehen, wie diese manuelle Option funktioniert, musst du einiges über ein Inhaltselement wissen. Das Inhaltselement Bild ist wie alle Inhaltselemente ein fest umrissener Bereich, in dem die jeweiligen Inhalte eingefügt werden. Dieser Bereich ist automatisch immer so breit wie die Spalte, in der er sich befindet und so hoch wie nötig, damit die Inhalte komplett angezeigt werden können. Über „Inhaltseinstellungen“ kannst du diesen Bereich mit einer Farbe versehen, umranden und du kannst festlegen, welchen Abstand der eigentliche Inhalt zum Rand des Bereiches hast. Ausführliche Infos dazu auf der Seite „Inhaltselemente“.
Alle Inhaltsbereiche sind optimiert für mobile Seiten. Das bedeutet letztlich, dass page4 immer versucht, den kompletten Inhalt anzuzeigen, auch wenn sich die Breite des Bereichs verändert. Beim einem Text werden die Zeilen anders umbrochen und bei einem Bild wird das Bild notfalls proportional verkleinert, wenn es sonst nicht möglich ist, das Bild komplett anzuzeigen.
Wenn du in eine Spalte von sagen wir 400 px Breite ein Inhaltselement Bild einfügst und diesem Element ein Bild zuweist, welches 1.000 px breit ist, dann gibt es technisch drei Möglichkeiten.
- Das Bild wird in einer Breite von 1.000 px dargestellt und verbreitet die Spalte entsprechend, was dazu führt, dass das Design „kaputt“ geht oder die Spalte bleibt so breit, aber das Bild ragt einfach 600 px über die Spalte hinüber, was sehr schlecht aussieht, insbesondere, wenn in dem Bereich, wo das Bild reinragt, bereits Inhalte sind.
- Das Bild wird einfach abgeschnitten, so dass du nur einen Teil siehst, weil der Rest vom Bild unsichtbar über die Spalte ragt.
- Das Bild wird automatisch auf die max. Breite gesetzt und komplett, aber verkleinert angezeigt.
Wir verwenden die Option c) weil dass die eleganteste Lösung ist und weil diese Option perfekt mit Designvorlagen harmoniert, die für mobile Seiten vorbereitet sind (responsive).
Mit diesem Wissen verstehst du besser, was mit deinen Bildern passiert.
Dazu einige Beispiele. Wir gehen immer davon aus, dass die Spaltenbreite 400 px ist und der Bereich ist gelb hinterlegt.
- Du bindest ein Bild ein, welches du dann auf 300 px Breite skalierst und richtest es linksbündig aus. Das Bild steht linksbündig und nach oben direkt im Bereich und du siehst rechts eine 100 px gelbe Fläche, den Hintergrund vom Bereich. Nach unten schließt das Bild auch bündig mit der Bereichskante ab.
- Du bindest ein Bild ein, welches 800 px breit und 400 px hoch ist und läßt es in dieser Größe. Das Bild überdeckt den gesamten Bereich, du siehst also keinen gelben Hintergrund. Das Bild wird automatisch auf 400 px Breite skaliert, was dazu führt, dass die Höhe nur noch 200 px ist.
- Du bindest ein Bild ein, welches 400 px breit ist und 100 px hoch ist. Dann stellst du die Platzierung auf manuell und legst fest, dass das Bild wie folgt platziert werden soll: 100 px von links und 50 px von oben. Das System erkennt, dass das Bild bei dieser Verschiebung nach rechts nicht mehr in den Bereich passt und verkleinert es auf 300 px und die Höhe wird dann auf 75 px verkleinert. Es verschiebt das Bild dann 50 px nach unten. Du siehst einen Bereich, der 125 px hoch ist (50 px Abstand von oben und 75 px Bildhöhe) und 400 px breit ist. Oben ist ein 50 px breiter gelber Streifen, der Hintergrund des Bereichs und links ist ein 100 px breiter gelber Streifen, der Abstand von links, wodurch auch der Hintergrund zu sehen ist. Das Bild ist jetzt nur noch 300 px breit, obwohl du 400 px eingestellt hat. Es ist komplett sichtbar.
Wenn du möchtest, dass Bilder, die du manuell positionierst, in jedem Fall in der Größe angezeigt werden sollen, die du vorgibst, dann musst du wissen, wie breit deine Spalte ist und dann darf der Abstand links plus die Breite des Bildes nicht mehr sein, als die Gesamtbreite der Spalte.
Minuswerte kannst du nicht einstellen, dann springt das Feld auf 0 px. Wenn der Abstand links so groß wie die Spalte selbst oder größer eingestellt wird, dann verschwindet dein Bild, da es so stark verkleinert wird, dass es nicht mehr angezeigt werden kann. Wenn du von manuell auf Position links, rechts oder mittig wechselt, wird das Bild wieder komplett angezeigt.