Skip to content

Claude/wizardly hopper dd235d#76

Open
lgcavalini wants to merge 10 commits intoShopify:mainfrom
lgcavalini:claude/wizardly-hopper-dd235d
Open

Claude/wizardly hopper dd235d#76
lgcavalini wants to merge 10 commits intoShopify:mainfrom
lgcavalini:claude/wizardly-hopper-dd235d

Conversation

@lgcavalini
Copy link
Copy Markdown

No description provided.

lgcavalini and others added 10 commits April 21, 2026 11:00
Adds an image_mobile field to the _slide block schema so merchants can
upload a separate image for mobile devices. Uses a <picture> element
with a <source media="(max-width: 749px)"> to serve the mobile image on
small screens. Falls back to the desktop image when no mobile image is
set, preserving all existing slide behaviour.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Bug: the <picture> element introduced for mobile images broke the full-screen
layout because the CSS used direct-child selectors (>) that no longer matched
the <img> nested inside <picture>. Fixed by adding explicit rules for
picture and picture > .slide__image inside .slide__image-container.

Feature: the adapt_image height mode (already wired in block logic) is now
exposed as a schema option and set as the default. The min-height calculation
is split by breakpoint so desktop uses the desktop image aspect ratio and
mobile uses the mobile image ratio (falling back to desktop if no mobile
image is set).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
When slide_height is 'auto' and the slide has an image but no text/buttons,
the image is position:absolute so it doesn't contribute to the content height
and the slide collapses to a minimal bar. Fix: apply the image-based
min-height calculation (split by breakpoint for desktop/mobile images)
whenever slide_height is 'auto' and an image exists.

Removes the separate 'adapt_image' schema option — 'auto' now covers both
content-driven and image-driven height in one mode.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Responsive height: move {% style %} outside {% capture %} so the tag is
processed at the block render level (reliable). Replace min-height vw
with aspect-ratio W/H — the browser maintains the correct proportions
as viewport width changes, per desktop and mobile breakpoints
independently.

Clickable slides: add a `link` URL field to the _slide block schema.
Renders an absolute-positioned transparent <a> inside the image container
(inset: 0, z-index: 1). Uses CSS :has(.slide__link) to set
pointer-events: none on .slide__content so clicks pass through to the
link, while <a> and <button> children restore pointer-events: auto.

Fade transition: add `transition_style` select (fade/slide, default fade)
to the slideshow section schema. CSS sets overflow: hidden on
slideshow-slides (hides the scroll without breaking the JS's
IntersectionObserver which uses root: scroller), then animates opacity
via aria-hidden — the attribute the JS already toggles — producing a
cross-fade without any new JavaScript.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant