{"id":2529,"date":"2025-11-13T16:19:59","date_gmt":"2025-11-14T00:19:59","guid":{"rendered":"https:\/\/www.hmc.edu\/communications\/?page_id=2529"},"modified":"2025-11-20T10:13:02","modified_gmt":"2025-11-20T18:13:02","slug":"quote-box","status":"publish","type":"page","link":"https:\/\/www.hmc.edu\/communications\/wordpress-how-tos\/quote-box\/","title":{"rendered":"WordPress: Quote Box"},"content":{"rendered":"\n<p>The Quote Box is a custom block developed by the Office of Communications and Marketing.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Purpose<\/h2>\n\n\n\n<p>This block is use to promote a program, concept, event or other initiative through a quote from an involved individual. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Availability<\/h2>\n\n\n\n<p>This block is only available on the Primary Page template, which is usually is reserved for section home pages. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Elements of the Block<\/h2>\n\n\n\n<p>The Quote Box has the following editor-defined elements:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>background image\n<ul class=\"wp-block-list\">\n<li>vertical alignment is customizable<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>image of the person being quoted<\/li>\n\n\n\n<li>the quotation itself<\/li>\n\n\n\n<li>a citation\/source for the quotation<\/li>\n\n\n\n<li>optional: one or more call-to-action buttons\n<ul class=\"wp-block-list\">\n<li>support for video player pop-up if a YouTube link is configured on the button(s)<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"559\" src=\"https:\/\/www.hmc.edu\/communications\/wp-content\/uploads\/sites\/19\/2025\/11\/quote-box-elements.jpg\" alt=\"screenshot of elements of the quote box custom block\" class=\"wp-image-2530\" srcset=\"https:\/\/www.hmc.edu\/communications\/wp-content\/uploads\/sites\/19\/2025\/11\/quote-box-elements.jpg 1200w, https:\/\/www.hmc.edu\/communications\/wp-content\/uploads\/sites\/19\/2025\/11\/quote-box-elements-300x140.jpg 300w, https:\/\/www.hmc.edu\/communications\/wp-content\/uploads\/sites\/19\/2025\/11\/quote-box-elements-1024x477.jpg 1024w, https:\/\/www.hmc.edu\/communications\/wp-content\/uploads\/sites\/19\/2025\/11\/quote-box-elements-768x358.jpg 768w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><figcaption class=\"wp-element-caption\">Customizable elements of the Quote Box block<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Adding a Quote Box Block<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>With your cursor in the editor in the desired block position, type <kbd>\/<\/kbd> to open the block selector<\/li>\n\n\n\n<li>Start typing the word &#8220;quote&#8221; and after a few characters the chooser will filter the other blocks, leaving the Quote Box as the only option; select it<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Configuring the Quote Box Block<\/h2>\n\n\n\n<p>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.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-alignleft border\"><img loading=\"lazy\" decoding=\"async\" width=\"454\" height=\"1024\" src=\"https:\/\/www.hmc.edu\/communications\/wp-content\/uploads\/sites\/19\/2025\/11\/quote-box-settings-sidebar-2-454x1024.png\" alt=\"\" class=\"wp-image-2545\" srcset=\"https:\/\/www.hmc.edu\/communications\/wp-content\/uploads\/sites\/19\/2025\/11\/quote-box-settings-sidebar-2-454x1024.png 454w, https:\/\/www.hmc.edu\/communications\/wp-content\/uploads\/sites\/19\/2025\/11\/quote-box-settings-sidebar-2-133x300.png 133w, https:\/\/www.hmc.edu\/communications\/wp-content\/uploads\/sites\/19\/2025\/11\/quote-box-settings-sidebar-2.png 552w\" sizes=\"auto, (max-width: 454px) 100vw, 454px\" \/><figcaption class=\"wp-element-caption\">Settings sidebar<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">1. Background Image<\/h3>\n\n\n\n<p>With the block focussed, and the setting sidebar open, select the <code><kbd>Choose background image<\/kbd><\/code> button.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. Background Image Vertical Alignment<\/h3>\n\n\n\n<p>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 <kbd>Center<\/kbd> (default), <kbd>Top<\/kbd> or <kbd>Bottom<\/kbd>. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3. Quote Image<\/h3>\n\n\n\n<p>To the set the image of the quoted person, ensure the block has focus and then in the settings sidebar select the <kbd>Choose quote image<\/kbd> button to either upload or choose the image from the media browser. <\/p>\n\n\n\n<p>For best results, choose a square or portrait orientation image. It only needs to be no more than approximately 400 pixels wide.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">4. Pre-rounded image<\/h3>\n\n\n\n<p>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 <kbd>Photo pre-rounded<\/kbd> toggle. This will prevent the automatic corner rounding.<\/p>\n\n\n\n<h3 class=\"wp-block-heading clear\">5. The Quote<\/h3>\n\n\n\n<p>Enter the quote into the field identified with the placeholder text <kbd>Enter quote...<\/kbd> <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">6. The Citation<\/h3>\n\n\n\n<p>Enter the citation in the field identified with <kbd>ENTER CITATION...<\/kbd> Note, the citation is uppercase regardless of whether you enter uppercase characters. This cannot be changed. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">7. Call-to-action Button<\/h3>\n\n\n\n<p>To add a call-to-action button, make sure the block has focus and select the <kbd>+<\/kbd> underneath the citation field.<\/p>\n\n\n\n<p>Refer to <a href=\"https:\/\/www.hmc.edu\/communications\/wordpress-how-tos\/buttons\/\">WordPress: Buttons<\/a> for guidance on how to configure buttons.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Quote Box is a custom block developed by the Office of Communications and Marketing. Purpose This block is use [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":995,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-2529","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hmc.edu\/communications\/wp-json\/wp\/v2\/pages\/2529","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hmc.edu\/communications\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.hmc.edu\/communications\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.hmc.edu\/communications\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hmc.edu\/communications\/wp-json\/wp\/v2\/comments?post=2529"}],"version-history":[{"count":5,"href":"https:\/\/www.hmc.edu\/communications\/wp-json\/wp\/v2\/pages\/2529\/revisions"}],"predecessor-version":[{"id":2570,"href":"https:\/\/www.hmc.edu\/communications\/wp-json\/wp\/v2\/pages\/2529\/revisions\/2570"}],"up":[{"embeddable":true,"href":"https:\/\/www.hmc.edu\/communications\/wp-json\/wp\/v2\/pages\/995"}],"wp:attachment":[{"href":"https:\/\/www.hmc.edu\/communications\/wp-json\/wp\/v2\/media?parent=2529"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}