Working with images in posts/pages

Option 1: Drag directly into the editor

While working in the WordPress Post/Page editor, drag in a file from your computer. When you see a blue line, the file is ready to be dropped into the page. It will display where the line indicated. If it's an image, the result will be an image block. If it's a video, WordPress will sense that and use a video block. 

Option 2: Click one of the + icons to add an image block

This action will present you with an upload button you can use.

Option 1: Recommended method using ProPhoto Galleries

In most cases, the easiest way to manage a group of images in a page or post is with a ProPhoto gallery, even if your goal is to have them display as full size images in single column. See Create and insert galleries for detailed instructions.

Option 2: WordPress Methods

If you have just a few images you can upload them one by one and insert them as single image blocks. That can get tedious quickly, though.

You can select a batch of images in a finder window on your computer and drag them into the post/page, WordPress will upload those images and display them in WordPress as a Gallery block. (This is different than a ProPhoto gallery block.) You can then choose how many columns you would like and whether or not to crop the images or maintain their aspect ratio. Also important is that you choose the file size. Most people choose to display multiple images in 1 column, at full size.

Be aware that when multiple images are inserted as a single gallery block, the gallery block itself has its own settings. But you can also click on individual images within in the gallery block, which will display you individual image block settings instead.

Just be aware of the limitations of the WordPress gallery block. If you prefer to display images in a slideshow, carousel or thumbnail style, or have better control over the gallery itself, you will want to create a ProPhoto gallery block instead as discussed in Option #1.

This process is the same as described above except you will use the Media Library tab to view files you've uploaded before. Whether using a ProPhoto Gallery block, an Image block or a regular Gallery block, you will be presented the same Media Library button.

Select the file(s) you want to insert. For image blocks you can only select one image; both gallery block types allow for selecting multiple images if you use the shift + click or cmd/cntrl + click. When you are done selecting images, click to insert them into your post or page.

Remember that you may insert anything you've already uploaded into WordPress - you do not need to upload the same images again if you have already uploaded them for another page, post, or ProPhoto gallery.

Reorder ProPhoto gallery images

To reorder images in a pre-existing ProPhoto gallery, go to "Galleries > All Galleries", edit the gallery and select one of the ordering options provided.

If you need move single or groups of images, simply select them and drag and drop them in place.

Reorder post/page images

Files are uploaded to WordPress in the same order they appear on your computer - typically this is based on the file name (alpha/numeric order). To reorder, click an image and use the tool bar's drag or arrow options.

Once the images are in the order you want, click to "Update" your post or page.

There are four options for aligning images/media in your posts & pages:

• left - when there is enough space, text and other media will wrap around the right side of the item
• center - the image will be centered in the page with nothing on either side
• right - when there is enough space, text and other media will wrap around the left side of the item
• none - the item behaves like a character in a sentence, appearing inline with other text or items

Generally, you should insert images and other media as center aligned unless you have a specific need to wrap text or other items around the sides. After you insert a block, whether that be image or gallery, choose the alignment in the block toolbar.

There are four options for the display size of images in your posts & pages:

• full size - images will be inserted at the original resolution* of the file, e.g. an image 2000x1333 in resolution will be placed in the page at that size
• large - images will be inserted at the "large" size (1024px by default)
• medium - images will be inserted at the "medium" size (300px by default)
• thumbnail - images will be inserted at the "thumbnail" size, and cropped square (150px by default)

The default size of downsized images are found in the "Settings Media" screen, and you can modify the sizing to suit special needs, seen here:

*If your original uploaded image was greater than 2560px in width or height, WordPress automatically creates a "scaled" version of the image (which is 2560px in width or height) and uses this in place of the original. This is because 2560px is an accepted standard and it prevents unnecessarily large images from loading. As such, we always recommend sizing images to 2560px or less before uploading.

Choose image size

You may select the size of image blocks after inserting them into your page. Once you click on an image, you will find the size options in the block settings in the sidebar. Typically you will find that inserting images at full size works best for a responsive website layout.

The vertical spacing between images inserted into posts or pages via the block editor is controlled in ProPhoto. To modify, you will want to view the layout applied to your post/page in ProPhoto and edit the WordPress content module. In the "Content Image Appearance" settings area, you can change both the margin above and below images.

These settings will apply to both images in image blocks or in gallery blocks.

There are four options for the linking of images in your posts & pages if you desire to do so:

• custom URL - paste in a URL that you want the image to link to
• image file - the image will link to the original uploaded file
• attachment page - the image will link to the WordPress attachment page which is a display page for the image alone
• expand on click - this will allow the image to display in a lightbox

Typically images won't be linked to anything, but if you want to link an image or graphic inside a page or post, these options can be useful. Remember that it's also possible to link images with the graphics module within your layouts.