Image Block

Go back to the list of Blocks

Theimage 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 can be found here.

Block Toolbar

Each block has its own block-specific controls that allow you to manipulate the block right in the editor. 

• Change block type
• 对齐方式
• 更多选项

Adding an Image

The media options panel will load with three options, Upload,Media Library, and Insert from URL.

Upload and Media Library will let you add or choose media from your library and embed it in your page.

Simply add the image from the Upload Files tab, then select it in the Media Library tab. Customizing the image attachment details, 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.

Resizing Images

Once the image is added to the editor, you can resize and align the images to better fit the surrounding content.

In order to resize an image, click on the image to reveal the draggable resize handles. Then, click on the resize handles and drag the image to your desired size.

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.

Aligning Images

If you wish to align an image within a paragraph you will first need to insert the image just above the target paragraph block.

From there, click on the image and select left or right alignment, this will merge the image into the paragraph block.

Finally, resize the image to your desired width and height.

Wide and Full Width Images

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’s usual content width.

Captions

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.

链接设置

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.

Image Editing

A new feature allows you to make quick crops without leaving the editor. Just hit the Crop button in the toolbar.

An expanded toolbar will appear. This will allow you to zoom an image.

There are also options to set the aspect ratio, such as to crop the image into a square.

You can also rotate the image if it comes in sideways.

After you make any changes, click Apply.

External Image Upload

Sometimes you use a tool like Google Docs to write or collaborate on posts. When you’re ready to put the content on your site, you may copy and paste them into the editor.

One problem is that those images are likely hosted somewhere else like Google and could easily become broken if a change is made.

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.

More Settings

This option, represented by three dots, will allow you to make several additional options to the image block.

Hide More Settings

TheHide More Settings option hides (or shows) the Block Setting panel in the editor’s sidebar.

Copy

Copy can be used to copy a selected block and then you can paste it wherever you want in the editor.

Duplicate

Duplicate can be used to duplicate selected block.

Insert Before

Insert a new block before the selected block(s).

Insert After

Insert a new block after the selected block(s).

Move To

If you select Move To, you will get a blue line inside your content, you can then use the arrows to move that line up and down to where you want the selected content to be moved into, hitting return on your keyboard at that point moves the block to that position.

Edit as HTML

TheEdit as HTML option allows you to modify the HTML code of the embed block.

Add to Reusable blocks

Using the Add to Reusable blocks option lets you add the selected block to a list of reusable blocks, so you can use them on other posts or pages as well.

Group

Select the Group option if you want to create a group of blocks and treat them as a unit. You can for instance add a common background color or other blocks to the group.

Remove Block

With the Remove Block option, you can delete the selected block from your content.

区块设置

Every block has specific options in the editor sidebar in addition to the options found in the block toolbar. If you do not see the sidebar, click the ‘cog’ icon next to the Publish button.

Styles

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.

图片设置

The image settings offer a text field to add an Alternative Text description, which is important for accessibility and SEO.

You can also change the width and height dimensions of an image in 25% increments, or with exact pixel dimensions.

高级

The Title attribute field is designed to describe the role of the image on your page. Many devices and browsers don’t display this text.

HTML anchor allows you to do “page jumping” 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.

To enable this, you put an HTML Anchor in your photo, and create a link that jumps to the anchor.

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.