Customize the appearance of the Community Gallery widget using custom attributes on the <legion-community-gallery> element.
For an interactive customization experience with live preview, visit:
/widgets/community-gallery/customize
1<legion-community-gallery
2 count="4"
3 theme="light"
4 show-view-all="true"
5 view-all-url="/gallery"
6 community-url="/community"
7 api-url="https://your-domain.com"
8 gallery-card-radius="12px"
9>
10</legion-community-gallery>| Attribute | Type | Default | Description |
|---|---|---|---|
count | number | 4 | Number of items to display (1-12) |
theme | string | light | "light" or "dark" |
show-view-all | boolean | true | Show "View all in Gallery" link |
view-all-url | string | /gallery | URL for the "View all" link |
community-url | string | - | URL to open when clicking media items |
api-url | string | origin | Your deployment URL |
| Attribute | CSS Variable | Default | Description |
|---|---|---|---|
gallery-primary-color | --gallery-primary-color | #228be6 | Primary accent color |
gallery-background-color | --gallery-background-color | transparent | Container background |
gallery-text-color | --gallery-text-color | #1a1b1e | Primary text color |
| Attribute | CSS Variable | Default | Description |
|---|---|---|---|
gallery-card-radius | --gallery-card-radius | 12px | Card radius |
gallery-card-shadow | --gallery-card-shadow | 0 2px 8px rgba(0,0,0,0.1) | Card shadow |
gallery-gap | --gallery-gap | 8px | Grid gap |
| Attribute | CSS Variable | Default | Description |
|---|---|---|---|
gallery-overlay-bg | --gallery-overlay-bg | linear-gradient(0deg, rgba(0,0,0,0.6)...) | Overlay gradient |
| Attribute | CSS Variable | Default | Description |
|---|---|---|---|
gallery-font-family | --gallery-font-family | inherit | Font family |
gallery-username-size | --gallery-username-size | 12px | Username text size |
gallery-username-color | --gallery-username-color | #ffffff | Username color |
gallery-icon-size | --gallery-icon-size | 20px | Media icon size |
| Attribute | CSS Variable | Default | Description |
|---|---|---|---|
gallery-transition-duration | --gallery-transition-duration | 0.2s | Animation speed |
gallery-hover-scale | --gallery-hover-scale | 1.03 | Hover scale |
When a user clicks on a gallery item, the widget opens the community-url with these query parameters:
postId - The original post IDmediaIndex - Index of the media in the post's images arraygridIndex - Index in the gallery gridutm_source=gallery_widgetutm_medium=embedUse these parameters to scroll/focus to the correct post on your community page.
1<legion-community-gallery
2 count="4"
3 theme="dark"
4 api-url="https://your-domain.com"
5 gallery-card-shadow="0 2px 8px rgba(0,0,0,0.3)"
6>
7</legion-community-gallery>1<legion-community-gallery
2 count="8"
3 theme="light"
4 api-url="https://your-domain.com"
5 gallery-card-radius="8px"
6 gallery-hover-scale="1.05"
7 community-url="https://your-domain.com/community"
8>
9</legion-community-gallery>Add to your theme's header:
<script src="https://your-domain.com/js/community-gallery-widget.js"></script>Then use in any Custom HTML block:
1<legion-community-gallery
2 count="4"
3 theme="light"
4 api-url="https://your-domain.com"
5 community-url="https://your-domain.com/community"
6>
7</legion-community-gallery>