Fix story scrolly text rendering; story/trip blueprint media upload
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:
Claude Opus 5
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user