Add a MediaGallerySection

You can add a gallery of media items to your page. This is a great way to showcase your content. LightNet provides a MediaGallerySection component that displays a grid of media items or a carousel when configured.

Here is an example of how to use it:

---
import { Page, MediaGallerySection } from "lightnet/components"
import { getMediaItems } from "lightnet/content"

const someEnglishBooks = await getMediaItems({
  where: { type: "book", language: "en" },
  orderBy: "dateCreated",
  limit: 10
})

const { t } = Astro.locals.i18n
---

<Page>
    <MediaGallerySection
        title={t("english-books.title")}
        items={someEnglishBooks}
        itemWidth="narrow"
        layout="carousel"
    />
</Page>

Inside the frontmatter, the someEnglishBooks variable is prepared using LightNet’s getMediaItems function. By default the MediaGallerySection component displays items in a carousel and shows the title and image of each media item. Set layout="grid" to render the items in a responsive grid. The number of grid columns depends on the screen width. Pass your media items to the items property. Also choose itemWidth to define the card width.

Note

For best visual balance, use images with similar aspect ratios within a single gallery. Mixing portrait and landscape covers in the same gallery can lead to uneven rows.

Reference

The MediaGallerySection component extends the functionality of the Section component. This means you can use props supported by Section, in addition to the ones listed here. The Section component’s maxWidth option is not yet supported. MediaGallerySection only implements maxWidth="wide".

items

type: MediaItem[]
example: const books = await getMediaItems({/*...*/})
required: true

The array of media items to display.

itemWidth

type: "infer" | "narrow" | "wide"
example: "narrow"
required: false
default: "infer"

Controls the width of gallery items.

• infer: Uses the first media items in the list to choose between narrow and wide.
• narrow: Best for portrait or book-like cover images.
• wide: Best for landscape or video-like cover images.

layout

type: "grid" | "carousel"
example: "carousel"
required: false
default: "carousel"

Controls the overall arrangement of items. The default "carousel" displays items in a horizontally scrollable carousel. Set to "grid" to render items in a responsive grid.