{"id":5972,"date":"2018-11-06T14:38:47","date_gmt":"2018-11-06T19:38:47","guid":{"rendered":"https:\/\/www.pair.com\/support\/kb\/?post_type=ht_kb&p=5972"},"modified":"2023-07-28T12:42:20","modified_gmt":"2023-07-28T16:42:20","slug":"gutenberg-editor-how-to-add-images-to-wordpress-posts","status":"publish","type":"ht_kb","link":"https:\/\/www.pair.com\/support\/kb\/gutenberg-editor-how-to-add-images-to-wordpress-posts\/","title":{"rendered":"Block Editor: How to Add Images to WordPress"},"content":{"rendered":"

WP Enthusiast<\/p><\/a>

WP Professional<\/p><\/a>

WP Professional Plus<\/p><\/a>

PairSIM WordPress<\/p><\/a>

Podcast Websites<\/p><\/a><\/span><\/p>\n

Learn how to add images to a page or post in the Gutenberg block editor. If you are using the Classic WordPress editor, see the How to Add Images to WordPress article<\/a>.<\/p>\n

Adding Images to Your Site\u2019s Media Library\u00a0<\/b><\/h3>\n

\t\t

\r\n \t\t\t \t\t\t \t\t\t\t

\r\n \t\t\t\t\tThese instructions are for adding media to your WordPress site outside of a post or page. If you wish to see instructions for adding media to a page or post, see the <\/span>Adding Images to a WordPress Post or Page<\/span><\/a> section below. \t\t\t\t<\/p>\r\n \t\t\t \t\t\t\r\n \t\t<\/div>\r\n \t\t<\/span><\/p>\n

    \n
  1. Log into the WordPress admin interface<\/span><\/a><\/li>\n
  2. In the left sidebar, hover over <\/span>Media<\/b>, then click <\/span>Add New<\/b> in the drop-down\"add<\/a><\/span><\/li>\n
  3. Add files by dragging-and-dropping them on the interface or using the <\/span>Select Files<\/b> button\"add<\/a><\/span><\/li>\n
  4. Added images will appear underneath the Upload New Media interface<\/span>\"uploaded<\/li>\n<\/ol>\n

    <\/a><\/p>\n

    Adding Images Directly to a Post or Page<\/b><\/h3>\n \t\t
    \r\n \t\t\t \t\t\t \t\t\t\t

    \r\n \t\t\t\t\tMake sure you are using the <\/span>Gutenberg block editor<\/span><\/a>. If you upgraded to <\/span>WordPress 5<\/span><\/a>, then your post and page editor will default to use the Gutenberg editor. If you are still using WordPress 4 (or earlier) or have the <\/span>Classic Editor<\/span><\/a> installed, then your editor will not work with this tutorial.<\/span> \t\t\t\t<\/p>\r\n \t\t\t \t\t\t\r\n \t\t<\/div>\r\n \t\t\n

    If you want to add images directly in a post or page, you can do so by following these steps:<\/span><\/p>\n

      \n
    1. Open the page or post editor<\/span><\/li>\n
    2. Click the <\/span> plus button to add a new block\"plus<\/a><\/span><\/li>\n
    3. Click the <\/span>Image<\/b> block\"image<\/a><\/span><\/li>\n
    4. The image block will be added to the page. Click either the <\/span>Upload<\/b> or <\/span>Media Library<\/b> button\"image<\/a><\/span><\/li>\n
    5. Choose an image to add<\/span><\/li>\n<\/ol>\n

      The images will be added to your post in the block. You can move the block by clicking on the post and using the up and down arrows in the tool bar.\"moving<\/a><\/span><\/p>\n

      To learn how to align images once they are added to your content, check out our<\/span> How to Align Images in WordPress<\/span><\/a> article.<\/span><\/p>\n

      Setting a Featured Image in a Post or Page<\/h3>\n

      You can set a featured image for your blog posts or pages. To do this, follow these steps:<\/p>\n

        \n
      1. Open the post or page editor<\/li>\n
      2. Go to the right sidebar and click the tab labeled\u00a0Featured Image<\/strong>\"featured<\/a><\/li>\n
      3. In the drop-down, click\u00a0Set Featured Image<\/strong>\"set<\/a><\/li>\n
      4. Upload an image or select one from your Media Library<\/li>\n
      5. Click the\u00a0Set Featured Image\u00a0<\/strong>button\"set<\/a><\/li>\n<\/ol>\n

        This will add the image as a featured image.<\/p>\n","protected":false},"excerpt":{"rendered":"

        Learn how to add images to a page or post in the Gutenberg block editor. If you are using the Classic WordPress editor, see the How to Add Images to WordPress article. Adding Images to Your Site\u2019s Media Library\u00a0 Log into the WordPress admin interface In the left sidebar, hover…<\/p>\n","protected":false},"author":11,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":[],"ht-kb-category":[197],"ht-kb-tag":[198,205,185],"yoast_head":"\nBlock Editor: How to Add Images to WordPress - Knowledge Base - Pair Networks<\/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:\/\/www.pair.com\/support\/kb\/gutenberg-editor-how-to-add-images-to-wordpress-posts\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Block Editor: How to Add Images to WordPress - Knowledge Base - Pair Networks\" \/>\n<meta property=\"og:description\" content=\"Learn how to add images to a page or post in the Gutenberg block editor. If you are using the Classic WordPress editor, see the How to Add Images to WordPress article. Adding Images to Your Site\u2019s Media Library\u00a0 Log into the WordPress admin interface In the left sidebar, hover...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.pair.com\/support\/kb\/gutenberg-editor-how-to-add-images-to-wordpress-posts\/\" \/>\n<meta property=\"og:site_name\" content=\"Knowledge Base - Pair Networks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/pairnetworks\/\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-28T16:42:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.pair.com\/support\/kb\/wp-content\/uploads\/2020\/09\/1-5.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@pairNetworks\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.pair.com\/support\/kb\/gutenberg-editor-how-to-add-images-to-wordpress-posts\/\",\"url\":\"https:\/\/www.pair.com\/support\/kb\/gutenberg-editor-how-to-add-images-to-wordpress-posts\/\",\"name\":\"Block Editor: How to Add Images to WordPress - Knowledge Base - Pair Networks\",\"isPartOf\":{\"@id\":\"https:\/\/www.pair.com\/support\/kb\/#website\"},\"datePublished\":\"2018-11-06T19:38:47+00:00\",\"dateModified\":\"2023-07-28T16:42:20+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.pair.com\/support\/kb\/gutenberg-editor-how-to-add-images-to-wordpress-posts\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.pair.com\/support\/kb\/gutenberg-editor-how-to-add-images-to-wordpress-posts\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.pair.com\/support\/kb\/gutenberg-editor-how-to-add-images-to-wordpress-posts\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.pair.com\/support\/kb\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Block Editor: How to Add Images to WordPress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.pair.com\/support\/kb\/#website\",\"url\":\"https:\/\/www.pair.com\/support\/kb\/\",\"name\":\"Knowledge Base - Pair Networks\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.pair.com\/support\/kb\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.pair.com\/support\/kb\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.pair.com\/support\/kb\/#organization\",\"name\":\"Pair Networks\",\"url\":\"https:\/\/www.pair.com\/support\/kb\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.pair.com\/support\/kb\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.pair.com\/support\/kb\/wp-content\/uploads\/2022\/02\/Gb_TUkUE_400x400.jpeg\",\"contentUrl\":\"https:\/\/www.pair.com\/support\/kb\/wp-content\/uploads\/2022\/02\/Gb_TUkUE_400x400.jpeg\",\"width\":360,\"height\":360,\"caption\":\"Pair Networks\"},\"image\":{\"@id\":\"https:\/\/www.pair.com\/support\/kb\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/pairnetworks\/\",\"https:\/\/twitter.com\/pairNetworks\",\"https:\/\/www.instagram.com\/pairnetworks\/\",\"https:\/\/www.linkedin.com\/company\/2269676\/\",\"https:\/\/www.pinterest.com\/pairnetworksinc\/pins\/\",\"https:\/\/www.youtube.com\/user\/pairnetworks\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Block Editor: How to Add Images to WordPress - Knowledge Base - Pair Networks","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:\/\/www.pair.com\/support\/kb\/gutenberg-editor-how-to-add-images-to-wordpress-posts\/","og_locale":"en_US","og_type":"article","og_title":"Block Editor: How to Add Images to WordPress - Knowledge Base - Pair Networks","og_description":"Learn how to add images to a page or post in the Gutenberg block editor. If you are using the Classic WordPress editor, see the How to Add Images to WordPress article. Adding Images to Your Site\u2019s Media Library\u00a0 Log into the WordPress admin interface In the left sidebar, hover...","og_url":"https:\/\/www.pair.com\/support\/kb\/gutenberg-editor-how-to-add-images-to-wordpress-posts\/","og_site_name":"Knowledge Base - Pair Networks","article_publisher":"https:\/\/www.facebook.com\/pairnetworks\/","article_modified_time":"2023-07-28T16:42:20+00:00","og_image":[{"url":"https:\/\/www.pair.com\/support\/kb\/wp-content\/uploads\/2020\/09\/1-5.png"}],"twitter_card":"summary_large_image","twitter_site":"@pairNetworks","twitter_misc":{"Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.pair.com\/support\/kb\/gutenberg-editor-how-to-add-images-to-wordpress-posts\/","url":"https:\/\/www.pair.com\/support\/kb\/gutenberg-editor-how-to-add-images-to-wordpress-posts\/","name":"Block Editor: How to Add Images to WordPress - Knowledge Base - Pair Networks","isPartOf":{"@id":"https:\/\/www.pair.com\/support\/kb\/#website"},"datePublished":"2018-11-06T19:38:47+00:00","dateModified":"2023-07-28T16:42:20+00:00","breadcrumb":{"@id":"https:\/\/www.pair.com\/support\/kb\/gutenberg-editor-how-to-add-images-to-wordpress-posts\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.pair.com\/support\/kb\/gutenberg-editor-how-to-add-images-to-wordpress-posts\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.pair.com\/support\/kb\/gutenberg-editor-how-to-add-images-to-wordpress-posts\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.pair.com\/support\/kb\/"},{"@type":"ListItem","position":2,"name":"Block Editor: How to Add Images to WordPress"}]},{"@type":"WebSite","@id":"https:\/\/www.pair.com\/support\/kb\/#website","url":"https:\/\/www.pair.com\/support\/kb\/","name":"Knowledge Base - Pair Networks","description":"","publisher":{"@id":"https:\/\/www.pair.com\/support\/kb\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.pair.com\/support\/kb\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.pair.com\/support\/kb\/#organization","name":"Pair Networks","url":"https:\/\/www.pair.com\/support\/kb\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.pair.com\/support\/kb\/#\/schema\/logo\/image\/","url":"https:\/\/www.pair.com\/support\/kb\/wp-content\/uploads\/2022\/02\/Gb_TUkUE_400x400.jpeg","contentUrl":"https:\/\/www.pair.com\/support\/kb\/wp-content\/uploads\/2022\/02\/Gb_TUkUE_400x400.jpeg","width":360,"height":360,"caption":"Pair Networks"},"image":{"@id":"https:\/\/www.pair.com\/support\/kb\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/pairnetworks\/","https:\/\/twitter.com\/pairNetworks","https:\/\/www.instagram.com\/pairnetworks\/","https:\/\/www.linkedin.com\/company\/2269676\/","https:\/\/www.pinterest.com\/pairnetworksinc\/pins\/","https:\/\/www.youtube.com\/user\/pairnetworks"]}]}},"_links":{"self":[{"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/ht-kb\/5972"}],"collection":[{"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/comments?post=5972"}],"version-history":[{"count":15,"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/ht-kb\/5972\/revisions"}],"predecessor-version":[{"id":9244,"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/ht-kb\/5972\/revisions\/9244"}],"wp:attachment":[{"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/media?parent=5972"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/ht-kb-category?post=5972"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/ht-kb-tag?post=5972"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}