Skip to content

Commit 6cfaeab

Browse files
ysamcodeysamcode
committed
docs: add slider, lightbox, inverse references, and design sidebar updates for 0.4.0
New pages for the Slider element (Swiper-powered carousels with autoplay, loop, effects, pagination) and Lightbox element (fullscreen image galleries with thumbnails, grouped galleries, zoom). Document inverse references for collection lists, update design controls with visual box-model editor, image text backgrounds, addable effects (dividers, aspect ratio, blur, shadow), and list all element types in the layers page. Made-with: Cursor
1 parent 4b888f9 commit 6cfaeab

File tree

8 files changed

+223
-11
lines changed

8 files changed

+223
-11
lines changed

‎content/cms/collections.mdx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,14 @@ You add custom fields to define the structure of your content. Field types are g
6565
| **reference** | Link to a single item in another collection |
6666
| **multi_reference** | Link to multiple items in another collection |
6767

68+
#### Inverse References
69+
70+
Inverse references let you display related items from the opposite direction of an existing reference field. Instead of following a reference forward (e.g., a Book's author field pointing to an Author), inverse references look backward to find all items whose reference field points to the current item (e.g., showing all Books that reference the current Author).
71+
72+
You do not create a separate field for inverse references. They are configured as a data source on collection list layers. When a collection has reference fields pointing to another collection, those relationships automatically appear as inverse reference options in the source dropdown.
73+
74+
See [Dynamic Pages](/docs/cms/dynamic-pages#inverse-references) for how to use inverse references in collection lists.
75+
6876
## Field Properties
6977

7078
Each field has configurable properties:

‎content/cms/dynamic-pages.mdx‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,20 @@ For large collections, enable pagination to split items across pages:
6565

6666
Set the items per page count to control batch size. Pagination respects filters — only matching items are counted.
6767

68+
### Inverse References
69+
70+
Inverse references let you show related items from the opposite direction of a reference field. For example, if a "Books" collection has an `author` reference field pointing to "Authors", you can place a collection list on an Author's dynamic page that automatically shows all books by that author.
71+
72+
To set up an inverse reference:
73+
74+
1. Add a **Collection** element inside a dynamic page or within another collection list
75+
2. In the **Source** dropdown, look for options labeled with the pattern: `Collection Name (via field name)`
76+
3. Select the inverse reference source
77+
78+
Ycode automatically discovers these relationships based on existing reference and multi-reference fields in your collections. You do not need to create any additional fields.
79+
80+
Inverse references work with both single reference and multi-reference fields. They also support nesting — a collection list using an inverse reference can itself contain nested collection lists.
81+
6882
<Callout type="info" title="Tip">
69-
Combine collection lists with filters, sorting, and pagination to build complete listing pages like blogs, product catalogs, team directories, and event calendars.
83+
Combine collection lists with filters, sorting, pagination, and inverse references to build complete listing pages like blogs, product catalogs, team directories, and event calendars.
7084
</Callout>

‎content/editor/_meta.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ const meta: MetaRecord = {
77
fonts: 'Fonts',
88
responsive: 'Responsive Design',
99
components: 'Components',
10+
slider: 'Slider',
11+
lightbox: 'Lightbox',
1012
'custom-code': 'Custom Code'
1113
}
1214

‎content/editor/design-controls.mdx‎

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -29,16 +29,20 @@ Control text appearance:
2929
- **textAlign** — left, center, right, justify
3030
- **letterSpacing** — Character spacing
3131
- **lineHeight** — Line height
32-
- **color** — Text color
32+
- **color** — Text color (solid, linear gradient, radial gradient, or image background clipped to text)
3333
- **textTransform** — none, uppercase, lowercase, capitalize
34-
- **textDecoration** — none, underline, line-through
34+
- **textDecoration** — Add via the "+" menu: underline with configurable color, thickness, and offset
35+
36+
For text layers, the color picker includes an **Image** tab where you can set a background image that clips to the text shape. Choose an image from the file manager, enter a custom URL, or bind to a CMS field. Configure size, position, and repeat settings for the image.
3537

3638
## Spacing
3739

38-
Set margin and padding:
40+
Set margin and padding using the visual box-model editor. The diagram shows margin (outer ring) and padding (inner ring), with inline inputs for each side.
3941

4042
- **margin** — All sides or individual top, right, bottom, left
4143
- **padding** — All sides or individual sides
44+
- **Shift + drag** — Update all sides at once
45+
- **Alt + drag** — Update opposite sides together (top/bottom or left/right)
4246

4347
Values support px, rem, em, and percentage units.
4448

@@ -49,7 +53,7 @@ Control element dimensions:
4953
- **width** / **height** — Explicit dimensions (px, %, auto)
5054
- **minWidth** / **minHeight** — Minimum constraints
5155
- **maxWidth** / **maxHeight** — Maximum constraints
52-
- **aspectRatio** — Maintain aspect ratio
56+
- **aspectRatio** — Add via the "+" menu with presets (Square, Video 16:9, 4:3, 3:4) or a custom ratio
5357
- **objectFit** — cover, contain, fill, none (for images)
5458
- **gridColumnSpan** / **gridRowSpan** — Grid cell spanning
5559

@@ -61,7 +65,8 @@ Add and customize borders:
6165
- **borderStyle** — solid, dashed, dotted, none
6266
- **borderColor** — Border color
6367
- **borderRadius** — Corner radius (all or per corner)
64-
- **divideX** / **divideY** — Dividers between children with border styling
68+
69+
**Dividers** — Add via the "+" menu in the Borders section. Dividers create lines between child elements. Configure direction (vertical or horizontal), style (solid, dashed, dotted, double), and color. Remove dividers with the X button.
6570

6671
## Backgrounds
6772

@@ -75,12 +80,12 @@ Set element backgrounds:
7580

7681
## Effects
7782

78-
Apply visual effects:
83+
Effects are addable and removable. Use the "+" menu in the Effects section header to add individual effects, and the X button to remove them.
7984

8085
- **opacity** — 0 to 1
81-
- **boxShadow** — Single or multiple shadows
82-
- **blur** — Blur filter
83-
- **backdropBlur** — Blur behind the element
86+
- **boxShadow** — Add via "+" menu; configure shadow offset, blur, spread, and color
87+
- **blur** — Add via "+" menu; blur filter on the element
88+
- **backdropBlur** — Add via "+" menu; blur behind the element
8489
- **filter** — CSS filter values
8590

8691
## Position

‎content/editor/index.mdx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,8 +33,9 @@ The top header bar includes:
3333
## Key Capabilities
3434

3535
- **Layer-based editing** — Build pages from a hierarchical tree of elements with drag-and-drop reordering and nesting
36-
- **Breakpoint-aware design** — Apply different styles for desktop, tablet, and mobile
36+
- **Breakpoint-aware design** — Apply different styles for desktop, tablet, and mobile with a visual box-model editor
3737
- **Reusable components** — Create components once and reuse them across pages; updates propagate to all instances
38+
- **Slider and Lightbox** — Build carousels and fullscreen image galleries with Swiper-powered transitions
3839
- **Custom code injection** — Add head and body code per page or globally
3940
- **Dynamic pages** — Build CMS-driven pages with collection data and template placeholders
4041

‎content/editor/layers.mdx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,15 @@ The layers tree mirrors the DOM structure of your page. Parent elements contain
1414

1515
Add elements from the **Element Library**. Open the library from the toolbar or via the Layers panel, then drag an element onto the canvas or into the tree. The element is inserted at the drop position.
1616

17+
The Element Library organizes elements into categories:
18+
19+
- **Structure** — Section, Container, Div, Horizontal Rule, Columns, Rows, Grid, Collection
20+
- **Content** — Heading, Text
21+
- **Actions** — Button
22+
- **Media** — Image, Icon, Video, Audio
23+
- **Form** — Form, Input, Textarea, Select, Checkbox, Radio, Label
24+
- **Utilities** — [Slider](/docs/editor/slider), [Lightbox](/docs/editor/lightbox), Locale Selector, HTML Embed
25+
1726
## Drag and Drop
1827

1928
Reorder and nest layers by dragging. The editor uses drop zones (25%, 50%, 25% of the target) to distinguish between:

‎content/editor/lightbox.mdx‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
---
2+
title: Lightbox
3+
---
4+
5+
import { Callout } from 'nextra/components'
6+
7+
# Lightbox
8+
9+
The lightbox element opens images in a fullscreen gallery overlay. Visitors click a trigger (typically an image or thumbnail) and view images in an immersive, navigable gallery powered by [Swiper](https://swiperjs.com).
10+
11+
## Adding a Lightbox
12+
13+
1. Open the **Element Library** in the editor
14+
2. Under **Utilities**, drag the **Lightbox** element onto the canvas
15+
3. The lightbox is created with a default image as the trigger
16+
17+
The visible element on the page acts as the click trigger. When clicked, it opens the fullscreen gallery with the configured images.
18+
19+
## Image Sources
20+
21+
You can populate the lightbox gallery from two sources:
22+
23+
### File Manager
24+
25+
Select images from your project's asset library. Add, remove, and reorder images using the file manager in the lightbox settings. This is ideal for static galleries, portfolios, and image showcases.
26+
27+
### CMS Field
28+
29+
Bind the lightbox to a CMS image field (including multi-image fields). The gallery dynamically populates with images from the current collection item. This is useful for product galleries, property listings, and other data-driven image sets.
30+
31+
## Lightbox Settings
32+
33+
Select the lightbox element and open the **Settings** tab:
34+
35+
### Display
36+
37+
| Setting | Description |
38+
|---------|-------------|
39+
| **Overlay** | Light or Dark background for the fullscreen modal |
40+
| **Show thumbnails** | Display a thumbnail strip below the main image for quick navigation |
41+
| **Show navigation** | Display previous/next arrow buttons |
42+
| **Show pagination** | Display a fraction indicator (e.g. 1/5) |
43+
44+
### Animation
45+
46+
| Setting | Description |
47+
|---------|-------------|
48+
| **Effect** | Transition between images: Slide, Fade, Cube, Flip, Coverflow, or Cards |
49+
| **Easing** | Animation curve: Linear, Ease in, Ease in out, or Ease out |
50+
| **Duration** | Transition speed in seconds |
51+
52+
### Interaction
53+
54+
| Setting | Description |
55+
|---------|-------------|
56+
| **Pinch to zoom** | Allow pinch-to-zoom on touch devices |
57+
| **Double-tap zoom** | Zoom in/out by double-tapping or double-clicking (up to 3x) |
58+
| **Mousewheel** | Navigate between images with the scroll wheel |
59+
60+
## Grouped Galleries
61+
62+
You can link multiple lightbox elements into a single shared gallery by setting the same **Group ID** on each lightbox. When a visitor clicks any lightbox in the group, all images from every lightbox in that group are merged into one gallery.
63+
64+
This is useful for:
65+
66+
- Grid layouts where each cell is a separate lightbox but all images should be browsable together
67+
- Product pages with multiple image sections that should form one continuous gallery
68+
69+
<Callout type="info" title="Tip">
70+
Combine grouped lightboxes with CMS collection lists to create dynamic image galleries. Each collection item's lightbox contributes its images to a shared browsable gallery.
71+
</Callout>
72+
73+
## Keyboard Navigation
74+
75+
The lightbox gallery supports keyboard navigation:
76+
77+
- **Left/Right arrows** — Navigate between images
78+
- **Escape** — Close the lightbox

‎content/editor/slider.mdx‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
---
2+
title: Slider
3+
---
4+
5+
import { Callout } from 'nextra/components'
6+
7+
# Slider
8+
9+
The slider element creates carousels and slideshows powered by [Swiper](https://swiperjs.com). You can build image carousels, hero sliders, testimonial rotators, and other sliding content.
10+
11+
## Adding a Slider
12+
13+
1. Open the **Element Library** in the editor
14+
2. Under **Utilities**, drag the **Slider** element onto the canvas
15+
3. The slider is created with default slides, navigation arrows, and pagination
16+
17+
## Structure
18+
19+
A slider has a fixed internal structure:
20+
21+
- **Slider** — The outer container
22+
- **Slides** — The wrapper that holds all slides
23+
- **Slide** — Individual slide (add as many as you need)
24+
- **Navigation** — Previous/next arrow buttons (optional)
25+
- **Pagination** — Bullet or fraction indicators (optional)
26+
27+
You design each slide's content by adding elements inside it (text, images, buttons, etc.). The slide content repeats the same layout structure but you can customize each slide individually.
28+
29+
## Slider Settings
30+
31+
Select the slider element and open the **Settings** tab in the right panel to configure behavior:
32+
33+
### Animation
34+
35+
| Setting | Description |
36+
|---------|-------------|
37+
| **Effect** | Transition animation: Slide, Fade, Cube, Flip, Coverflow, or Cards |
38+
| **Easing** | Animation curve: Linear, Ease in, Ease in out, or Ease out |
39+
| **Duration** | Transition speed in seconds |
40+
41+
### Slides
42+
43+
| Setting | Description |
44+
|---------|-------------|
45+
| **Per view** | Number of slides visible at once (1-10; only for Slide and Coverflow effects) |
46+
| **Per group** | How many slides advance at once (when Per view is greater than 1) |
47+
| **Centered** | Center the active slide (when Per view is greater than 1) |
48+
49+
### Autoplay
50+
51+
| Setting | Description |
52+
|---------|-------------|
53+
| **Autoplay** | Enable automatic slide advancement with a configurable delay in seconds |
54+
| **Pause on hover** | Pause autoplay when the mouse hovers over the slider |
55+
56+
### Loop
57+
58+
| Setting | Description |
59+
|---------|-------------|
60+
| **None** | Slides stop at the first and last slide |
61+
| **Loop** | Continuous infinite loop |
62+
| **Rewind** | Returns to the first slide after the last |
63+
64+
### Navigation and Pagination
65+
66+
| Setting | Description |
67+
|---------|-------------|
68+
| **Show navigation** | Display previous/next arrow buttons |
69+
| **Pagination** | Hidden, Passive bullets, Clickable bullets, or Fraction (e.g. 1/5) |
70+
71+
### Interaction
72+
73+
| Setting | Description |
74+
|---------|-------------|
75+
| **Touch events** | Allow swiping on touch devices |
76+
| **Slide on click** | Navigate to clicked slide (when touch enabled) |
77+
| **Mousewheel** | Navigate slides with the scroll wheel |
78+
79+
## Managing Slides
80+
81+
- **Add a slide** — Use the "Add slide" action in the slider settings or duplicate an existing slide in the Layers panel
82+
- **Reorder slides** — Drag slides in the Layers panel
83+
- **Delete a slide** — Select a slide and delete it from the Layers panel
84+
85+
## Styling
86+
87+
You can style every part of the slider independently:
88+
89+
- **Slide content** — Add any elements inside slides and style them with design controls
90+
- **Navigation arrows** — Select the prev/next buttons and customize their appearance
91+
- **Pagination bullets** — Style the bullet indicators; the active bullet receives a `current` state that you can style separately
92+
93+
<Callout type="info" title="Tip">
94+
Use the Fade effect for hero image sliders and the Coverflow effect for product showcases. The Cards effect works well for stacked card presentations.
95+
</Callout>

0 commit comments

Comments
 (0)