WebBlocks CMSDocsGuidesBlogsBrandPlugins

Course detail pages without a separate CMS page for every course

A studio offers Photography, Ceramics and Woodworking courses. Its website lists each course with a short description. A visitor chooses Photography and wants to see its programme, duration and image at a dedicated address. Do you have to create and maintain a separate CMS page for every course?

With Automatic Pages in WebBlocks CMS, a compatible course source can supply those details to one shared design. Photography opens with photography information; Ceramics opens with ceramics information. Editors maintain the design once, while the course application maintains the records. Here is the complete connection using fictional Northstar Studio courses.

Start with the list and the detail addresses

The course list lives at /courses. Its three cards link to /courses/photography, /courses/ceramics and /courses/woodworking. The list and the course detail are different views: a card helps visitors choose; the detail address shows the chosen course.

The course list shows Photography, Ceramics and Woodworking with separate detail links.
The course list shows Photography, Ceramics and Woodworking with separate detail links.

The list uses its own collection configuration. Adding a link to a card does not create its destination. The earlier list and application data example explains repeated cards; the following steps connect the detail design.

Prepare one course detail design

Create a page called Course detail design. Place a Header, a Rich Text block and an Image in it. Their layout is shared, but their values will come from the course being viewed. In this example, summary contains both the course duration and a short programme.

Photography shows six weeks of framing, light and a small photo project. Ceramics shows four weeks of hand building, clay preparation and glazing. The two addresses use the same arrangement with different text and images.

Photography opens at its own detail address with its six week programme.
Photography opens at its own detail address with its six week programme.
Ceramics uses the same detail design with its own title and four week programme.
Ceramics uses the same detail design with its own title and four week programme.

Connect the heading to the course name

A developer or plugin must first expose a compatible publication source for courses and a single course source. In this fixture they are labelled Published courses and Published course. A normal collection that only supplies cards is insufficient for Automatic Pages.

Open the Header block in Course detail design and choose Dynamic Content. In the title binding, select Published course, Photography as the example record, and title as the source field. The screenshot shows the actual source, record and field selectors. Photography supplies a useful editing example; an automatic detail request supplies the course selected by its URL without rewriting that saved example.

Header settings connect its title to Published course, Photography and the title field.
Header settings connect its title to Published course, Photography and the title field.

Connect the programme and duration

Open the Rich Text block and its Dynamic Content tab. Connect its content to the same Published course source and the summary field. That is where the fictional course application supplies programme and duration. You are choosing which source value fills this block; you are not copying the programme into a separate CMS page for each course.

Rich Text settings connect content to the course summary containing programme and duration.
Rich Text settings connect content to the course summary containing programme and duration.

Connect the image and its descriptions

In the Image block’s Dynamic Content tab, connect the image source to image_url, the alt text to image_alt and the caption to image_caption. These are separate connections. The image and its words need to describe the course that is open, including in each supported language.

Image settings show separate bindings for the picture, alt text and caption.
Image settings show separate bindings for the picture, alt text and caption.

Connect the source to the design and address range

Open Dynamic Content → Automatic Pages and create a draft rule for the site. Select Published courses as Content source and Course detail design as Detail design. Enter /courses as Base path. The optional Catalogue page field points to Studio courses; choosing it does not configure or change the list of cards.

A draft rule connects Published courses, Course detail design, Studio courses and the courses base path.
A draft rule connects Published courses, Course detail design, Studio courses and the courses base path.

The rule's Fields supplied by the selected record section brings the block connections together. Check that the heading receives title, the text receives summary, and the Image receives its image and description fields. This is the bridge between the data and the page design.

The rule lists which design block fields receive values from the selected course.
The rule lists which design block fields receive values from the selected course.

Review real records before activation

Save the draft, choose Inspect records and select Photography. Review its proposed addresses and actual content in each enabled language. Expand Inspect source fields to check the values behind the heading, programme and image, then open Render preview. For example, Turkish Photography opens at /tr/courses/photography with Turkish course text; the slug stays the same.

Photography record review shows language readiness and proposed detail addresses.
Photography record review shows language readiness and proposed detail addresses.
Expanded source fields show the actual Photography title, programme and image values.
Expanded source fields show the actual Photography title, programme and image values.

Use Review transition to check address conflicts, translations and any existing detail pages. Saving or previewing a draft does not publish its routes. Activate automatic routes is a separate action for an authorized operator after that review. The images here demonstrate the flow only in a disposable showcase.

Add another course without another CMS page copy

Once the rule is active, a new valid Watercolour record made public by the course source can open at /courses/watercolour through the same design. No new CMS detail-page copy or separate rule activation is needed for that record. Check the list as well, because its collection configuration remains separate.

A course requiring a substantially different editorial layout may deserve its own page. Existing matching native pages can retain their individual designs. Withdrawing a course makes its automatic detail address return 404; an unavailable source or invalid publication content can return 503. Keep record keys and slugs stable, because a changed slug does not automatically redirect the old address.

See Automatic Pages for the full setup and review process, and Dynamic Content for field bindings. This article is by the developer of WebBlocks CMS. Screenshots use fictional Northstar Studio content in the published CMS 1.105.5 showcase.

Was this article useful?

Rate it or share a suggestion below.

No ratings yet.

Comments and suggestions

Comments are reviewed before they appear.

Comments

0

No approved comments yet.

Leave a comment

Comments are reviewed before they appear.