{"id":11284838,"date":"2019-03-07T09:41:57","date_gmt":"2019-03-07T09:41:57","guid":{"rendered":"https:\/\/wordpress.org\/support\/?post_type=helphub_article&#038;p=11284838"},"modified":"2024-06-06T17:13:58","modified_gmt":"2024-06-06T17:13:58","slug":"image-block","status":"publish","type":"helphub_article","link":"https:\/\/wordpress.org\/documentation\/article\/image-block\/","title":{"rendered":"Image block"},"content":{"rendered":"\n<p class=\"has-text-align-right has-small-font-size\"><a href=\"https:\/\/wordpress.org\/documentation\/article\/blocks\/\">Go back to the list of <strong>Blocks<\/strong><\/a><\/p>\n\n\n\n<p>The <em>image block<\/em> can be added to a page by clicking on the Add Block button.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"520\" src=\"https:\/\/wordpress.org\/documentation\/files\/2024\/01\/292768004-7e61e24c-0e39-41d8-96b9-fef6c8570337-1024x520.png\" alt=\"Add images with plus button.\" class=\"wp-image-16359452\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2024\/01\/292768004-7e61e24c-0e39-41d8-96b9-fef6c8570337-1024x520.png 1024w, https:\/\/wordpress.org\/documentation\/files\/2024\/01\/292768004-7e61e24c-0e39-41d8-96b9-fef6c8570337-300x152.png 300w, https:\/\/wordpress.org\/documentation\/files\/2024\/01\/292768004-7e61e24c-0e39-41d8-96b9-fef6c8570337-768x390.png 768w, https:\/\/wordpress.org\/documentation\/files\/2024\/01\/292768004-7e61e24c-0e39-41d8-96b9-fef6c8570337.png 1496w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Add images with plus button.<\/figcaption><\/figure>\n\n\n\n<div style=\"height:17px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Alternatively, you can type <code>\/image<\/code> and press enter.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"649\" src=\"https:\/\/wordpress.org\/documentation\/files\/2024\/01\/292768006-4bb8ddfe-4dba-49e2-b00d-b379be86b845-1024x649.png\" alt=\"Add images with a hotkey command.\" class=\"wp-image-16359454\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2024\/01\/292768006-4bb8ddfe-4dba-49e2-b00d-b379be86b845-1024x649.png 1024w, https:\/\/wordpress.org\/documentation\/files\/2024\/01\/292768006-4bb8ddfe-4dba-49e2-b00d-b379be86b845-300x190.png 300w, https:\/\/wordpress.org\/documentation\/files\/2024\/01\/292768006-4bb8ddfe-4dba-49e2-b00d-b379be86b845-768x487.png 768w, https:\/\/wordpress.org\/documentation\/files\/2024\/01\/292768006-4bb8ddfe-4dba-49e2-b00d-b379be86b845.png 1446w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Add images with a hotkey command.<\/figcaption><\/figure>\n\n\n\n<p class=\"has-text-align-left has-background\" style=\"background-color:#e5f5fa\"><a href=\"https:\/\/wordpress.org\/documentation\/article\/adding-a-new-block\/\">Detailed instructions on adding blocks<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"block-toolbar\">Block toolbar<\/h2>\n\n\n\n<p>Each block has its own block-specific controls that allow you to manipulate the block right in the editor.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"972\" height=\"708\" src=\"https:\/\/wordpress.org\/documentation\/files\/2024\/01\/292768009-a6cef77a-e7b6-4add-9955-d4f3eb0f2b1d.png\" alt=\"Image block toolbar\" class=\"wp-image-16359456\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2024\/01\/292768009-a6cef77a-e7b6-4add-9955-d4f3eb0f2b1d.png 972w, https:\/\/wordpress.org\/documentation\/files\/2024\/01\/292768009-a6cef77a-e7b6-4add-9955-d4f3eb0f2b1d-300x219.png 300w, https:\/\/wordpress.org\/documentation\/files\/2024\/01\/292768009-a6cef77a-e7b6-4add-9955-d4f3eb0f2b1d-768x559.png 768w\" sizes=\"auto, (max-width: 972px) 100vw, 972px\" \/><figcaption class=\"wp-element-caption\">Image block toolbar<\/figcaption><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Change block type<\/li>\n\n\n\n<li>Drag<\/li>\n\n\n\n<li>Move arrows<\/li>\n\n\n\n<li>Add duotone filter<\/li>\n\n\n\n<li>Align<\/li>\n\n\n\n<li>Add caption<\/li>\n\n\n\n<li>Link<\/li>\n\n\n\n<li>Crop<\/li>\n\n\n\n<li>Add text over image<\/li>\n\n\n\n<li>Replace<\/li>\n\n\n\n<li>More Options<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"adding-an-image\">Adding an image<\/h3>\n\n\n\n<p>The media options panel will load with three options, <em>Upload<\/em>, <em>Media Library<\/em>, and <em>Insert from URL<\/em>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1010\" height=\"396\" src=\"https:\/\/wordpress.org\/documentation\/files\/2024\/01\/292768014-ccdab762-350a-45e4-8031-72f14ad7766c.png\" alt=\"There are three ways to add images - Upload, Media Library, and Insert from URL.\" class=\"wp-image-16359458\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2024\/01\/292768014-ccdab762-350a-45e4-8031-72f14ad7766c.png 1010w, https:\/\/wordpress.org\/documentation\/files\/2024\/01\/292768014-ccdab762-350a-45e4-8031-72f14ad7766c-300x118.png 300w, https:\/\/wordpress.org\/documentation\/files\/2024\/01\/292768014-ccdab762-350a-45e4-8031-72f14ad7766c-768x301.png 768w\" sizes=\"auto, (max-width: 1010px) 100vw, 1010px\" \/><figcaption class=\"wp-element-caption\">There are three ways to add images &#8211; Upload, Media Library, and Insert from URL.<\/figcaption><\/figure>\n\n\n\n<p>Upload and Media Library will let you add or choose media from your library and embed it in your page. <\/p>\n\n\n\n<p>Simply add the image from the Upload Files tab, then select it in the Media Library tab. Customizing the image attachment details,&nbsp;such as the Title, Caption, Alt Text, and Description, in the Media Library window can also be helpful for SEO and future navigation of your media library.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"683\" src=\"https:\/\/wordpress.org\/documentation\/files\/2024\/01\/292768016-cd56a1c7-5958-47fa-ab52-392ca8fbff32-1024x683.png\" alt=\"Upload or select an image from your Media Library, add image information, then press Select.\" class=\"wp-image-16359460\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2024\/01\/292768016-cd56a1c7-5958-47fa-ab52-392ca8fbff32-1024x683.png 1024w, https:\/\/wordpress.org\/documentation\/files\/2024\/01\/292768016-cd56a1c7-5958-47fa-ab52-392ca8fbff32-300x200.png 300w, https:\/\/wordpress.org\/documentation\/files\/2024\/01\/292768016-cd56a1c7-5958-47fa-ab52-392ca8fbff32-768x512.png 768w, https:\/\/wordpress.org\/documentation\/files\/2024\/01\/292768016-cd56a1c7-5958-47fa-ab52-392ca8fbff32-1536x1025.png 1536w, https:\/\/wordpress.org\/documentation\/files\/2024\/01\/292768016-cd56a1c7-5958-47fa-ab52-392ca8fbff32.png 1920w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Upload or select an image from your Media Library, add image information, then press Select.<\/figcaption><\/figure>\n\n\n\n<p>It is, also, possible to drop image into empty paragraph.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/wordpress.org\/documentation\/files\/2024\/01\/drop-image-in-empty-p.mp4\"><\/video><\/figure>\n\n\n\n<p>As well as choosing an image from <a href=\"https:\/\/openverse.org\/en-gb\">Openverse<\/a>, which will be uploaded to your site&#8217;s Media.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/wordpress.org\/documentation\/files\/2024\/01\/upload-image-from-openverse.mp4\"><\/video><\/figure>\n\n\n\n<p>Images can also be dragged from inserter to existing image block.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/wordpress.org\/documentation\/files\/2024\/01\/drag-image-from-inserter.mp4\"><\/video><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"importing-external-images\">Importing external images<\/h4>\n\n\n\n<p>If you selected the &#8220;Insert from URL option&#8221; to add your image, you will see a button with an upward facing arrow. If you click on it, the image will be imported into your site&#8217;s local Media Library and the URL on the image block will be automatically updated to point at the new file.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/06\/Kapture-2023-06-02-at-13.18.09.mp4\"><\/video><figcaption class=\"wp-element-caption\">Setting the image via an external URL and then importing it to the local Media Library.<\/figcaption><\/figure>\n\n\n\n<p>If the imported image has a caption, it will be added automatically as well.<\/p>\n\n\n\n<p>Please note that the &#8220;Upload External Image&#8221; feature might not work on all websites, as some of them restrict how their images are handled.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"resizing-images\">Resizing images<\/h3>\n\n\n\n<p>Once the image is added to the editor, you can resize and align the images to better fit the surrounding content.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/12\/resize-image.mp4\"><\/video><figcaption class=\"wp-element-caption\">Resize an image by dragging its handles.<\/figcaption><\/figure>\n\n\n\n<p>To resize an image, <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Click on the image to reveal the draggable resize handles. <\/li>\n\n\n\n<li>Click on the resize handles and drag the image to your desired size.<\/li>\n<\/ul>\n\n\n\n<p>Alternatively, on the right-hand side in the Block Settings, the image size can be fine-tuned by adjusting width and height dimensions. There are also some convenient options in the block settings for setting the image to 100, 75, 50, and 25% of its original size.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aligning-images\">Aligning images<\/h3>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/12\/align-image.mp4\"><\/video><figcaption class=\"wp-element-caption\">Align an image within a paragraph block.<\/figcaption><\/figure>\n\n\n\n<p>If you wish to align an image within a paragraph you will first need to insert the image <em>just above the target paragraph block.<\/em> <br><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"668\" height=\"504\" src=\"https:\/\/wordpress.org\/documentation\/files\/2024\/01\/292768021-bc7359b8-c035-4fa5-907f-c08e70f264f5.png\" alt=\"Alignment buttons with Align left highlighted\" class=\"wp-image-16359462\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2024\/01\/292768021-bc7359b8-c035-4fa5-907f-c08e70f264f5.png 668w, https:\/\/wordpress.org\/documentation\/files\/2024\/01\/292768021-bc7359b8-c035-4fa5-907f-c08e70f264f5-300x226.png 300w\" sizes=\"auto, (max-width: 668px) 100vw, 668px\" \/><figcaption class=\"wp-element-caption\">Alignment buttons with Align left highlighted<\/figcaption><\/figure>\n\n\n\n<p>From there, click on the image and select left or right alignment, this will merge the image into the paragraph block.<\/p>\n\n\n\n<p>Finally, resize the image to your desired width and height.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"wide-and-full-width-images\">Wide and Full width images<\/h3>\n\n\n\n<p>As support for the new editor is added to our themes, you will begin seeing icons for Wide and Full Width images. These two image sizes will allow you to expand the image beyond the theme\u2019s usual content width.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/12\/full-wide-image.mp4\"><\/video><figcaption class=\"wp-element-caption\">A &#8216;Wide&#8217; image in the editor.<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"captions\">Captions<\/h3>\n\n\n\n<p>If you wish to add a caption to a singular instance of an image, simply type it in the caption space below the image in the editor.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"link-settings\">Link settings<\/h3>\n\n\n\n<p>The link settings allow you to hyperlink your images. You may choose for clicking on the image to open an attachment page, the original media file, or a custom URL of your choice.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"987\" height=\"716\" src=\"https:\/\/wordpress.org\/documentation\/files\/2024\/01\/292768022-6969ee5e-e621-426d-b27b-cd1c2e759d3f.png\" alt=\"Your image can link to an Attachment Page, Media File, or Custom URL.\" class=\"wp-image-16359464\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2024\/01\/292768022-6969ee5e-e621-426d-b27b-cd1c2e759d3f.png 987w, https:\/\/wordpress.org\/documentation\/files\/2024\/01\/292768022-6969ee5e-e621-426d-b27b-cd1c2e759d3f-300x218.png 300w, https:\/\/wordpress.org\/documentation\/files\/2024\/01\/292768022-6969ee5e-e621-426d-b27b-cd1c2e759d3f-768x557.png 768w\" sizes=\"auto, (max-width: 987px) 100vw, 987px\" \/><figcaption class=\"wp-element-caption\">Your image can link to an Attachment Page, Media File, or Custom URL.<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"image-editing\">Image editing<\/h3>\n\n\n\n<p>A new feature allows you to make quick crops without leaving the editor. Just hit the&nbsp;<em>Crop<\/em>&nbsp;button in the toolbar. <\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/12\/edit-image.mp4\"><\/video><\/figure>\n\n\n\n<p>An expanded toolbar will appear. This will allow you to zoom an image. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"966\" height=\"357\" src=\"https:\/\/wordpress.org\/documentation\/files\/2024\/01\/292769877-cb010416-ecd1-4a43-8a03-85b33bdb297e.png\" alt=\"Image toolbar showcasing the zoom option\" class=\"wp-image-16359466\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2024\/01\/292769877-cb010416-ecd1-4a43-8a03-85b33bdb297e.png 966w, https:\/\/wordpress.org\/documentation\/files\/2024\/01\/292769877-cb010416-ecd1-4a43-8a03-85b33bdb297e-300x111.png 300w, https:\/\/wordpress.org\/documentation\/files\/2024\/01\/292769877-cb010416-ecd1-4a43-8a03-85b33bdb297e-768x284.png 768w\" sizes=\"auto, (max-width: 966px) 100vw, 966px\" \/><figcaption class=\"wp-element-caption\">Image toolbar showcasing the zoom option<\/figcaption><\/figure>\n\n\n\n<p>There are also options to set the aspect ratio, such as to crop the image into a square. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"870\" src=\"https:\/\/wordpress.org\/documentation\/files\/2024\/01\/292769878-35c519aa-d9e9-4600-a704-9e95151fa8d2.png\" alt=\"Image showing the cropping tools for an Image block.\" class=\"wp-image-16359468\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2024\/01\/292769878-35c519aa-d9e9-4600-a704-9e95151fa8d2.png 969w, https:\/\/wordpress.org\/documentation\/files\/2024\/01\/292769878-35c519aa-d9e9-4600-a704-9e95151fa8d2-300x269.png 300w, https:\/\/wordpress.org\/documentation\/files\/2024\/01\/292769878-35c519aa-d9e9-4600-a704-9e95151fa8d2-768x690.png 768w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/><figcaption class=\"wp-element-caption\">Image showing the cropping tools for an Image block.<\/figcaption><\/figure>\n\n\n\n<p>You can also rotate the image if it comes in sideways. <\/p>\n\n\n\n<p>After you make any changes, click Apply. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Adding text overlay<\/h3>\n\n\n\n<p>A new feature allows you to convert image block to cover block so that you can add overlay text on the image.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"970\" height=\"705\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/12\/8.png\" alt=\"Image showing the option to add text over the image\" class=\"wp-image-16359373\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2023\/12\/8.png 970w, https:\/\/wordpress.org\/documentation\/files\/2023\/12\/8-300x218.png 300w, https:\/\/wordpress.org\/documentation\/files\/2023\/12\/8-768x558.png 768w\" sizes=\"auto, (max-width: 970px) 100vw, 970px\" \/><figcaption class=\"wp-element-caption\">Image showing the option to add text over the image<\/figcaption><\/figure>\n\n\n\n<p>Upon clicking the&nbsp;<em>Add text over image<\/em>&nbsp;button the block transforms immediately to a cover block with its placeholder paragraph.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"957\" height=\"766\" src=\"https:\/\/wordpress.org\/documentation\/files\/2024\/01\/292768025-50ce9264-22a7-487e-b46a-e9e955b532ec.png\" alt=\"Add text over image placeholder \" class=\"wp-image-16359470\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2024\/01\/292768025-50ce9264-22a7-487e-b46a-e9e955b532ec.png 957w, https:\/\/wordpress.org\/documentation\/files\/2024\/01\/292768025-50ce9264-22a7-487e-b46a-e9e955b532ec-300x240.png 300w, https:\/\/wordpress.org\/documentation\/files\/2024\/01\/292768025-50ce9264-22a7-487e-b46a-e9e955b532ec-768x615.png 768w\" sizes=\"auto, (max-width: 957px) 100vw, 957px\" \/><figcaption class=\"wp-element-caption\">Add text over image placeholder<\/figcaption><\/figure>\n\n\n\n<p>Sometimes you use a tool like Google Docs to write or collaborate on posts. When you&#8217;re ready to put the content on your site, you may copy and paste them into the editor.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/12\/paste-from-gdocs.mp4\"><\/video><\/figure>\n\n\n\n<p>One problem is that those images are likely hosted somewhere else like Google and could easily become broken if a change is made. <\/p>\n\n\n\n<p>So, If you copy and paste an image from a resource like Google Docs, a button will appear on the toolbar to upload it to the media library. Click that, and it will stay in the post, but also upload to your media library.  <\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"more-settings\">More options<\/h3>\n\n\n\n<p>These controls give you the option to copy, duplicate, and edit your block as HTML.<\/p>\n\n\n\n<p class=\"has-text-align-left has-background\" style=\"background-color:#e5f5fa\"><a href=\"https:\/\/wordpress.org\/news\/2021\/05\/coloring-your-images-with-duotone-filters\/\"><\/a><a href=\"https:\/\/wordpress.org\/documentation\/article\/more-options\/\">Read about these and other settings.<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"block-settings\">Block settings<\/h2>\n\n\n\n<p>Every block has specific options in the editor sidebar in addition to the options found in the block toolbar. <em>If you do not see the sidebar, click the &#8216;cog&#8217; icon next to the Publish button.<\/em><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"421\" height=\"156\" src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/08\/168259296-36946466-d2e1-4cf3-83ba-6c19fd3cac0a.png\" alt=\"Block settings in the Image block\" class=\"wp-image-15879136\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2022\/08\/168259296-36946466-d2e1-4cf3-83ba-6c19fd3cac0a.png 421w, https:\/\/wordpress.org\/documentation\/files\/2022\/08\/168259296-36946466-d2e1-4cf3-83ba-6c19fd3cac0a-300x111.png 300w\" sizes=\"auto, (max-width: 421px) 100vw, 421px\" \/><figcaption class=\"wp-element-caption\">Block Settings<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"styles\">Styles<\/h3>\n\n\n\n<p>Depending on your theme, you may have several styles for your image. In Twenty Twenty-One, you can choose to make the image rounded, with borders or a frame. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"560\" height=\"220\" src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/12\/Screenshot-2022-12-13-at-10.52.27-AM.png\" alt=\"Styles in Image block\" class=\"wp-image-16286442\" style=\"width:280px;height:110px\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2022\/12\/Screenshot-2022-12-13-at-10.52.27-AM.png 560w, https:\/\/wordpress.org\/documentation\/files\/2022\/12\/Screenshot-2022-12-13-at-10.52.27-AM-300x118.png 300w\" sizes=\"auto, (max-width: 560px) 100vw, 560px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"image-settings\">Image settings<\/h3>\n\n\n\n<p>The image settings offer a text field to add an <strong>Alternative Text<\/strong> description, which is important for accessibility and SEO. <\/p>\n\n\n\n<p>You can choose the <strong>Image size<\/strong> between thumbnail, medium, large and full size. You can also change the <strong>Image dimensions<\/strong> &#8211; width and height dimensions of an image in 25% increments, or in exact pixel dimensions. <\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/12\/settings.mp4\"><\/video><\/figure>\n\n\n\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-1 wp-block-group-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"333\" height=\"1024\" src=\"https:\/\/wordpress.org\/documentation\/files\/2024\/01\/292768027-1cf72224-10c3-4fc1-8654-d52ebc6e2961-333x1024.png\" alt=\"Image block settings\" class=\"wp-image-16359472\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2024\/01\/292768027-1cf72224-10c3-4fc1-8654-d52ebc6e2961-333x1024.png 333w, https:\/\/wordpress.org\/documentation\/files\/2024\/01\/292768027-1cf72224-10c3-4fc1-8654-d52ebc6e2961-98x300.png 98w, https:\/\/wordpress.org\/documentation\/files\/2024\/01\/292768027-1cf72224-10c3-4fc1-8654-d52ebc6e2961.png 424w\" sizes=\"auto, (max-width: 333px) 100vw, 333px\" \/><figcaption class=\"wp-element-caption\">Image block settings<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"324\" height=\"1024\" src=\"https:\/\/wordpress.org\/documentation\/files\/2024\/01\/292768028-dda0dac2-c10f-49b3-a7ef-85c29d6bf361-324x1024.png\" alt=\"Image block style settings\" class=\"wp-image-16359475\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2024\/01\/292768028-dda0dac2-c10f-49b3-a7ef-85c29d6bf361-324x1024.png 324w, https:\/\/wordpress.org\/documentation\/files\/2024\/01\/292768028-dda0dac2-c10f-49b3-a7ef-85c29d6bf361-95x300.png 95w, https:\/\/wordpress.org\/documentation\/files\/2024\/01\/292768028-dda0dac2-c10f-49b3-a7ef-85c29d6bf361.png 424w\" sizes=\"auto, (max-width: 324px) 100vw, 324px\" \/><figcaption class=\"wp-element-caption\">Image block style settings<\/figcaption><\/figure>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Filter options<\/h3>\n\n\n\n<p>You can create a filter effect on images without actually changing the original image.<\/p>\n\n\n\n<p>The filter option allows you to add this filter color to your block content from the block toolbar.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p class=\"has-text-align-left has-background\" style=\"background-color:#e5f5fa\"><a href=\"https:\/\/wordpress.org\/documentation\/article\/filters-settings-overview\/\">Read more about the filter options<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Border<\/h3>\n\n\n\n<p>The <strong>Image <\/strong>block provides border settings options to add border color, width, and radius. If there are custom border settings, custom border will be visible on image placeholder.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/wordpress.org\/documentation\/files\/2024\/01\/display-border-placeholder.mp4\"><\/video><\/figure>\n\n\n\n<p>For details refer to this support article: <a href=\"https:\/\/wordpress.org\/documentation\/article\/border-settings-overview\/\">Border settings overview<\/a><\/p>\n\n\n\n<p class=\"has-medium-font-size\">Advanced<\/p>\n\n\n\n<p>The Title attribute field is designed to describe the <a rel=\"noreferrer noopener\" href=\"https:\/\/www.w3.org\/TR\/html52\/dom.html#the-title-attribute\" target=\"_blank\">role of the image on your page<\/a>. Many devices and browsers don&#8217;t display this text. <\/p>\n\n\n\n<p>HTML anchor allows you to do &#8220;<a href=\"https:\/\/wordpress.org\/documentation\/article\/page-jumps\/\">page jumping<\/a>&#8221; to that specific image. Page jumping, also sometimes referred to as anchor links, is where you click a link and instantly get moved somewhere further up or down a long page. <\/p>\n\n\n\n<p>To enable this, you put an HTML Anchor in your photo, and create a link that jumps to the anchor. <\/p>\n\n\n\n<p>The advanced tab also lets you add a CSS class to your block, allowing you to write custom CSS and style the block as you see fit.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/12\/advanced-settings.mp4\"><\/video><\/figure>\n\n\n\n<div style=\"height:13px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-group changelog has-very-dark-gray-color has-very-light-gray-background-color has-text-color has-background is-layout-flow wp-block-group-is-layout-flow\">\n<h2 class=\"wp-block-heading has-medium-font-size\" id=\"changelog\">Changelog <\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Update 2024-01-25\n<ul class=\"wp-block-list\">\n<li>Updates for 6.2 completed<\/li>\n\n\n\n<li>Allow dropping an image on an empty paragraph block to create an image block<\/li>\n\n\n\n<li>Updates for 6.3 completed<\/li>\n\n\n\n<li>Display custom borders on image placeholder<\/li>\n\n\n\n<li>Upload Openverse images when inserted<\/li>\n\n\n\n<li>Allow dragging-and-dropping images from the inserter to image blocks<\/li>\n\n\n\n<li>Updates for 6.4 completed<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Update 2024-01-16\n<ul class=\"wp-block-list\">\n<li>Updates for 6.1 completed<\/li>\n\n\n\n<li>Re-upload missing images<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Update 2023-12-25\n<ul class=\"wp-block-list\">\n<li>Update screenshots and videos for 6.4<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Update 2022-12-12\n<ul class=\"wp-block-list\">\n<li>Added Border settings<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Updates 2022-11-28\n<ul class=\"wp-block-list\">\n<li>Added missing image caption<\/li>\n\n\n\n<li>Replaced content on more options<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Updated 2022-03-15\n<ul class=\"wp-block-list\">\n<li>Added notes about converting cover block from toolbar.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Updated 2022-01-25\n<ul class=\"wp-block-list\">\n<li>Updated a few screenshots to align with expanded toolbar.<\/li>\n\n\n\n<li>Added notes about using duotone.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Updated 2021-01-04<ul><li>Updated all screenshots to WordPress 5.6<\/li><\/ul><ul><li>Added section on image title attribute (Gutenberg 6.9\/WP 5.4)<\/li><li>Added section about easy upload for external images (Gutenberg 8.5\/WP 5.5)<\/li><li>Added section about block editor image editing (Gutenberg 8.4\/WP 5.5)<\/li><li>Added details on HTML Anchor and Image Styles to Advanced<\/li><\/ul>\n<ul class=\"wp-block-list\">\n<li>Removed pencil (edit) icon and added more option menu<\/li>\n\n\n\n<li>Removed some out-of-date content<\/li>\n\n\n\n<li>Re-ordered to match the current block toolbar layout<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Updated 2020-06-18\n<ul class=\"wp-block-list\">\n<li>Added &#8216;Link back to blocks&#8217; to the top of the page<\/li>\n\n\n\n<li>Added the &#8216;Changelog&#8217;<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Created 2019-03-07<\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Go back to the list of Blocks The image block can be added to a page by clicking on the Add Block button. Alternatively, you can type \/image and press enter. Detailed instructions on adding blocks Block toolbar Each block has its own block-specific controls that allow you to manipulate the block right in the [&hellip;]<\/p>\n","protected":false},"featured_media":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","category":[80,84],"class_list":["post-11284838","helphub_article","type-helphub_article","status-publish","hentry","category-customization","category-media-blocks"],"revision_note":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/11284838","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles"}],"about":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/types\/helphub_article"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/comments?post=11284838"}],"version-history":[{"count":57,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/11284838\/revisions"}],"predecessor-version":[{"id":16360325,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/11284838\/revisions\/16360325"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/media?parent=11284838"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/category?post=11284838"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}