{"id":425,"date":"2020-05-26T22:55:57","date_gmt":"2020-05-26T22:55:57","guid":{"rendered":"https:\/\/dev.ucomm.ncsu.edu\/documentation\/?page_id=425"},"modified":"2022-09-13T00:27:38","modified_gmt":"2022-09-13T04:27:38","slug":"media-divider-block","status":"publish","type":"page","link":"https:\/\/dev.ucomm.ncsu.edu\/documentation\/products\/nc-state-web-platform\/blocks\/media-divider-block\/","title":{"rendered":"Media Divider"},"content":{"rendered":"\n<p><strong>This block is only featured in the Premium Tier of the NC&#160;State Web Platform.<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Use Cases<\/h2>\n\n\n\n<p>The Media Divider block is best used to break up large bodies of text while simultaneously making a page more interesting to the reader. The Media Divider block stylizes images in an eye catching, wider format that sprawls across the page in a more captivating fashion than a standard Image block. This block can also be a nice way to highlight stunning photography as it takes up a large portion of a page.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"581\" src=\"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2020\/05\/screen-shot-media-divider-1024x581.png\" alt=\"\" class=\"wp-image-573\" srcset=\"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2020\/05\/screen-shot-media-divider-1024x581.png 1024w, https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2020\/05\/screen-shot-media-divider-300x170.png 300w, https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2020\/05\/screen-shot-media-divider-768x435.png 768w, https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2020\/05\/screen-shot-media-divider-1536x871.png 1536w, https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2020\/05\/screen-shot-media-divider-2048x1161.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Features<\/h2>\n\n\n\n<p>In Gutenberg, adding a Media Divider block to a page is as easy as clicking the &#8220;Add a block&#8221; button and choosing &#8220;Media Divider&#8221; from the block list. Alternatively, the block can be found by using the &#8220;Search for a block&#8221; function. For more info on blocks and adding them to a WordPress site, see our <a rel=\"noreferrer noopener\" href=\"https:\/\/dev.ucomm.ncsu.edu\/documentation\/platforms\/nc-state-theme\/blocks\/\" target=\"_blank\">documentation on blocks<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1500\" height=\"874\" src=\"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2020\/05\/media-divider-pt-1.gif\" alt=\"\" class=\"wp-image-569\"\/><\/figure>\n\n\n\n<p>Once added, the Media Divider block is very straightforward to setup. All creators must do is upload or choose an image from the Media Library. WordPress will then implement the wider styling across the page.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1500\" height=\"874\" src=\"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2020\/05\/media-divider-pt-2.gif\" alt=\"\" class=\"wp-image-571\"\/><\/figure>\n\n\n\n<p>One final mention, is that the Media Divider block also allows for a video file, which can be set through the right hand-side menu by clicking &#8220;Select an .mp4 File&#8221;. When an .mp4 is uploaded this way, the original image will act as a thumbnail on the page.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"569\" src=\"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2020\/05\/screen-shot-media-divider-select-mp4-1024x569.png\" alt=\"\" class=\"wp-image-575\" srcset=\"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2020\/05\/screen-shot-media-divider-select-mp4-1024x569.png 1024w, https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2020\/05\/screen-shot-media-divider-select-mp4-300x167.png 300w, https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2020\/05\/screen-shot-media-divider-select-mp4-768x427.png 768w, https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2020\/05\/screen-shot-media-divider-select-mp4-1536x853.png 1536w, https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2020\/05\/screen-shot-media-divider-select-mp4-2048x1137.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Need help?<\/h2>\n\n\n\n<p>Have questions? Feel free to reach out with any questions or concerns at\u00a0<a href=\"http:\/\/go.ncsu.edu\/ucomm-dev-request\">go.ncsu.edu\/ucomm-dev-request<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Use Cases The Media Divider block is best used to break up large bodies of text while simultaneously making a page more interesting to the reader. The Media Divider block&hellip;<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":178,"menu_order":5,"comment_status":"closed","ping_status":"closed","template":"","meta":{"ncst_dynamicHeaderBlockName":"ncst\/default-header","ncst_dynamicHeaderData":"{\"pageIntro\":\"Forming dramatic page breaks and highlighting particularly special images. \"}","ncst_content_audit_freq":"","ncst_content_audit_date":"","footnotes":"","_links_to":"","_links_to_target":""},"acf":[],"_links":{"self":[{"href":"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-json\/wp\/v2\/pages\/425"}],"collection":[{"href":"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-json\/wp\/v2\/comments?post=425"}],"version-history":[{"count":10,"href":"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-json\/wp\/v2\/pages\/425\/revisions"}],"predecessor-version":[{"id":2996,"href":"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-json\/wp\/v2\/pages\/425\/revisions\/2996"}],"up":[{"embeddable":true,"href":"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-json\/wp\/v2\/pages\/178"}],"wp:attachment":[{"href":"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-json\/wp\/v2\/media?parent=425"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}