PlainPerksPublish a transparent course-example gallery
Lesson 18 of 24
Build a gallery from original course illustrations and show its real preview, visitor and lightbox results.
Before you start
Continue on the same disposable Cedar Lane Garden Care practice site. Keep real names, customer details and passwords out of this course example. Save a current local restore point before changing shared templates or settings.
- ASSET-WP37-01A.png— Original course diagram; not customer work or real service coverage.
- ASSET-WP37-01B.png— Original course diagram; not customer work or real service coverage.
- ASSET-WP37-01C.png— Original course diagram; not customer work or real service coverage.
1. Prepare and upload the original illustrations
Download the three course illustrations below. They are diagrams created for this lesson, not customer photographs. Record their source and filenames in a simple media note for this lesson: asset name, source (PlainPerks course illustration), filename and where you use it. You do not need an earlier media-management lesson to continue. Open Media → Add Media File, select the three files and upload once. In Media Library check the titles Work-area overview, Access check and Visit notes. Add useful alternative text describing the relevant diagram; keep the visible course disclaimer in each caption.
2. Explain the gallery before showing the images
Create a draft Page titled Course example gallery. Start with: These are original course illustrations, not real Cedar Lane customers or completed jobs. They show how a service website can explain preparation and record agreed work honestly. Save draft.
3. Build the Gallery block and supporting explanations
Insert a Gallery block and choose the three existing images from Media Library in the order Work-area overview, Access check, Visit notes. Use three columns at desktop, check each caption, and enable Expand on click for the image lightbox. Below the gallery add an H2 and short useful explanation for each image: agreed work area, access check and visit notes. Do not label these examples as testimonials or completed customer jobs. Save draft.
4. Inspect the complete preview before publishing locally
Open the editor’s preview in a new tab. Read the disclosure, all images, captions and explanations. Return and choose Publish, then confirm. Open the normal Page address signed out; the full Page should match the checked preview.
5. Check the phone layout and expanded image
At 390px read the whole gallery and captions. On the visitor Page activate an image’s Expand control. The larger image and Close control should appear in the real lightbox. Close it, including an Escape-key check, and confirm you return to the gallery.
Practise
Upload the three original diagrams once, record provenance, publish the local gallery and test its preview, phone layout and lightbox.
Check your result
The gallery clearly identifies all images as course illustrations, retains meaningful captions and alt text, and its real lightbox opens and closes correctly.
If something goes wrong
An image looks cropped incorrectly? Check the Gallery crop setting and the individual Image block. A caption disappeared? Add it to that gallery image instance. No lightbox appears? Confirm Expand on click on the image and test the saved visitor Page, not only the editor.
Optional notes
Words used in this lesson
- Gallery
- A group of Image blocks presented together.
- Lightbox
- An expanded image view with a control to return to the Page.