WordPress: Quote Box

The Quote Box is a custom block developed by the Office of Communications and Marketing.

Purpose

This block is use to promote a program, concept, event or other initiative through a quote from an involved individual.

Availability

This block is only available on the Primary Page template, which is usually is reserved for section home pages.

Elements of the Block

The Quote Box has the following editor-defined elements:

  1. background image
    • vertical alignment is customizable
  2. image of the person being quoted
  3. the quotation itself
  4. a citation/source for the quotation
  5. optional: one or more call-to-action buttons
    • support for video player pop-up if a YouTube link is configured on the button(s)
screenshot of elements of the quote box custom block
Customizable elements of the Quote Box block

Adding a Quote Box Block

  1. With your cursor in the editor in the desired block position, type / to open the block selector
  2. Start typing the word “quote” and after a few characters the chooser will filter the other blocks, leaving the Quote Box as the only option; select it

Configuring the Quote Box Block

The background and person images are configured in the settings sidebar; the quote, citation and any optional buttons are configured in the main editor area.

Settings sidebar

1. Background Image

With the block focussed, and the setting sidebar open, select the Choose background image button.

2. Background Image Vertical Alignment

If necessary, you may change the vertical alignment if it will make the overall appearance more pleasing. Whether to do is a judgement call on your part. The options are Center (default), Top or Bottom.

3. Quote Image

To the set the image of the quoted person, ensure the block has focus and then in the settings sidebar select the Choose quote image button to either upload or choose the image from the media browser.

For best results, choose a square or portrait orientation image. It only needs to be no more than approximately 400 pixels wide.

4. Pre-rounded image

If you upload a rectangular image, it will automatically have rounded corners applied. If, however, the image has been prepared with a rounded background, select the Photo pre-rounded toggle. This will prevent the automatic corner rounding.

5. The Quote

Enter the quote into the field identified with the placeholder text Enter quote...

6. The Citation

Enter the citation in the field identified with ENTER CITATION... Note, the citation is uppercase regardless of whether you enter uppercase characters. This cannot be changed.

7. Call-to-action Button

To add a call-to-action button, make sure the block has focus and select the + underneath the citation field.

Refer to WordPress: Buttons for guidance on how to configure buttons.