Brief

Summary

Hasmukh asked for the live page at medilearn.africa/ethical-consideration-for-ai-in-healthcare-and-research-in-south-africa/ to be replicated as a draft on medistage.medilearn.africa. The brief he pasted assumed both source and destination were WordPress, but only the live medilearn.africa is WordPress. medistage is PageMotor. Confirmed with him to read from medilearn.africa using the WordPress REST API and write directly to medistage as a PageMotor draft, translating WordPress fields to their PageMotor equivalents. Phase 1 Discovery AI work was put on pause for this task.

The draft is in. The public URL correctly returns a 404 to anyone not logged in as admin (which is how PageMotor handles draft pages). The visual render in a real browser was not verified by me, because I do not have admin credentials and the Chrome browser tool was offline. Hasmukh to log in and eyeball it.

Decisions

Decisions

• Read the source page from the live WordPress site via the public REST API, not via Novamira (Novamira was not loaded as a tool in this session anyway).
• Write directly to medistage's content table because Novamira is WordPress-only and cannot reach a PageMotor site.
• Translate WordPress-style fields to PageMotor equivalents:
• WordPress page → PageMotor content row, type=page, status=draft
• Yoast meta title and description → page title only (EP_SEO is sitewide, not per-page, so per-page meta is a known gap)
• Featured image → no featured image was set on the source, only inline images, so nothing to translate
• WordPress categories and tags → none on the source (pages do not use them by default), so nothing to translate
• Yoast og:image (the UCT logo) → falls back to the medistage-wide og:image setting, not a per-page override
• Inline media → downloaded into medistage's uploads folder, URLs rewritten to root-relative paths so they work on whichever domain the page is served from
• Keep the alt text empty on the two images that had empty alt in the source (faithful replication, not improvement).
• Do not change the headings, the Médecins Sans Frontières spelling, the special characters, or any of the body copy.
• Strip WordPress-specific clutter (loading=lazy, decoding=async, srcset for non-existent thumbnails, wp-image-XX classes, size-full classes) so the saved HTML is clean.
• Rewrite the bottom Medilearn-logo link from medilearn.africa to medistage.medilearn.africa so the draft is self-contained.

Changes

Changes made

On medistage (live PageMotor instance, /var/www/medistage):

• /var/www/medistage/user-content/uploads/uct-e1758690052272.png (added, 25 KB, UCT crest logo, verified visually)
• /var/www/medistage/user-content/uploads/Jantina.jpg (added, 159 KB, Prof Jantina de Vries headshot, verified visually)
• /var/www/medistage/user-content/uploads/medilearn-logo2.svg (added, 3 KB, Medilearn brand logo)
• All three set to medistage:medistage ownership and 644 permissions
• One row inserted into pm_content (id=7, slug ethical-consideration-for-ai-in-healthcare-and-research-in-south-africa, status draft, type page, author 1, content 2717 bytes)

No other tables were touched. No options changed. No theme files changed.

Follow-ups

Follow-ups

• Hasmukh to log in to medistage.medilearn.africa/admin/, open the Drafts tab under Content, click through to the new ethics page draft, and confirm it renders as he expects (headings centred, UCT logo at top, Jantina photo, three bio paragraphs, three reference links, Medilearn logo footer).
• If the draft renders cleanly: Hasmukh to decide whether to publish (change status from draft to live in admin) or leave as draft pending edits.
• If the og:image or per-page SEO description matters for this page when shared on social media, that is a known gap and would need either an EP_SEO upgrade to support per-page meta or a small custom plugin.
• Phase 1 Discovery AI work remains on pause and will resume when Hasmukh comes back to it. The five open questions in PHASE-1-RESUME.md Section 5 are still unanswered.

Notes

What did NOT import cleanly

• Per-page SEO meta title and description. WordPress had Yoast values specific to this page. PageMotor's EP_SEO plugin only supports sitewide meta. The page title carries across, but a custom og:title and og:description for this page do not. The browser tab title will read "Ethical Consideration for AI in Healthcare and Research in South Africa | Medilearn" (PageMotor builds it from the page title plus the site name).
• Featured image as a separate field. WordPress has a "Featured Image" field that pages can set independently of the body content. PageMotor does not. The UCT logo that sat in Yoast's og:image on the source is not separately stored as a featured image on medistage — it is just the first inline image in the body.
• WordPress sub-image variants. The source HTML had a srcset attribute pointing at smaller variants of Jantina's photo (300x300 and 80x80). PageMotor does not auto-generate those. The full 512x512 image is the only size on medistage. This will be fine on screens but will load a slightly larger file on mobile than the WordPress original would have.
• Author "admin". The source author was WordPress user 1 (admin). On medistage, the row's author is also user 1. This is the closest match available; if Hasmukh wants the page to show a real author byline, that is a separate piece of work.

Follow-on work

Same day, second task — Medistage homepage hero fix

After the ethics draft, Hasmukh sent two screenshots: the design he wants for the top of the homepage, and what was actually rendering on medistage. The differences were the broken hero layout, unstyled buttons, missing badge, broken nav icons and stale nav labels.

Root causes found

• .hero__content { display: contents } in the theme CSS was making the eyebrow, headline, subheading and buttons scatter across both grid columns of .hero__inner instead of staying in the left column. The image placeholder ended up in the right column on its own row, far below.
• The .btn family of rules had never been added to the theme. So Register for Free Session and Explore Courses rendered as plain green text with no padding, no background and no border.
• PageMotor's form CSS sets input[type=checkbox] { display: inline-block } and input[type=checkbox] + label { display: inline }. Both have higher specificity than the theme's .nav__toggle and .nav__hamburger rules, so those two were ignored and the hidden checkbox plus its hamburger label showed as two boxes next to the medilearn logo on desktop.
• The Header_Nav HTML Box had stale labels (Programmes, How it works, About, Partners, Contact) and the wrong anchors.

Changes made

• Backed up /var/www/medistage/user-content/themes/medilearn/css.css to css.css.bak.20260508-pre-design-fix.
• Appended a small block of CSS to the Medilearn_css option (marker design-fix-2026-05-08) covering: .hero__content { display: block }, .nav__toggle { display: none !important }, .nav__hamburger { display: none !important } plus a max-width 768 override so the hamburger comes back on mobile, and the full .btn, .btn--primary, .btn--secondary, .btn--outline-dark, .btn--gold rule set.
• Updated the Header_Nav HTML Box (inside the Medilearn_instances JSON) with the design's labels and anchors: About → #about, What We Offer → #offerings, How It Works → #how-it-works, Partner With Us → #partners, Contact → #contact, Register for Next Session → #register.
• Recompiled the theme CSS via the HTTPS endpoint at medistage.medilearn.africa/recompile-css.php. New file size 50,995 bytes (was 48,901).

Verification

Browser checks at 1400px desktop width on medistage:

• .btn--primary computed padding 14px 28px and background rgb(39, 174, 96) ✓
• .hero__eyebrow computed display inline-flex (was flex) ✓
• .hero__content computed display block (was contents) ✓
• .nav__toggle computed display none (was block) ✓
• .nav__hamburger computed display none (was block) ✓

Visual screenshot at desktop width matches the design Hasmukh sent: dark navy background, eyebrow pill, hero headline with Everywhere in opal blue, subheading, green and outlined buttons, image placeholder on the right with the green 800+ doctors reached badge overlapping bottom-left, clean nav with the new labels.

Follow-ups for the home page

• Real photo for the hero image placeholder (currently a graduation-cap icon plus the caption Photo or screenshot from a live Medilearn session).
• Real session title, date and time for the Next Session banner (currently [Next Session Topic], [Date], [Time] SAST).
• Decide whether to build out the missing bottom sections (testimonials, partners, newsletter, contact, footer) — the CSS already covers them.

Follow-up — white margins around the hero (same day)

After the first round of fixes Hasmukh spotted a white band between the nav and the hero, plus white left and right edges. Cause: the wrapper around the home sections (.page-main-home) had a default white background and 120px 27px 71px padding inherited from the generic content-page styling. On home, that padding pushed the hero in by 27px on each side and down by 120px from the top, leaving white space all around. Fix: targeted .page-main-home only and set padding: 0 !important; background: transparent !important;. The hero already carries its own dark background and 140px top padding, so it now sits flush to the viewport edges and meets the fixed nav with no gap. Verified visually at 1400px width.

Same day, third update — real hero photo

Hasmukh sent a HEIC source image from the network media server (MLUCT51 FCP Zoom Sessions, IMG_6494.HEIC, 5712 x 4284). Converted with sips to a 1600px-wide JPEG (288 KB), opened the JPEG locally to confirm it shows the bald speaker with glasses in the studio, camera tripod left, Medilearn logo on the shelf — fits the live session caption.

Uploaded as /var/www/medistage/user-content/uploads/medilearn-hero.jpg, confirmed it serves over HTTPS. Replaced the placeholder div in the home content (id 1) with <img class="hero__image-photo" src="/user-content/uploads/medilearn-hero.jpg" alt="A Medilearn FCP live session in the studio" width="1600" height="1200">. Added a small CSS block (marker hero-image-photo-2026-05-08) giving the img the same rounded-card look as the placeholder it replaced (4:3 aspect, rounded corners, subtle white border, object-fit cover). Recompiled.

Verified in the browser at 1400px desktop: the photo fills the right column with the rounded-corner card look, the green 800+ doctors reached badge still overlaps the bottom-left corner cleanly, the hero text on the left is unchanged.

Same day, fourth update — hero photo swap

Hasmukh said the first photo was a mistake and asked for IMG_6487.HEIC instead. Converted (4032 x 3024 → 1600 x 1200 JPEG, 480 KB), opened to confirm: presenter in profile working at the studio desk, main monitor showing the Microanatomy of alveolar epithelium slide, side monitor with the Zoom grid of attending doctors, water bottle and keyboard on the desk. A more representative live session shot.

Replaced /var/www/medistage/user-content/uploads/medilearn-hero.jpg in place. Bumped the img src in the home content to medilearn-hero.jpg?v=20260508-2 so the browser refetches rather than serving the cached previous photo. Verified visually at 1400px desktop: the new photo fills the right-hand card, the 800+ doctors reached badge still sits in the corner, the rest of the hero is unchanged.

Same day, fifth update — hero photo swap (third take)

Hasmukh asked to swap to IMG_6526.HEIC. Converted (5712 x 4284 → 1600 x 1200 JPEG, 267 KB) and verified: wide cinematic studio shot — presenter at the desk, round softbox light catching the eye, boom mic overhead, ON AIR sign glowing on the bookshelf in the background, the cue/teleprompter screen on the left. A more atmospheric live session shot than either of the previous ones. Replaced the file in place, bumped img src to ?v=20260508-3. Verified at 1400px desktop in the browser.

10 May 2026 — Hero re-encoded as WebP, From recent sessions gallery added

Hasmukh approved a six-photo gallery on the home page and asked to switch all photos from JPEG to WebP for smaller file sizes. Did the following:

• Installed cwebp on the s2l VPS (the libwebp tool wasn't there yet).
• Picked six gallery photos by sampling ten across the MLUCT51 FCP Live Sessions folder and opening each: IMG_6460, 6475, 6535, 6550, 6610, 6625. Hasmukh approved.
• Converted all seven HEICs (six gallery + the existing IMG_6487 hero) to WebP via the two-step path: HEIC → high-quality JPEG locally with sips -s formatOptions 95, then JPEG → WebP on the VPS with cwebp -q 80.
• Uploaded all seven .webp files to /var/www/medistage/user-content/uploads/. Sizes: hero 171 KB (was 491 KB JPEG, 65% smaller), gallery photos 54-95 KB each.
• Updated home content (id 1) on medistage:
• Hero <img> src swapped from medilearn-hero.jpg?v=... to medilearn-hero.webp
• Inserted a new <section class="recent-sessions"> with eyebrow From recent sessions, heading A few moments from our live broadcasts, divider, subheading, and a 3-column grid of six <img> tags pointing at the new gallery WebPs. Inserted between the How It Works section and the Founder section.
• Appended a small CSS block to Medilearn_css (marker recent-sessions-gallery-2026-05-10): off-white background, three-column grid that drops to two columns at 900px and one column at 600px, photos with 4:3 aspect, rounded corners, subtle hover lift.
• Recompiled the theme CSS via the HTTPS endpoint.

Verified via curl that the rendered home HTML contains all six gallery image references and the recent-sessions section, that the served CSS contains 8 occurrences of recent-sessions (matching the rule count), and that all seven WebPs serve with Content-Type: image/webp. Visual browser confirmation was blocked because Chrome was offline at the time.