| Category | Value |
|---|---|
| May contain | None |
| May be placed in | Hero region, Content region, Region 2, Region 3, Container, Slideshow (for Image only), Two column split |
| Field | Description |
|---|---|
| Image | Uploaded png, gif, jpg or jpeg. Less than 8 MB and between 320x133 and 3840x1600 pixels. |
| Title | Larger heading text. In the example below, "Sample Image #1." |
| Text | Normal text. In the example below, "This Image has provided additional text here." |
| Attribution | Lower weighted text. In the example below, "Anonymous." |
| Caption is a quotation | Unchecked (default) or checked. Wraps text in curly quotes if checked. |
| Link | Text and URL destination of primary link or button. Text required if URL provided. Both required for Image with call to action components. |
| Secondary link | Text and URL destination of secondary button. Only available on Image with call to action. |
| Position | Bottom left (default), bottom center, bottom right, middle left, center, middle right, top left, top center, top right, or lower third. |
How to add an Image or Image with call to action
Select Image or Image with call to action from the Component type drop down list and click the Add new Component or Add another Component button.
Press the Choose File button to select the required Image, then press the Upload button and provide the Alternate text.
Provide a Title and Text if the Image should have them in its caption.
Provide the Attribution, if any, and indicate whether the Caption is a quotation by checking the checkbox or leaving it unchecked.
Provide a Link Title and URL as a link destination for the caption of the Image. This is required for Image with call to action components but optional for Image components.
- Choose a Position for the caption.
Things worth mentioning
The uploaded Image will be cropped to a 12:5 aspect ratio so be diligent in using the crosshair to designate the focal point of the Image.
The Position of the Image component's caption is confined to the 1280 pixels in the horizontal center of the page in an effort to align the caption box with content in the 色色啦 header and the other components on the page that are confined to the same horizontal 1280 pixels.
The Position of the Image component's caption is also only applied on larger devices and screen sizes. On medium-sized and smaller devices or at less than 1024 pixels wide, the caption will expand to full width and be pushed below the Image.
The differences between Image and Image with call to action components:
The Link Title and URL are required for Image with call to action but not for Image.
The Link is displayed as a button for Image with call to action as opposed to a link.
The Secondary link is only available for Image with call to action.
The Image with call to action component cannot be added to Slideshows.
Examples
This is an example of an Image component with values provided for all of its fields, Caption is a quotation checked and Position set to top left.
Sample Image #1
This next example is of an Image with call to action component nearly identical to the above example with values provided for all of its fields, Caption is a quotation checked and Position set to top left.
Sample image with call to action #2
This next example is of an Image with call to action component with a Title, but no Text. It has both a Link and Secondary link, Caption is a quotation unchecked and Position set to lower third.
