Image and Image with Call to Action

The Image and Image with call to action components allows full-width images to be added to the page with captions that have improved visibility and control of placement. 

FieldDescription
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

  1. 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.

  2. Press the Choose File button to select the required Image, then press the Upload button and provide the Alternate text.

  3. Provide a Title and Text if the Image should have them in its caption.

  4. Provide the Attribution, if any, and indicate whether the Caption is a quotation by checking the checkbox or leaving it unchecked.

  5. 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.

  6. 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 51福利社 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.

 

student seated at a desk using a laptop.

Sample Image #1

This Image component has provided additional text here.
Anonymous

 

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.

 

student sitting at desk using laptop.

Sample image with call to action #2

This image with call to action component has additional text provided here.
Anonymous

 

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 linkCaption is a quotation unchecked and Position set to lower third.

 

student sitting at desk using laptop.