How to add images and image galleries in WordPress

STEP 1

Create a new post or page

Firstly, you’ll need to log in to the WordPress admin dashboard and create a new post or page. If you are unsure how to do this, see the following guides.

• How to add a new post in WordPress
• How to add a new page in WordPress

STEP 2
Add an image block

To add an image into your content, simply click on the + icon, in the top left hand corner of the editor. Clicking this button will open the block browser.

STEP 3
Choose ‘Image’

Scroll down the block browser and click on the heading ‘Common Blocks’, then choose ‘Image’.

STEP 4
Add your image

There are three different ways you can add your image.

1. Upload an image from your computer
2. Choose an image from your media library
3. Insert from URL

Clicking ‘Upload’ will open a file browser, then you can use the file browser to locate the image stored on your computer.

Choosing ‘Media Library’ will open up your WordPress media library, which is way of browsing media files you have previously uploaded to your site.

If you want to use an image that is already online click ‘Insert from URL’. Then simply enter the full URL into the text field provided.

STEP 5
Resizing your image

After adding your image to your page or post, there are various options to change how the image is displayed within your content.

Clicking on your image will give you 2 blue circular ‘handles’, which you can click and drag to resize your image.

STEP 6
Aligning your image

Clicking on your image will also make the image toolbar appear above your image. The toolbar lets you choose how your image sits within your content.

Choosing ‘Align left’ or ‘Align right’ will position your image to either the left or right of the page. It will mean that any text you write will ‘wrap’ around the image.

Choosing ‘Wide width’ will remove any image resizing adjustments you have made, and force the image to display the full width of your content.

Choosing ‘Full width’ will also remove any image resizing adjustment you have made, and force the image to display the whole width of your site.

STEP 7
Adding a caption to your image

If you wish to add a caption to your image, simply click on the text that reads ‘Write caption’ and start typing.

STEP 8
Image settings

Additionally, when you click on your image, a range of settings appear in the right-hand menu.

These options include entering your images alternative text (hidden text used to describe your image for screen readers), as well as more image size options.

You can also add a link to your image, either choosing for the image to link through to a full size version of itself, or a custom URL of your choosing.

STEP 1
Add your cover image

Cover images are a new addition to WordPress, and are a great way to add large images, or call to actions, to your posts or pages. Cover images are an effective way to break up sections of your content.

To add an image into your content, simply click on the + icon, in the top left hand corner of the editor. Clicking this button will open the block browser.

STEP 2
Choose ‘Cover’

Scroll down the block browser and click on the heading ‘Common Blocks’, then choose ‘Cover’.

STEP 3
Add your cover image

When picking an image to use as a cover image, it’s important to use an image that isn’t too small. Smaller images will not scale well, and are likely to look pixalated.

There are two different ways you can add your cover image.

1. Upload an image from your computer
2. Choose an image from your media library

Clicking ‘Upload’ will open a file browser, then you can use the file browser to locate the image storaged on your computer.

Choosing ‘Media Library’ will open up your WordPress media library, which is way of browsing every image you’ve upload to your site.

STEP 4
Aligning your cover image

Clicking on your cover image will make the image toolbar appear above your cover image. The toolbar lets you choose how your cover image sits within your content.

Choosing ‘Align left’ or ‘Align right’ will position your cover image to either the left or right of the page. It will mean that any text you write will ‘wrap’ around the image.

Choosing ‘Wide width’ will force the image to display the full width of your content.

Choosing ‘Full width’ will force the image to display the whole width of your site.

STEP 5
Aligning the text within the cover image

Should you wish to, you cover image can contain text overlaying your image. Using the image toolbar, you can choose to align your text to the left, right or center.

STEP 6
Cover image settings

Additionally when you click on your cover image, a range of settings appear in the right-hand menu.

These options include toggling ‘Fixed Background’, which when turned on, gives your cover image a parallax style effect.

You can also adjust the color of the overlay on your cover image, which acts as a tint so that your cover image text is readable. You can also adjust ‘Background Opacity’, which controls the transparency of your overlay.

STEP 7
Add your cover image text

Should you wish to add text to your cover image, just click on image and click on th text that reads ‘Write title’, and start typing.

STEP 1
Create a cover image

To add an image gallery to your content, simply click on the + icon, in the top left hand corner of the editor. Clicking this button will open the block browser.

STEP 2
Choose ‘Gallery’

Scroll down the block browser and click on the heading ‘Common Blocks’, then choose ‘Gallery’.

STEP 3
Add the images for your gallery

There are two different ways you can add images to your gallery.

1. Upload an image from your computer
2. Choose an image from your media library

Clicking ‘Upload’ will open a file browser, then you can use the file browser to locate the images storaged on your computer.

Choosing ‘Media Library’ will open up your WordPress media library, which is way of browsing every image you’ve upload to your site.

STEP 4
Aligning your gallery

Clicking on your gallery will make the gallery toolbar appear above your images. The toolbar lets you choose how your gallery sits within your content.

Choosing ‘Align left’ or ‘Align right’ will position your gallery to either the left or right of the page. It will mean that any text you write will ‘wrap’ around the image.

Choosing ‘Wide width’ will make the gallery display the full width of your content.

Choosing ‘Full width’ will make the gallery display the whole width of your site.

STEP 5
Editing your images gallery

If you wish to edit your gallery to add or remove images, click on the pencil icon, located on the gallery toolbar.

STEP 6
Uploading more images gallery

If you wish to upload more images to your gallery, simply scroll down and find the ‘Upload your image’, which will be underneath your images. Click this link to open a file browser, that you can use to locate the images stored on your computer.

STEP 7
Gallery settings

Additionally when you click on your gallery image, a range of settings appear in the right-hand menu.

These options include adjusting the number of columns uses to display your images. Adjusting this means your gallery images will automatically resize to fit whichever column layout you prefer.

By default, your gallery images are cropped to thumbnails, so so that they are all the same size. You can displayed this setting by clicking on the ‘Crop images’ toggle button.

Finally, you can add a link to your gallery images, so they link through to a full size version of the image.

STEP 8
Adding captions to your images

If you wish to add a caption to your gallery images, firstly click on the image you want to edit. Then simply click on the text that reads ‘Write caption’ and start typing.