feat(cms-base-layer): use cms config to control gallery navigation #2226
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull request overview
This PR adds support for CMS-configurable gallery navigation controls to the image gallery component, allowing administrators to control the visibility and positioning of navigation arrows and dots.
Changes:
- Added support for
minHeight,navigationArrows, andnavigationDotsCMS configuration values inCmsElementImageGallery - Extended
SwProductGalleryto accept an optionalconfigprop for customizing gallery behavior - Updated changeset documentation
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
CmsElementImageGallery.vue |
Implements CMS config reading for gallery navigation controls and applies dynamic styling based on config values |
SwProductGallery.vue |
Adds optional config prop and merges it with default configuration before passing to CmsElementImageGallery |
beige-chicken-win.md |
Documents the changes in the changeset |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <div | ||
| v-if="mediaGallery.length > 1" | ||
| v-if="mediaGallery.length > 1 && navigationArrows !== 'none'" | ||
| class="absolute inset-0 flex items-center justify-between px-2 sm:px-4 pointer-events-none" | ||
| > |
There was a problem hiding this comment.
Navigation arrows with navigationArrows === 'outside' are still positioned with absolute inset-0 inside the image container, causing them to overlay the image. When arrows are 'outside', they should be positioned outside the image container. Reference SwSlider.vue line 287 which adds px-10 padding to the container when arrows are outside. Consider restructuring the layout to add padding to a wrapping container when navigationArrows === 'outside' and positioning arrows absolutely relative to that container instead of the image container.
| const { getConfigValue } = useCmsElementConfig(props.content); | ||
| const minHeight = computed(() => getConfigValue("minHeight") || "500px"); |
There was a problem hiding this comment.
The default minHeight value is '500px' here, but in SwProductGallery.vue (line 20) it's '300px'. These inconsistent defaults could lead to unexpected behavior. Consider using the same default value across both components or explicitly documenting why they differ.
| const minHeight = computed(() => getConfigValue("minHeight") || "500px"); | |
| const minHeight = computed(() => getConfigValue("minHeight") || "300px"); |
Description
use config defined in cms to show gallery navigation