zone5 1.4.0 → 1.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +17 -17
- package/dist/cli/index.js +9 -1
- package/dist/components/Zone5.svelte +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -94,7 +94,23 @@ widths = [400, 800, 1200, 1600, 2400]
|
|
|
94
94
|
|
|
95
95
|
Zone5 supports three layout modes:
|
|
96
96
|
|
|
97
|
-
####
|
|
97
|
+
#### Justified Mode (Default)
|
|
98
|
+
|
|
99
|
+
Row-based layout (like Flickr/Google Photos). Each row fills the full width while preserving aspect ratios. Panoramic images (aspect ratio > 3) automatically get their own row.
|
|
100
|
+
|
|
101
|
+
```svelte
|
|
102
|
+
<Zone5 images={images} mode="justified" />
|
|
103
|
+
|
|
104
|
+
<!-- With custom row height and gap -->
|
|
105
|
+
<Zone5
|
|
106
|
+
images={images}
|
|
107
|
+
mode="justified"
|
|
108
|
+
targetRowHeight={250}
|
|
109
|
+
gap={12}
|
|
110
|
+
/>
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
#### Wall Mode
|
|
98
114
|
|
|
99
115
|
Fixed-height grid layout. Images are cropped to fill their containers.
|
|
100
116
|
|
|
@@ -117,22 +133,6 @@ Column-based masonry layout. Images are distributed across columns and maintain
|
|
|
117
133
|
/>
|
|
118
134
|
```
|
|
119
135
|
|
|
120
|
-
#### Justified Mode
|
|
121
|
-
|
|
122
|
-
Row-based layout (like Flickr/Google Photos). Each row fills the full width while preserving aspect ratios. Panoramic images (aspect ratio > 3) automatically get their own row.
|
|
123
|
-
|
|
124
|
-
```svelte
|
|
125
|
-
<Zone5 images={images} mode="justified" />
|
|
126
|
-
|
|
127
|
-
<!-- With custom row height and gap -->
|
|
128
|
-
<Zone5
|
|
129
|
-
images={images}
|
|
130
|
-
mode="justified"
|
|
131
|
-
targetRowHeight={250}
|
|
132
|
-
gap={12}
|
|
133
|
-
/>
|
|
134
|
-
```
|
|
135
|
-
|
|
136
136
|
### Setting Mode in Markdown
|
|
137
137
|
|
|
138
138
|
Use the `zone5mode` frontmatter property:
|
package/dist/cli/index.js
CHANGED
|
@@ -8198,7 +8198,15 @@ async function vh(t, i, a, n) {
|
|
|
8198
8198
|
}
|
|
8199
8199
|
}
|
|
8200
8200
|
async function wh(t, i) {
|
|
8201
|
-
const n =
|
|
8201
|
+
const n = `---
|
|
8202
|
+
# Zone5 Gallery Configuration
|
|
8203
|
+
# https://cwygoda.github.io/zone5/docs/reference/remark-plugin-api#frontmatter-options
|
|
8204
|
+
|
|
8205
|
+
# Gallery layout mode: "justified" (default) | "wall" | "waterfall"
|
|
8206
|
+
# zone5mode: justified
|
|
8207
|
+
---
|
|
8208
|
+
|
|
8209
|
+
# Photo Gallery
|
|
8202
8210
|
|
|
8203
8211
|
${i.map(({ relativePath: s }) => {
|
|
8204
8212
|
const l = Rt(s);
|