Components/Gallery

Gallery

A showcase wall with collections, three layouts, and artwork details.

Since 0.6.0BETA

This component doc is in progress

This page is still being migrated. Demos and API details may change.

Usage

Showcase wall

Switch collections, thumbnail size, and layout; open a piece for details. Artwork is generated in code.

Loading demo...

Overview

The Tuff community showcase, where wallpapers, CoreBox themes, and plugin covers are browsed, favorited, and rated on one wall.

  • Every artwork is an SVG generated in code, plus three JPGs shipped with the site; nothing is fetched from outside.
  • The staggered entrance plays once in view and replays after a change of collection, layout, sort order, or Favorites only; reduced motion skips it, along with hover zoom.
  • Thumbnail size sets the column width of both grid and masonry through the CSS variable --thumb-min; below 640px the wall is two columns.
  • In the details, ← / → step between pieces inside the dialog only; ratings and Set as wallpaper report inside the dialog.
  • Uploads are previewed on this page only; the template owns each file's object URL and revokes it on reset and unmount.

Customization

  • Real artworks need only a url, an orientation, and a palette; serve small server-cut thumbnails and load the large image in the details.
  • For a card that flips open into its details, swap in TxFlipOverlay, using the version that teleports to body (rendered in place inside a content-visibility container, it lands in the wrong spot).
  • When favorites and ratings go through an API, update the counts optimistically, then roll back on failure and say why.
  • Masonry is CSS multi-column and reads down each column first; use the grid when items must read row by row in time order.
RegionComponentsRole
HeaderTxBadge, TxAvatarGroup, TxIconButton, TxTooltip, TxPopover, TxImageUploaderCount, favorites filter, upload
CollectionsTxFilterChipsCollection tabs with counts
ToolbarTxGlassSurface, TxSegmentedSlider, TxFlatRadio, TxDropdownMenuThumbnail size, layout, sorting
WallTxEdgeFadeMask, TxStagger, TxRating, TxAvatar, TxTagEdge fades, entrance, card details
Empty stateTxEmptyStateNo favorites yet
FeedbackTxToastPanelFavorite and upload results
Artwork detailsTxModal, TxRating, TxButton, TxImageGallery, TxToastPanelLarge view, rating, palette, variants
Collection panel (expanded)TxAvatarGroup, TxTag, TxImageUploaderBlurb, tags, and upload area