How page4 handles content elements
To understand how this manual option works, you need to know a few things about a content element. The content element image, like all content elements, is a fixed area in which the respective content is inserted. This area is automatically always as wide as the column it is in and as high as necessary to display the content completely. Via "Content settings" you can color this area, border it and you can define what distance the actual content has to the edge of the area. Detailed information about this can be found on the page "Content elements".
All content areas are optimized for mobile pages. This ultimately means that page4 will always try to display the full content, even if the width of the area changes. In the case of a text, the lines are wrapped differently and in the case of an image, the image is scaled down proportionally if necessary, if it is otherwise not possible to display the image completely.
If you insert a content element Image in a column of say 400 px width and assign an image to this element which is 1,000 px wide, then technically there are three possibilities.
- The image is displayed at a width of 1,000 px and spreads the column accordingly, which causes the design to "break" or the column remains as wide as it is, but the image simply sticks out 600 px across the column which looks very bad, especially if there is already content in the area where the image sticks in.
- The image is simply cut off so that you only see a part of it, because the rest of the image is invisible.
- The image is automatically set to the max width and displayed completely, but scaled down.
We use option c) because it is the most elegant solution and because this option harmonizes perfectly with design templates that are prepared for mobile pages (responsive).
With this knowledge you will better understand what happens to your images.
Here are some examples. We always assume that the column width is 400 px and the area is highlighted in yellow.
You embed an image, which you then scale to 300 px width and align it left-justified. The image is left-aligned and upwards directly in the area and you see a 100 px yellow area on the right, the background of the area. At the bottom the image is also flush with the edge of the area.
You embed an image which is 800 px wide and 400 px high and leave it in this size. The image covers the whole area, so you don't see a yellow background. The image will be automatically scaled to 400 px width, which results in the height being only 200 px.
You embed an image that is 400 px wide and 100 px high. Then you set the placement to manual and specify that the image should be placed as follows: 100 px from the left and 50 px from the top. The system recognizes that the image no longer fits in the area when moved to the right in this way and reduces it to 300 px and the height is then reduced to 75 px. It then moves the image down 50 px. You see an area that is 125 px high (50 px distance from the top and 75 px image height) and 400 px wide. At the top is a 50 px wide yellow stripe, the background of the area, and to the left is a 100 px wide yellow stripe, the distance from the left, which also shows the background. The image is now only 300 px wide, although you set 400 px. It is completely visible.
If you want images that you position manually to be displayed in the size you specify, you must know how wide your column is, and then the distance to the left plus the width of the image must not be more than the total width of the column.
You cannot set minus values, then the field jumps to 0 px. If the distance left is set as big as the column itself or bigger, then your image will disappear, because it will be reduced so much that it can't be displayed anymore. If you change from manual to position left, right or center, the image will be displayed completely again.