Skip to content

Formatting of Pictures

Hugo Chu edited this page Jan 30, 2025 · 1 revision

This guide covers the following topics:

  • How to edit images
  • How to format pictures on a page

How to Edit an Image

WordPress provides a built-in basic image editor that allows you to edit images directly inside WordPress. Follow these steps to edit an image:

  1. Access the Dashboard
  • Log in to the WordPress Dashboard of your website.
  1. Navigate to Media Library
  • In the left-hand menu, go to Media > Library.
    image
  • This will open a list of images uploaded to your site.
  1. Select an Image
  • Click on the image you want to edit.
  • This will open the Attachment Details screen.
    image
  • Click the Edit Image button to open the built-in WordPress image editor.
  1. Edit the Image In the image editor, you can perform basic edits:
    Crop – Select an area and click the crop button.
    Scale – Resize the image proportionally.
    Image Rotate – Rotate the image left or right.
    image
    After making your changes:
  • Click 'Save Edits' to apply the changes.
  • Click 'Cancel Editing' to discard all changes.

How to Format Pictures on a Page

Adding Blocks to a Page

To format images in a page, WordPress uses blocks. You can insert different types of blocks depending on your layout needs.
To add a block to the page:

  • Open the page in the Page Editor (Go to Pages > All Pages, hover over the page, and then click Edit).
    Screenshot 2025-01-29 160428
  • Click the + icon to open the block menu.
    image
  • Click "Browse all" to see all available blocks.
    image
  • You can either scroll through the list or use the search bar to find the desired block (e.g., Image, Gallery, Media & Text, Columns).
    image

There are different ways to format images in a WordPress page. Below are some common formatting methods:

Insert an Image Between Text

  • Click in the location where you want to insert an image.
  • Click the down arrow to expand the menu, then select "Inline Image".
    Screenshot 2025-01-30 180228
  • Choose an image from the Media Library or Upload files and click Select to confirm.
  • The image will be inserted at the chosen location.

Image Block

image
The Image block allows you to insert an image anywhere on your page. Once added, you can modify the image by:

  • Changing alignment (left, right, center, wide, full-width)
  • Adding a caption or alt text
    image

Gallery Block

image
The Gallery block is used to create an image gallery in a grid layout. After adding the block:

  • Select multiple images from the Media Library.
  • Click Create a new gallery.
    image
  • Drag and drop images to rearrange their order.
  • Add captions to images if needed.
  • Click Insert gallery to place the gallery on the page.
    image

Media & Text Block

image
The Media & Text block lets you place an image next to text. After adding the block:

  • Upload an image or select from the Media Library.
    image
  • Adjust text alignment and layout.
  • Add additional blocks inside the text area for a custom design.

Column Block (Advanced Layouts)

image
The Columns block lets you create flexible layouts with images and text side by side. After adding the block:

  • Choose a column structure (e.g., 50/50).
    image
  • Insert images, text, or other blocks inside each column.

By using different blocks like Image, Gallery, Media & Text, and Columns, you can create a visually appealing layout for images on your page.