Community Gallery Widget Web Component

Note: This example demonstrates the custom web component for the community gallery widget. See the Widgets Docs Index for theming and embed attributes.

Click-through Support: When community-url is set, clicking a media item opens your community page with postId, mediaIndex, and UTM parameters.

Basic Usage

Include the script and use the custom element:

            <script src="/js/community-gallery-widget.js"></script>
            <legion-community-gallery api-url="https://your-domain.com"
            count="4" theme="light" ></legion-community-gallery>
          

Core Attributes

api-url: Base URL of your application
count: Number of items to display (1-12, default: 4)
theme: "light" or "dark" (default: light)
show-view-all: Show "View all in Gallery" link
view-all-url: URL for "View all" link
community-url: URL when clicking media items

Large Gallery Example

            <legion-community-gallery api-url="https://your-domain.com"
            count="8" gallery-card-radius="8px" gallery-hover-scale="1.05"
            community-url="/community" ></legion-community-gallery>
          

Theming Attributes

gallery-primary-color: Primary accent color
gallery-background-color: Widget background
gallery-text-color: Primary text color
gallery-overlay-bg: Overlay background on hover
gallery-card-radius: Card border radius
gallery-card-shadow: Card box shadow
gallery-gap: Gap between items
gallery-hover-scale: Hover scale factor
gallery-username-size: Username font size

Dark Theme Example

            <legion-community-gallery api-url="https://your-domain.com"
            count="4" theme="dark" gallery-card-shadow="0 2px 8px
            rgba(0,0,0,0.3)" ></legion-community-gallery>
          

Customization

For a visual customization experience with live preview, use the Community Gallery Widget Customizer .