Make the new blocks-based pages look better than the old WordPress site#41
Merged
Conversation
The move to the chobble-template blocks system was great for editing but left several pages looking worse than the old WordPress export. This pass brings them back up to (and past) the old design while staying within the design system. Home: - Replace the lone single-image, caption-less gallery with a real masonry gallery of six captioned marquee shots. - Break the long markdown wall into an intro, a features grid (no emoji), an info callout and a CTA, so sections alternate background. Capri (/capri-marquee-hire/): - Add masonry to both galleries so the varied photos pack tightly instead of leaving ragged rows; rewrite captions to consistent Title Case and fill the empty ones; add a closing CTA. Equipment (/equipment-marquee-hire/): - Make the page full width to fix the cramped, narrow column. - Shorten the top split-image and move the rest into alternating full-width sections. - Replace the low-resolution product gallery and the plain price tables with two image-cards catalogues (photo + name + price) cropped to a uniform 4/3 ratio, so the small source images look tidy. About / Packages: - Split the single long markdown blocks into alternating sections, turn intros into split-images, tidy galleries, drop emoji, add CTAs. Corporate / FAQs / Party / Special events / Wedding: - Uniform 4/3 gallery cropping and tidier captions; expand the FAQs single-image gallery to three; remove the duplicate CTA on Party. H1 fixes (one heading per page): - Locations had an <img> wrapped in <h1> (a WordPress export artdefact) and, on several, the real title demoted to <h2> or a bold line. Promote the title to a single text <h1>, unwrap the image, and drop the broken inline <style> block on Aldershot.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What & why
The switch to the chobble-template blocks system is great for editing, but a few pages ended up looking worse than the old WordPress export. To find the regressions I built the site at the old commit (
bdb0507, the last WordPress-HTML version, against its era-appropriate template) and atmain, then took full-page desktop + mobile screenshots of every converted page and compared them.Catalogue of what was worse on
main, and the fixmasonry: trueon both galleries (your suggestion) + rewritten consistent captions + closing CTADuplicate / malformed H1s (one heading per page)
The WordPress export had wrapped an
<img>inside an<h1>on several location pages, and in some cases demoted the real page title to<h2>or a bold line:<style>block on Aldershot).<h1>as their only heading — promoted the real title to a single text<h1>and unwrapped the image.Every real content page now renders exactly one
<h1>. The only remainingh1=2pages are the template's auto-generatedredirect_fromstubs (instant meta-refresh redirects, not real content —<h1></h1>+<h1>Redirecting…</h1>); fixing those would need a template change.Approach notes
gallery(masonry),features,image-cards,split-image,calloutandctablocks.aspect_ratiocropping is used on the narrower sidebar pages.Builds cleanly against the current template. Before/after screenshots shared separately.
Generated by Claude Code