Skip to content

No results for

↑ ↓ navigate ↵ open Esc close 
php artisan aura:add image-gallery

Copies the component source into resources/views/components/aura/. Run php artisan aura:init first if you haven't already. See the CLI guide for all options.

composer require bluestarsystem/aura-ui
php artisan aura:install

Full installation instructions in the Installation guide.

Pro Component — This component requires an Aura UI Pro license.

Overview

<x-aura::image-gallery> renders the grid and the viewer together.

Basic Usage

<x-aura::image-gallery :columns="3" :images="[
    [\"src\" => \"/shots/orders.png\", \"alt\" => \"The orders screen\", \"caption\" => \"Orders, filtered to unpaid\"],
    [\"src\" => \"/shots/invoice.png\", \"alt\" => \"An invoice ready to send\"],
]" />

Plain strings work, but then the images have no alt text — see below.

Props

Prop Type Default Description
images array [] Strings, or arrays with src, alt, caption.
columns int 3 2 to 5. Responsive, written out rather than interpolated.
label string|null null Names the grid.
lightbox string 'gallery' The lightbox name it dispatches to.

Accessibility

  • Each thumbnail is a button, because it opens something. A div with a click handler cannot be reached or activated from the keyboard.
  • Spend the alt text. A gallery whose images are all "photo" is one nobody listening can navigate; without alt the thumbnail is still named "Open image 3", which is a fallback rather than a substitute.