{"id":46,"date":"2023-10-26T15:52:14","date_gmt":"2023-10-26T19:52:14","guid":{"rendered":"https:\/\/in.umw.edu\/university-communications\/?page_id=46"},"modified":"2024-03-27T10:16:21","modified_gmt":"2024-03-27T14:16:21","slug":"umw-textimage-block","status":"publish","type":"page","link":"https:\/\/in.umw.edu\/university-communications\/digital-communications\/managing-your-site\/block-editor-overview\/umw-textimage-block\/","title":{"rendered":"UMW Text+Image Block"},"content":{"rendered":"\n<section class=\"wp-block-umw-hero alignfull umw-custom-block umw-hero umw-hero--dark-text umw-hero--media-float-right umw-hero--white umw-hero--with-no-media\"><div class=\"umw-hero__inner\"><div class=\"umw-hero__media\"><\/div><div class=\"umw-hero__title\"><div class=\"container\"><div class=\"umw-hero__title__wrapper\"><div class=\"umw-hero__eyebrow\">Digital Communications<\/div><h1 class=\"umw-hero__title__header\">UMW Text+Image Block<\/h1><\/div><\/div><\/div><\/div>\n<div class=\"wp-block-umw-hero-ctas alignfull\"><div class=\"umw-hero__links\"><div class=\"container\"><div class=\"umw-hero__links__wrapper\">\n\n\n\n<\/div><\/div><\/div><\/div>\n<\/section>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-information-and-a-pop-of-color\">Information and a Pop of Color<\/h2>\n\n\n\n<p>The UMW Text+Image block has a little bit of everything: room for an image, built in heading and paragraphs fields, and an optional call to action (CTA) button to keeps users exploring through your content. An important thing to note is that there is another block called &#8220;Media &amp; Text&#8221; &#8211; this is not the same as the UMW Text+Image block and should not be used. Below is an example of the default text+image block.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"337\" src=\"http:\/\/in.umw.edu\/university-communications\/wp-content\/uploads\/sites\/9\/2023\/10\/Text-and-Image-Default-1024x337.png\" alt=\"Example of the default appearance of the text and image block. There is a text field on the left with space for a heading and body content. On the right is a yellow box hat can house an image.\" class=\"wp-image-47\" srcset=\"\/\/in.umw.edu\/university-communications\/wp-content\/uploads\/sites\/9\/2023\/10\/Text-and-Image-Default-1024x337.png 1024w, \/\/in.umw.edu\/university-communications\/wp-content\/uploads\/sites\/9\/2023\/10\/Text-and-Image-Default-300x99.png 300w, \/\/in.umw.edu\/university-communications\/wp-content\/uploads\/sites\/9\/2023\/10\/Text-and-Image-Default-768x253.png 768w, \/\/in.umw.edu\/university-communications\/wp-content\/uploads\/sites\/9\/2023\/10\/Text-and-Image-Default-1536x506.png 1536w, \/\/in.umw.edu\/university-communications\/wp-content\/uploads\/sites\/9\/2023\/10\/Text-and-Image-Default-1140x376.png 1140w, \/\/in.umw.edu\/university-communications\/wp-content\/uploads\/sites\/9\/2023\/10\/Text-and-Image-Default.png 1602w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-umw-text-image-block-customization\">UMW Text+Image Block Customization<\/h3>\n\n\n\n<p>There are a few customization options for this block that can make each use of it feel unique, even if multiple are used on the same page. The background color can changed between four pre-approved brand colors, and image can be inserted on top of the colored background, and the text and image areas can be flipped. Below is an example of these options is use. The background color has been changed to a dark blue, there is an image, and the text and image areas are on opposite sides.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"421\" src=\"http:\/\/in.umw.edu\/university-communications\/wp-content\/uploads\/sites\/9\/2023\/10\/Text-and-Image-Customized-1024x421.png\" alt=\"Example of the text and image block with customization done: the dark blue background is on the left, there is an image of the bell tower on the blue background, and the text field is now on the right side.\" class=\"wp-image-48\" srcset=\"\/\/in.umw.edu\/university-communications\/wp-content\/uploads\/sites\/9\/2023\/10\/Text-and-Image-Customized-1024x421.png 1024w, \/\/in.umw.edu\/university-communications\/wp-content\/uploads\/sites\/9\/2023\/10\/Text-and-Image-Customized-300x123.png 300w, \/\/in.umw.edu\/university-communications\/wp-content\/uploads\/sites\/9\/2023\/10\/Text-and-Image-Customized-768x316.png 768w, \/\/in.umw.edu\/university-communications\/wp-content\/uploads\/sites\/9\/2023\/10\/Text-and-Image-Customized-1536x631.png 1536w, \/\/in.umw.edu\/university-communications\/wp-content\/uploads\/sites\/9\/2023\/10\/Text-and-Image-Customized-1140x469.png 1140w, \/\/in.umw.edu\/university-communications\/wp-content\/uploads\/sites\/9\/2023\/10\/Text-and-Image-Customized.png 1540w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-umw-text-image-block-menu\">UMW Text+Image Block Menu<\/h4>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"277\" height=\"244\" src=\"http:\/\/in.umw.edu\/university-communications\/wp-content\/uploads\/sites\/9\/2023\/10\/Text-and-Image-Menu-1.png\" alt=\"Example of the text and image block menu with options to insert an image and change the background color between yellow, red, dark blue, and light blue.\" class=\"wp-image-50\"\/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<p>The block menu for the text+image block is where you can insert an image and change the background color.<br>To insert media, click &#8220;Open Media Library&#8221; and select the image you wish to use from the library of uploaded media. There will also be an option to upload media from this window.<br>The four colored circles indicate the available background colors you can use. The block will always default to the yellow, but you can easily change the background by clicking on any of the colored circles. The color will change in the editor view so you can see how it will look with the image you have chosen.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"281\" height=\"51\" src=\"http:\/\/in.umw.edu\/university-communications\/wp-content\/uploads\/sites\/9\/2023\/10\/Text-and-Image-Pop-Out-Menu.png\" alt=\"Example of the pop out menu for the text and image block. The highlighted option indicates that the block is orientated with the text on the left and the image field on the right.\" class=\"wp-image-51\"\/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<p>A unique function of this block is the ability to switch the positions of the text and image fields. To do this, click on the block to select it and  look for the pop out menu to appear. The two options for how to orient the block are shown with two thin horizontal lines on one side and a tall rectangle on the other. The lines indicate where the text will be and the rectangle indicates where the image will be. In the example show here, the highlighted option indicates that the text will be on the left and the image will be on the right.<\/p>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-umw-text-image-text-fields\">UMW Text+Image Text Fields<\/h3>\n\n\n\n<p>All text fields have placeholder text indicating what type of content is to be entered in each field.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Intro Title:<\/strong> This is where you type your heading for the text+image block.<\/li>\n\n\n\n<li><strong>Content:<\/strong> Enter any body text content in this field.<\/li>\n\n\n\n<li><strong>Call to Action:<\/strong> This optional field can be filled in with text and linked to another URL. If the field is left empty, no button will appear in the published version of the block.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Information and a Pop of Color The UMW Text+Image block has a little bit of everything: room for an image, built in heading and paragraphs fields, and an optional call to action (CTA) button to keeps users exploring through your content. An important thing to note is that there is another block called &#8220;Media &amp; [&hellip;]<\/p>\n","protected":false},"author":16,"featured_media":0,"parent":35,"menu_order":3,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"umw_cb_additional_links":[[]],"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","_advisory_expires_time":"","_advisory_meta_include":false,"footnotes":"","_links_to":"","_links_to_target":""},"class_list":{"0":"post-46","1":"page","2":"type-page","3":"status-publish","5":"entry"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.4 (Yoast SEO v26.4) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>UMW Text+Image Block - University Communications<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/in.umw.edu\/university-communications\/digital-communications\/managing-your-site\/block-editor-overview\/umw-textimage-block\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"UMW Text+Image Block\" \/>\n<meta property=\"og:description\" content=\"Information and a Pop of Color The UMW Text+Image block has a little bit of everything: room for an image, built in heading and paragraphs fields, and an optional call to action (CTA) button to keeps users exploring through your content. An important thing to note is that there is another block called &#8220;Media &amp; [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/in.umw.edu\/university-communications\/digital-communications\/managing-your-site\/block-editor-overview\/umw-textimage-block\/\" \/>\n<meta property=\"og:site_name\" content=\"University Communications\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-27T14:16:21+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/in.umw.edu\/university-communications\/wp-content\/uploads\/sites\/9\/2023\/10\/Text-and-Image-Default-1024x337.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/in.umw.edu\/university-communications\/digital-communications\/managing-your-site\/block-editor-overview\/umw-textimage-block\/\",\"url\":\"https:\/\/in.umw.edu\/university-communications\/digital-communications\/managing-your-site\/block-editor-overview\/umw-textimage-block\/\",\"name\":\"UMW Text+Image Block - University Communications\",\"isPartOf\":{\"@id\":\"https:\/\/in.umw.edu\/university-communications\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/in.umw.edu\/university-communications\/digital-communications\/managing-your-site\/block-editor-overview\/umw-textimage-block\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/in.umw.edu\/university-communications\/digital-communications\/managing-your-site\/block-editor-overview\/umw-textimage-block\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/in.umw.edu\/university-communications\/wp-content\/uploads\/sites\/9\/2023\/10\/Text-and-Image-Default-1024x337.png\",\"datePublished\":\"2023-10-26T19:52:14+00:00\",\"dateModified\":\"2024-03-27T14:16:21+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/in.umw.edu\/university-communications\/digital-communications\/managing-your-site\/block-editor-overview\/umw-textimage-block\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/in.umw.edu\/university-communications\/digital-communications\/managing-your-site\/block-editor-overview\/umw-textimage-block\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/in.umw.edu\/university-communications\/digital-communications\/managing-your-site\/block-editor-overview\/umw-textimage-block\/#primaryimage\",\"url\":\"http:\/\/in.umw.edu\/university-communications\/wp-content\/uploads\/sites\/9\/2023\/10\/Text-and-Image-Default-1024x337.png\",\"contentUrl\":\"http:\/\/in.umw.edu\/university-communications\/wp-content\/uploads\/sites\/9\/2023\/10\/Text-and-Image-Default-1024x337.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/in.umw.edu\/university-communications\/digital-communications\/managing-your-site\/block-editor-overview\/umw-textimage-block\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/in.umw.edu\/university-communications\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Digital Communications\",\"item\":\"https:\/\/in.umw.edu\/university-communications\/digital-communications\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Managing Your Site\",\"item\":\"https:\/\/in.umw.edu\/university-communications\/digital-communications\/managing-your-site\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Block Editor Overview\",\"item\":\"https:\/\/in.umw.edu\/university-communications\/digital-communications\/managing-your-site\/block-editor-overview\/\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"UMW Text+Image Block\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/in.umw.edu\/university-communications\/#website\",\"url\":\"https:\/\/in.umw.edu\/university-communications\/\",\"name\":\"University Communications\",\"description\":\"University of Mary Washington\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/in.umw.edu\/university-communications\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"UMW Text+Image Block - University Communications","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/in.umw.edu\/university-communications\/digital-communications\/managing-your-site\/block-editor-overview\/umw-textimage-block\/","og_locale":"en_US","og_type":"article","og_title":"UMW Text+Image Block","og_description":"Information and a Pop of Color The UMW Text+Image block has a little bit of everything: room for an image, built in heading and paragraphs fields, and an optional call to action (CTA) button to keeps users exploring through your content. An important thing to note is that there is another block called &#8220;Media &amp; [&hellip;]","og_url":"https:\/\/in.umw.edu\/university-communications\/digital-communications\/managing-your-site\/block-editor-overview\/umw-textimage-block\/","og_site_name":"University Communications","article_modified_time":"2024-03-27T14:16:21+00:00","og_image":[{"url":"http:\/\/in.umw.edu\/university-communications\/wp-content\/uploads\/sites\/9\/2023\/10\/Text-and-Image-Default-1024x337.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/in.umw.edu\/university-communications\/digital-communications\/managing-your-site\/block-editor-overview\/umw-textimage-block\/","url":"https:\/\/in.umw.edu\/university-communications\/digital-communications\/managing-your-site\/block-editor-overview\/umw-textimage-block\/","name":"UMW Text+Image Block - University Communications","isPartOf":{"@id":"https:\/\/in.umw.edu\/university-communications\/#website"},"primaryImageOfPage":{"@id":"https:\/\/in.umw.edu\/university-communications\/digital-communications\/managing-your-site\/block-editor-overview\/umw-textimage-block\/#primaryimage"},"image":{"@id":"https:\/\/in.umw.edu\/university-communications\/digital-communications\/managing-your-site\/block-editor-overview\/umw-textimage-block\/#primaryimage"},"thumbnailUrl":"http:\/\/in.umw.edu\/university-communications\/wp-content\/uploads\/sites\/9\/2023\/10\/Text-and-Image-Default-1024x337.png","datePublished":"2023-10-26T19:52:14+00:00","dateModified":"2024-03-27T14:16:21+00:00","breadcrumb":{"@id":"https:\/\/in.umw.edu\/university-communications\/digital-communications\/managing-your-site\/block-editor-overview\/umw-textimage-block\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/in.umw.edu\/university-communications\/digital-communications\/managing-your-site\/block-editor-overview\/umw-textimage-block\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/in.umw.edu\/university-communications\/digital-communications\/managing-your-site\/block-editor-overview\/umw-textimage-block\/#primaryimage","url":"http:\/\/in.umw.edu\/university-communications\/wp-content\/uploads\/sites\/9\/2023\/10\/Text-and-Image-Default-1024x337.png","contentUrl":"http:\/\/in.umw.edu\/university-communications\/wp-content\/uploads\/sites\/9\/2023\/10\/Text-and-Image-Default-1024x337.png"},{"@type":"BreadcrumbList","@id":"https:\/\/in.umw.edu\/university-communications\/digital-communications\/managing-your-site\/block-editor-overview\/umw-textimage-block\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/in.umw.edu\/university-communications\/"},{"@type":"ListItem","position":2,"name":"Digital Communications","item":"https:\/\/in.umw.edu\/university-communications\/digital-communications\/"},{"@type":"ListItem","position":3,"name":"Managing Your Site","item":"https:\/\/in.umw.edu\/university-communications\/digital-communications\/managing-your-site\/"},{"@type":"ListItem","position":4,"name":"Block Editor Overview","item":"https:\/\/in.umw.edu\/university-communications\/digital-communications\/managing-your-site\/block-editor-overview\/"},{"@type":"ListItem","position":5,"name":"UMW Text+Image Block"}]},{"@type":"WebSite","@id":"https:\/\/in.umw.edu\/university-communications\/#website","url":"https:\/\/in.umw.edu\/university-communications\/","name":"University Communications","description":"University of Mary Washington","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/in.umw.edu\/university-communications\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/in.umw.edu\/university-communications\/wp-json\/wp\/v2\/pages\/46","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/in.umw.edu\/university-communications\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/in.umw.edu\/university-communications\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/in.umw.edu\/university-communications\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/in.umw.edu\/university-communications\/wp-json\/wp\/v2\/comments?post=46"}],"version-history":[{"count":0,"href":"https:\/\/in.umw.edu\/university-communications\/wp-json\/wp\/v2\/pages\/46\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/in.umw.edu\/university-communications\/wp-json\/wp\/v2\/pages\/35"}],"wp:attachment":[{"href":"https:\/\/in.umw.edu\/university-communications\/wp-json\/wp\/v2\/media?parent=46"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}