{"id":1354,"date":"2024-01-17T16:02:03","date_gmt":"2024-01-17T16:02:03","guid":{"rendered":"https:\/\/digitaldocumentation.wustl.edu\/doc-central\/?page_id=718"},"modified":"2024-09-23T16:33:56","modified_gmt":"2024-09-23T16:33:56","slug":"image","status":"publish","type":"page","link":"https:\/\/digitaldocumentation.wustl.edu\/environment\/blocks\/image\/","title":{"rendered":"Image"},"content":{"rendered":"\n

The image block allows you to add an image to your site by uploading an image, selecting an image from the media library, or inserting the image from a URL.<\/p>\n\n\n\n

\"Brookings
Brookings Hall on the Danforth Campus of WashU. Photo by Mark Katzman\/WUSTL Photos<\/figcaption><\/figure>\n\n\n\n

How to use the image block<\/h2>\n\n\n\n
    \n
  1. Decide what image you want to add. If you need the image URL, have it copied to your clipboard.<\/li>\n\n\n\n
  2. In the Page editor, navigate to the place on the page where you want to display the image.<\/li>\n\n\n\n
  3. Click [+] and select Image from the block menu.<\/li>\n\n\n\n
  4. Select Upload, Media Library or Insert from URL and follow the prompts.<\/li>\n\n\n\n
  5. Fill in the alt text field<\/a> with a brief description of the image for screen readers.<\/li>\n\n\n\n
  6. In the floating menu, select the image alignment icon:\n
      \n
    1. Wide width<\/em> (does not display on child pages<\/a> due to side navigation)<\/li>\n\n\n\n
    2. Full width (does not display on child pages<\/a> due to side navigation)<\/li>\n\n\n\n
    3. Center aligned<\/li>\n\n\n\n
    4. Left aligned<\/li>\n\n\n\n
    5. Right aligned<\/li>\n<\/ol>\n<\/li>\n\n\n\n
    6. If necessary, navigate to the right sidebar while the image block is active to specify Image size<\/strong> or display percentage.<\/strong>\n
        \n
      • If an image alignment is set to full width or wide width, changing the image size to anything other than “full size” will dramatically decrease your image quality.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
      • Click Update<\/strong> in the top right corner of the Page Editor and View Page<\/strong> to check the display. Make any adjustments to your settings as needed.<\/li>\n<\/ol>\n\n\n\n

        Sizing<\/h3>\n\n\n\n

        In most cases, an image sized to 950px is the largest width you will need for the image block used on pages or posts.<\/p>\n\n\n\n

          \n
        • The largest an image block will display on pages at any alignment is 750px wide on desktop and 920px wide on tablets.<\/li>\n\n\n\n
        • The largest an image block will display on posts at default or wide-width alignment is 950px.<\/li>\n<\/ul>\n\n\n\n

          However, if you choose full-width alignment on a page without a sidebar or a post, the image block will stretch as wide as the browser window. In those use cases, we recommend sizing your image to 1920px wide.<\/p>\n\n\n\n

          Captions<\/h3>\n\n\n\n

          When you add an image block, the caption entered in the media library will display below the image by default. The image caption can be changed or deleted from the block if desired. Edits to the block caption will not change the caption of the image in the media library.<\/p>\n","protected":false},"excerpt":{"rendered":"

          The image block allows you to add an image to your site by uploading an image, selecting an image from the media library, or inserting the image from a URL. How to use the image block Sizing In most cases, an image sized to 950px is the largest width you will need for the image […]<\/p>\n","protected":false},"author":17,"featured_media":0,"parent":567,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"acf":[],"yoast_head":"\nImage - Center for the Environment<\/title>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Image - Center for the Environment\" \/>\n<meta property=\"og:description\" content=\"The image block allows you to add an image to your site by uploading an image, selecting an image from the media library, or inserting the image from a URL. How to use the image block Sizing In most cases, an image sized to 950px is the largest width you will need for the image […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/digitaldocumentation.wustl.edu\/environment\/blocks\/image\/\" \/>\n<meta property=\"og:site_name\" content=\"Center for the Environment\" \/>\n<meta property=\"article:modified_time\" content=\"2024-09-23T16:33:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/digitaldocumentation.wustl.edu\/doc-central\/wp-content\/uploads\/sites\/2\/2022\/05\/120402_mpk_brookings_hall_3377-1024x683.jpg\" \/>\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=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/digitaldocumentation.wustl.edu\/environment\/blocks\/image\/\",\"url\":\"https:\/\/digitaldocumentation.wustl.edu\/environment\/blocks\/image\/\",\"name\":\"Image - Center for the Environment\",\"isPartOf\":{\"@id\":\"https:\/\/digitaldocumentation.wustl.edu\/environment\/#website\"},\"datePublished\":\"2024-01-17T16:02:03+00:00\",\"dateModified\":\"2024-09-23T16:33:56+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/digitaldocumentation.wustl.edu\/environment\/blocks\/image\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/digitaldocumentation.wustl.edu\/environment\/blocks\/image\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/digitaldocumentation.wustl.edu\/environment\/blocks\/image\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/digitaldocumentation.wustl.edu\/environment\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Blocks\",\"item\":\"https:\/\/digitaldocumentation.wustl.edu\/environment\/blocks\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Image\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/digitaldocumentation.wustl.edu\/environment\/#website\",\"url\":\"https:\/\/digitaldocumentation.wustl.edu\/environment\/\",\"name\":\"Center for the Environment\",\"description\":\"Just another digitaldocumentation.wustl.edu Sites site\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/digitaldocumentation.wustl.edu\/environment\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Image - Center for the Environment","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"en_US","og_type":"article","og_title":"Image - Center for the Environment","og_description":"The image block allows you to add an image to your site by uploading an image, selecting an image from the media library, or inserting the image from a URL. How to use the image block Sizing In most cases, an image sized to 950px is the largest width you will need for the image […]","og_url":"https:\/\/digitaldocumentation.wustl.edu\/environment\/blocks\/image\/","og_site_name":"Center for the Environment","article_modified_time":"2024-09-23T16:33:56+00:00","og_image":[{"url":"https:\/\/digitaldocumentation.wustl.edu\/doc-central\/wp-content\/uploads\/sites\/2\/2022\/05\/120402_mpk_brookings_hall_3377-1024x683.jpg"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/digitaldocumentation.wustl.edu\/environment\/blocks\/image\/","url":"https:\/\/digitaldocumentation.wustl.edu\/environment\/blocks\/image\/","name":"Image - Center for the Environment","isPartOf":{"@id":"https:\/\/digitaldocumentation.wustl.edu\/environment\/#website"},"datePublished":"2024-01-17T16:02:03+00:00","dateModified":"2024-09-23T16:33:56+00:00","breadcrumb":{"@id":"https:\/\/digitaldocumentation.wustl.edu\/environment\/blocks\/image\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/digitaldocumentation.wustl.edu\/environment\/blocks\/image\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/digitaldocumentation.wustl.edu\/environment\/blocks\/image\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/digitaldocumentation.wustl.edu\/environment\/"},{"@type":"ListItem","position":2,"name":"Blocks","item":"https:\/\/digitaldocumentation.wustl.edu\/environment\/blocks\/"},{"@type":"ListItem","position":3,"name":"Image"}]},{"@type":"WebSite","@id":"https:\/\/digitaldocumentation.wustl.edu\/environment\/#website","url":"https:\/\/digitaldocumentation.wustl.edu\/environment\/","name":"Center for the Environment","description":"Just another digitaldocumentation.wustl.edu Sites site","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/digitaldocumentation.wustl.edu\/environment\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"}]}},"distributor_meta":false,"distributor_terms":false,"distributor_media":false,"distributor_original_site_name":"Center for the Environment","distributor_original_site_url":"https:\/\/digitaldocumentation.wustl.edu\/environment","push-errors":false,"_links":{"self":[{"href":"https:\/\/digitaldocumentation.wustl.edu\/environment\/wp-json\/wp\/v2\/pages\/1354"}],"collection":[{"href":"https:\/\/digitaldocumentation.wustl.edu\/environment\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/digitaldocumentation.wustl.edu\/environment\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/digitaldocumentation.wustl.edu\/environment\/wp-json\/wp\/v2\/users\/17"}],"replies":[{"embeddable":true,"href":"https:\/\/digitaldocumentation.wustl.edu\/environment\/wp-json\/wp\/v2\/comments?post=1354"}],"version-history":[{"count":4,"href":"https:\/\/digitaldocumentation.wustl.edu\/environment\/wp-json\/wp\/v2\/pages\/1354\/revisions"}],"predecessor-version":[{"id":1622,"href":"https:\/\/digitaldocumentation.wustl.edu\/environment\/wp-json\/wp\/v2\/pages\/1354\/revisions\/1622"}],"up":[{"embeddable":true,"href":"https:\/\/digitaldocumentation.wustl.edu\/environment\/wp-json\/wp\/v2\/pages\/567"}],"wp:attachment":[{"href":"https:\/\/digitaldocumentation.wustl.edu\/environment\/wp-json\/wp\/v2\/media?parent=1354"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}