m038/intotheeast-com-content
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix story scrolly text rendering; story/trip blueprint media upload

Browse Source 
Scrolly-section text never rendered: the inline Scrollama block ran before
the main.js bundle published window.scrollama, so it always hit its guard
and the panel text stayed display:none, leaving a blank column beside the
pinned image. Defer to DOMContentLoaded, and build the step panels before
the scrollama check so a missing bundle costs the animation, not the text.

Also fixes an invalid calc(-(...)) that dropped the mobile scrolly offset,
and drops the duplicate inline back-to-top in favour of main.js's version
(which pushes a history entry).

Blueprint changes carried over from an earlier session: story.yaml and
trip.yaml now extend the default page form so both can upload media.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
m038
2026-07-29 23:12:45 +02:00
co-authored by Claude Opus 5
parent 0ebb770bc7
commit e81c73a9ba
4 changed files with 104 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
themes/intotheeast/blueprints/story.yaml
+64 -12
View File
@@ -1,5 +1,12 @@
title: 'Story'
# Inherits Grav's default page form — this is what supplies the page-media
# uploader, plus the standard Options and Advanced tabs. Without it the form is
# standalone and has no way to upload images (see entry.yaml, same pattern).
'@extends':
type: default
context: blueprints://pages
form:
fields:
tabs:
@@ -8,6 +15,7 @@ form:
fields:
content:
ordering@: 0
type: tab
title: Content
fields:
@@ -34,7 +42,7 @@ form:
type: text
label: Hero Image
placeholder: 'hero.jpg'
help: 'Filename of the hero image (upload via Media tab)'
help: 'Filename of an image uploaded in the Images field below'
header.hero_alt:
type: text
@@ -44,10 +52,53 @@ form:
content:
type: markdown
label: Content
help: 'Prose renders as a normal reading column. For layout blocks (scrolly sections, galleries, pull quotes) use the shortcodes listed on the Blocks tab.'
validate:
required: true
header.media_order:
type: pagemedia
label: Images
help: 'Upload every image the story needs here first — shortcodes refer to them by bare filename (photo-1.jpg), never by path.'
blocks:
ordering@: 1
type: tab
title: Blocks
fields:
blocks_intro:
type: spacer
text: "<p>Paste these into the <strong>Content</strong> field. Image parameters take a <strong>bare filename</strong> of an image uploaded in the <strong>Images</strong> field on the Content tab. The hero image is not a block \u2014 it has its own field on the Content tab.</p>"
blocks_scrolly:
type: spacer
text: "<p style=\"margin:1.4em 0 0.4em\"><strong>Scrolly section \u2014 text panels scroll over a pinned image</strong></p><pre style=\"white-space:pre-wrap;word-break:break-word;padding:0.6em 0.8em;border-radius:6px;background:rgba(127,127,127,0.12)\">[scrolly-section image=\"hero.jpg\" alt=\"What the image shows\" caption=\"Optional caption\"]\nFirst panel.\n\n---\n\nSecond panel. A --- starts a new panel.\n[/scrolly-section]</pre>"
blocks_pullquote:
type: spacer
text: "<p style=\"margin:1.4em 0 0.4em\"><strong>Pull quote \u2014 large extracted quote, image optional</strong></p><pre style=\"white-space:pre-wrap;word-break:break-word;padding:0.6em 0.8em;border-radius:6px;background:rgba(127,127,127,0.12)\">[pull-quote image=\"photo-1.jpg\" alt=\"What the image shows\"]\nThe quote itself. Markdown works in here.\n[/pull-quote]</pre><p>Drop <em>image</em> and <em>alt</em> for the plain no-image variant.</p>"
blocks_chapter:
type: spacer
text: "<p style=\"margin:1.4em 0 0.4em\"><strong>Chapter break \u2014 section transition over a background image</strong></p><pre style=\"white-space:pre-wrap;word-break:break-word;padding:0.6em 0.8em;border-radius:6px;background:rgba(127,127,127,0.12)\">[chapter-break image=\"photo-1.jpg\" title=\"After Dark\" number=\"II\" alt=\"What the image shows\" /]</pre><p><em>number</em> is optional.</p>"
blocks_gallery:
type: spacer
text: "<p style=\"margin:1.4em 0 0.4em\"><strong>Snap gallery \u2014 swipeable carousel</strong></p><pre style=\"white-space:pre-wrap;word-break:break-word;padding:0.6em 0.8em;border-radius:6px;background:rgba(127,127,127,0.12)\">[snap-gallery images=\"hero.jpg,photo-1.jpg\" captions=\"First caption,Second caption\" alts=\"First alt,Second alt\" /]</pre><p><strong>No commas inside captions.</strong> The three lists are split on commas and zipped by position, so one comma in a caption shifts every caption after it. Use em dashes or semicolons.</p>"
blocks_fullbleed:
type: spacer
text: "<p style=\"margin:1.4em 0 0.4em\"><strong>Full bleed \u2014 single edge-to-edge image as a visual pause</strong></p><pre style=\"white-space:pre-wrap;word-break:break-word;padding:0.6em 0.8em;border-radius:6px;background:rgba(127,127,127,0.12)\">[full-bleed image=\"photo-2.jpg\" alt=\"What the image shows\" caption=\"Optional\" credit=\"Optional\" /]</pre>"
blocks_imagecaption:
type: spacer
text: "<p style=\"margin:1.4em 0 0.4em\"><strong>Image with caption \u2014 photo at a chosen width</strong></p><pre style=\"white-space:pre-wrap;word-break:break-word;padding:0.6em 0.8em;border-radius:6px;background:rgba(127,127,127,0.12)\">[image-caption image=\"photo-2.jpg\" alt=\"What the image shows\" caption=\"Optional\" credit=\"Optional\" width=\"column\" /]</pre><p><em>width</em>: column (default), full, or bleed.</p>"
blocks_gotchas:
type: spacer
text: "<p style=\"margin:1.4em 0 0.4em\"><strong>Two things that bite</strong></p><p>Self-closing tags need the space before <code>/]</code>. And a mistyped shortcode fails silently \u2014 it renders as literal text or vanishes, with no warning. Preview the page after adding each block.</p>"
location:
ordering@: 2
type: tab
title: Location
fields:
@@ -97,21 +148,13 @@ form:
validate:
type: bool
# Published now comes from the inherited Options tab — defining it here
# too would render two toggles bound to the same header key.
publishing:
ordering@: 3
type: tab
title: Publishing
fields:
header.published:
type: toggle
label: Published
highlight: 1
default: 1
options:
1: 'Yes'
0: 'No'
validate:
type: bool
header.featured:
type: toggle
label: Featured highlight
@@ -123,3 +166,12 @@ form:
0: 'No'
validate:
type: bool
# Drop the inherited Date field — Story defines its own required
# "Start Date" on the Content tab, and both bind to header.date.
options:
fields:
publishing:
fields:
header.date:
unset@: true
themes/intotheeast/blueprints/trip.yaml
+20 -14
View File
@@ -1,5 +1,13 @@
title: 'Trip'
# Inherits Grav's default page form — this is what supplies the page-media
# uploader (used for cover images and GPX files), plus the standard Options and
# Advanced tabs. Without it the form is standalone and can only *select*
# existing media, never upload any.
'@extends':
type: default
context: blueprints://pages
form:
fields:
tabs:
@@ -8,6 +16,7 @@ form:
fields:
content:
ordering@: 0
type: tab
title: Content
fields:
@@ -21,7 +30,15 @@ form:
type: markdown
label: Description
# Inherited from the default blueprint; relabelled because this is
# also where GPX files and cover images get uploaded.
header.media_order:
type: pagemedia
label: Images and GPX files
help: 'Upload cover images and .gpx route files here. GPX tracks are auto-detected on the map — no manual linking. The Cover Image field below picks from what is uploaded here.'
trip:
ordering@: 1
type: tab
title: Trip
fields:
@@ -78,17 +95,6 @@ form:
'manual': 'Manual — force connect only'
'intelligent_gpx': 'Intelligent GPX — suppress where route is covered'
publishing:
type: tab
title: Publishing
fields:
header.published:
type: toggle
label: Published
highlight: 1
default: 1
options:
1: 'Yes'
0: 'No'
validate:
type: bool
# No Publishing tab — it held only the Published toggle, which now comes
# from the inherited Options tab. Defining it here too would render two
# toggles bound to the same header key.