/ en /news/2021-03/how-toembed-image <span>How to...Embed an Image</span> <span><span lang="" about="/user/406" typeof="schema:Person" property="schema:name" datatype="" xml:lang="">Kelly Hansen</span></span> <span>Tue, 03/16/2021 - 14:14</span> <div class="layout layout--gmu layout--twocol-section layout--twocol-section--30-70"> <div class="layout__region region-first"> </div> <div class="layout__region region-second"> <div data-block-plugin-id="field_block:node:news_release:body" class="block block-layout-builder block-field-blocknodenews-releasebody"> <div class="field field--name-body field--type-text-with-summary field--label-visually_hidden"> <div class="field__label visually-hidden">Body</div> <div class="field__item"><p><span class="intro-text">Embedded images are secondary supporting images within the text of a news story.  The June 2021 update to the embed feature changed the icon in the WYSIWYG toolbar and smoothed out the embed process.  </span></p> <p> </p> <h3>Create your content item (page or content type - news, faculty profile, program)</h3> <ul><li>Click the 'Customize Page' tab</li> <li>Add a 'Basic Text' block to a section</li> <li>Title the block</li> <li>Add text content (I used cupcake Ipsum to generate filler text - <a href="http://www.cupcakeipsum.com/" target="_blank">http://www.cupcakeipsum.com/</a>)</li> <li>put your cursor in the top left corner of the block editing window, ahead of the text you pasted in</li> <li>Click the embed icon (it looks like an image with musical notes on top of it)</li> <li>Upload an image to embed - I chose a 6 KB cupcake image</li> <li>Click Save and Insert</li> </ul><h3> </h3> <h3>After inserting the image in the block, you will need to add the alt text, set the alignment, opt to use a caption, and choose the display size. From the text block:</h3> <ul><li>Click the small 'edit' button next to the image in the text block</li> <li>Add alt text</li> <li>Select the alignment (none, left, center, right)</li> <li>If a caption is needed, click the caption box (you will add the caption after the image is placed)</li> <li>Select the desired display size (extra large, large, medium, small)</li> <li>Click 'save'</li> </ul><p> </p> <p><a href="https://sitemasonry.gmu.edu/image-embed-sample-page-two">View a sample page with image embed sizes and descriptions.</a></p> <h3>Commit your work by clicking 'save layout' on the Customize Page screen</h3> <p>Remember to publish!</p> <p> </p> <p><a href="https://sitemasonry.gmu.edu/image-embed-sample-page-two">View a sample page with image embed sizes and descriptions.</a></p> <p> </p> <div class="align-center" style="min-width: 50%;"> <div class="field field--name-field-media-video-embed-field field--type-video-embed-field field--label-hidden field__item"><div class="video-embed-field-provider-youtube video-embed-field-responsive-video"><iframe width="854" height="480" frameborder="0" allowfullscreen="allowfullscreen" src="https://www.youtube.com/embed/QtryBy-9xwg?autoplay=0&start=0&rel=0"></iframe> </div> </div> </div> <p> </p> </div> </div> </div> <div data-block-plugin-id="field_block:node:news_release:field_content_topics" class="block block-layout-builder block-field-blocknodenews-releasefield-content-topics"> <h2>Topics</h2> <div class="field field--name-field-content-topics field--type-entity-reference field--label-visually_hidden"> <div class="field__label visually-hidden">Topics</div> <div class="field__items"> <div class="field__item"><a href="/taxonomy/term/8606" hreflang="en">Page Basics</a></div> <div class="field__item"><a href="/taxonomy/term/14566" hreflang="en">Image Management Tutorial</a></div> </div> </div> </div> </div> </div> Tue, 16 Mar 2021 18:14:27 +0000 Kelly Hansen 97176 at