Add a useful preparation image

Lesson 6 of 24

Add the supplied garden-visit checklist once, save useful alternative text and a visible caption, and check it in wide and narrow previews.

Before you start

Use the same disposable Cedar Lane practice site after the previous Home lesson. Home should be a draft with its introduction, services and About link. Keep that page and the original download garden-visit-checklist.png. You will upload this one course image; no real customer photos or private files are needed.

1. Download the checklist and add an Image block

Use the Download the garden-visit checklist (PNG) link in this lesson. Save garden-visit-checklist.png where you can find it. This is an original course resource, not a WordPress screenshot. In Pages → All Pages, open the same Home draft from the previous Home lesson. Click at the end of About our approach, press End, then Enter to make a new block below it. Type /image and choose Image.

2. Upload the file once

In the Image block, choose Upload. Select the downloaded garden-visit-checklist.png file and wait for the upload to finish. Click the image. In its block settings, check the filename. The checklist should show Describe the work, Check access and Share useful details. Do not add another Image block or upload the file a second time.

Uploaded garden-visit-checklist.png in the Home editor with its filename in block settings. — Check that you chose the supplied checklist.

3. Write useful alternative text

With the image selected, find Alternative Text in the Block settings. If the side panel is hidden, open Settings, then Block. Type the text below. Alternative text gives the image’s useful message when someone cannot see it. This checklist carries information, so leave Mark as decorative off. Do not use only the filename.

Alternative Text field filled with the exact garden-visit preparation message. — Explain the useful message, not the file name.

4. Add a caption readers can see

With the image selected, choose Add caption in the image toolbar. Type the caption below the image. The caption is visible on the page. Alternative text and a caption have different jobs; adding one does not fill the other.

Image block with the visible caption A little preparation before a garden visit. — A caption appears below the image for every reader.

5. Save and read the details back

Choose Save draft and wait for Saved. Reload the editor and click the same image. Read the Alternative Text field and the caption again. Check that both kept the intended words. Keep Home as a draft.

Saved Home image after reload with its complete alternative text and caption retained. — Reload to check the saved words, not just the typing.

6. Read the page preview

Open View, then Preview in new tab. Scroll to the checklist and read its three points and caption. Check that it is useful beside the Home page text. This is a signed-in draft preview, not a published Home page.

7. Check a narrow view

Make the preview browser window narrow, or open the draft preview on a phone where you are signed in. Scroll to the checklist. Check that the whole image fits within the page and the caption remains readable without moving sideways. The screenshot uses a 390-pixel-wide browser view. Keep the browser’s normal zoom when making this width check.

The whole Home draft preview at390pixels with the complete preparation image and readable caption. — The checklist stays within the narrow page and its caption can be read without sideways scrolling.

8. Reuse the existing library file

Return to the Home editor and select the image. Choose Replace → Open Media Library, then the Media Library tab. Select the existing garden-visit-checklist image if it is not already selected. In Attachment Details, Alt Text and Image Caption may be empty even though this page’s block has them. Fill them with the same alternative text and caption from steps 3 and 4 so the file’s saved details can be reused. Choose Select. Use the existing item; do not choose Upload files or Delete permanently.

Existing checklist selected in Media Library with its stored Alt Text and Image Caption filled. — Reuse the same file and keep its useful description.

9. Keep one saved image

Choose Save draft again, wait for Saved, then reload. Select the checklist and check the alternative text and visible caption. There should be one checklist image in this Home draft. Reusing a library file did not need a second upload. Home is still a draft; we have not changed the site’s front page.

Same image block after library reuse, save and reload, with alternative text and caption preserved. — One file, one image block, and the saved words still there.

Practise

Reopen the same Home draft and find the checklist once. Read its alternative text and caption, then check the narrow preview. Open Replace → Open Media Library and find the existing file without uploading another copy.

Check your result

Home remains a draft with one checklist image, the intended alternative text and visible caption. The same attachment is available in Media Library. The wide and narrow previews show the complete image within the page width, and the original Home text and About link are still there.

If something goes wrong

Wrong file? Use Replace → Open Media Library and select the intended existing checklist; do not delete other files. Text disappeared after replacing an image? Read the block’s Alternative Text and caption, add the intended words again and save. Library details and the words on a page can differ. Image is too wide? Undo a size or alignment change and check the narrow preview again. Duplicate block? Select only the extra checklist block and remove it; this lesson does not require deleting the library file.

Optional notes

Words used in this lesson

Media Library: The place WordPress keeps files you have uploaded so you can use them again.
Alternative text: Words that give an image’s useful message when the image cannot be seen.
Caption: Text shown with an image on the page.

Choose another lesson