{"id":12346,"date":"2018-01-29T15:12:48","date_gmt":"2018-01-29T20:12:48","guid":{"rendered":"https:\/\/www.boldgrid.com\/support\/?p=12346"},"modified":"2020-03-12T14:39:23","modified_gmt":"2020-03-12T18:39:23","slug":"using-the-cover-image-block-in-the-gutenberg-editor","status":"publish","type":"post","link":"https:\/\/www.boldgrid.com\/support\/wordpress-tutorials\/using-the-cover-image-block-in-the-gutenberg-editor\/","title":{"rendered":"Using the Cover Image Block in the Gutenberg Editor"},"content":{"rendered":"<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD HTML 4.0 Transitional\/\/EN\" \"http:\/\/www.w3.org\/TR\/REC-html40\/loose.dtd\">\n<?xml encoding=\"utf-8\" ?><html><body><p>One of the common needs of creating a post is adding an image with a title. Sometimes, you may have an image but no title and no way to edit the image. Fortunately, WordPress has anticipated this need with the <strong>Cover Image Block<\/strong>. Step through the tutorial below to learn how to use the <strong>Cover Image Block in the Gutenberg editor<\/strong>.<\/p>\n<p class=\"alert alert-danger\">Note that the Gutenberg editor has been integrated directly into the WordPress Administrator dashboard as of <strong>WordPress version 5.0<\/strong>. It is now the default WordPress editor.<\/p>\n<ol>\n<li><a href=\"http:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/wordpress-introduction\/logging-into-wordpress-dashboard\" target=\"_blank\" rel=\"noopener noreferrer\">Login to your WordPress Administrator Dashboard<\/a>.<\/li>\n<li>Open an existing draft of a page or post in the editor. You can also create a new page or post.<\/li>\n<li><a href=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/01\/12346-select-cover-block.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignright wp-image-16367 size-medium\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/01\/12346-select-cover-block-300x125.png\" alt=\"\" width=\"300\" height=\"125\" srcset=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/01\/12346-select-cover-block-300x125.png 300w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/01\/12346-select-cover-block-768x320.png 768w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/01\/12346-select-cover-block-1024x427.png 1024w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/01\/12346-select-cover-block-250x104.png 250w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/01\/12346-select-cover-block-550x229.png 550w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/01\/12346-select-cover-block-800x333.png 800w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/01\/12346-select-cover-block-432x180.png 432w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/01\/12346-select-cover-block-720x300.png 720w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/01\/12346-select-cover-block-1200x500.png 1200w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/01\/12346-select-cover-block.png 1692w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a>If you don&rsquo;t want a title to appear above the image, then leave the title option empty. Click the <b>+<\/b> to add a block. Find <strong>Common Blocks<\/strong>, then select the <strong>Cover Image<\/strong> block.\n<div style=\"clear: both;\"><\/div>\n<\/li>\n<li><a href=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/01\/12346-choose-cover-image.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignright wp-image-16368 size-medium\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/01\/12346-choose-cover-image-300x134.png\" alt=\"\" width=\"300\" height=\"134\" srcset=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/01\/12346-choose-cover-image-300x134.png 300w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/01\/12346-choose-cover-image-768x343.png 768w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/01\/12346-choose-cover-image-1024x457.png 1024w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/01\/12346-choose-cover-image-250x112.png 250w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/01\/12346-choose-cover-image-550x246.png 550w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/01\/12346-choose-cover-image-800x357.png 800w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/01\/12346-choose-cover-image-403x180.png 403w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/01\/12346-choose-cover-image-672x300.png 672w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/01\/12346-choose-cover-image-1120x500.png 1120w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/01\/12346-choose-cover-image.png 1693w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a>You will then see the option to upload or choose an image from the media gallery. Upload or select an image to use for your cover image.\n<div style=\"clear: both;\"><\/div>\n<\/li>\n<li><a href=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/01\/12346-type-in-title.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignright wp-image-16369 size-medium\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/01\/12346-type-in-title-300x211.png\" alt=\"\" width=\"300\" height=\"211\" srcset=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/01\/12346-type-in-title-300x211.png 300w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/01\/12346-type-in-title-768x540.png 768w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/01\/12346-type-in-title-250x176.png 250w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/01\/12346-type-in-title-550x387.png 550w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/01\/12346-type-in-title-256x180.png 256w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/01\/12346-type-in-title-427x300.png 427w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/01\/12346-type-in-title-711x500.png 711w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/01\/12346-type-in-title.png 781w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a>When the image is selected it will be faded out so that the title stands out. You will see a blinking cursor where you can type your title. Remember that the title goes across the image. Type in your cover image title. You also have several options for alignment in the to left corner tool bar.\n<div style=\"clear: both;\"><\/div>\n<\/li>\n<li>If you are finished with the <strong>Cover Image block<\/strong>, you can then click on <strong>Publish<\/strong> or <strong>Update<\/strong> to save your work.\n<div style=\"clear: both;\"><\/div>\n<\/li>\n<\/ol>\n<p>Congratulations! You now know how to add a Cover Image with a title using the Gutenberg editor. For information please see <a href=\"https:\/\/www.boldgrid.com\/support\/wordpress-tutorials\/how-to-use-the-text-column-block-in-the-gutenberg-editor\/\">How to use the Text Column Block in the Gutenberg editor<\/a>.<\/p>\n<\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>One of the common needs of creating a post is adding an image with a title. Sometimes, you may have an image but no title and no way to edit the image. Fortunately, WordPress has anticipated this need with the Cover Image Block. Step through the tutorial below to learn how to use the Cover [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"bgseo_title":"Cover Image Block in the Gutenberg Editor","bgseo_description":"How to use the cover image block in the Gutenberg editor.","bgseo_robots_index":"index","bgseo_robots_follow":"follow","footnotes":""},"categories":[151],"tags":[691],"class_list":["post-12346","post","type-post","status-publish","format-standard","hentry","category-wordpress-tutorials","tag-gutenberg"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/12346","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/comments?post=12346"}],"version-history":[{"count":6,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/12346\/revisions"}],"predecessor-version":[{"id":17899,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/12346\/revisions\/17899"}],"wp:attachment":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/media?parent=12346"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/categories?post=12346"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/tags?post=12346"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}