Text over Image(s)
The section type “Text over Image(s) is sometimes used as page header (see the top of the “Resources for Survivors” page).
The order of text content types for a top-of-page use of this section type is:
[breadcrumbs]- heading 1
- format = post-header lead
Another use of this section (heading 6)
This section can also be used to for a small blurb of text (format = stand-alone lead)
Also, multiple images can be used. This example has 3 images added of equal widths. See an example towards the top of the “What is Domestic Violence” page.
Different image widths (heading 6)
Images can have different widths, too (format = stand-alone lead)
When adding images to a “Text over Image(s)” section, you’ll see a right-column appear next to each image with the header “Image Width Percent (optional)”. By default, this is set at 0, which means it will fill any available space and share available space equally with other images set at the default “0” setting. This example, though, sets the second image at 50 (so the other two images will automatically split the remaining space). See an example at the top of the “Donate” page.
Image Focus
When adding background images like in the above examples, they are auto-cropped to the particular rectangle that defines their borders.
For example, the above section uses the below images. Notice that the focus-position of each image is unique.
So how is the unique focus position of each of these images in the 3-panel “Text of Image(s)” visible?
There’s a special field called “Image Focus”, which lets you define the location of the most important part of the image. To find it, click the button “Add Image” and you’ll see a window pop up that looks like this:
Once you select an image you want in the left grid, the right column will display details and fields relating to that image. Scroll the right column down and you’ll see some fields like this:
These are the fields that define an image’s focus point. You can find these fields for a previously added image by clicking the [pencil icon] that appears when you hover your cursor over the top-right corner of the image. A full-width modal will pop up that looks like this (with the “image focus” at the bottom):
Here’s each image’s horizontal and vertical focus: