Liferay.Design / Lexicon
/
Get StartedResources
Part of Liferay, IncPowered by Gatsby and Netlify

Image Selector

Sign In
LIFERAY DXPPENDING

The image selector lets the user select images from a grid, prioritizing over other metadata.

Usage

  • Only use this pattern for image selection.
  • The elements placed in the grid must be an image type that can support a thumbnail.
  • Simple and multiple selection must be possible.
    • Selecting a single image closes the image selector modal.
    • Multiple selection lets the user select as many images as they need. In this case, the modal is closed with the “Done” button.
  • Hovering an image displays its title. Long titles have ellipsis in the middle, while still displaying the end of the title so the user can quickly identify it.
    • Image titles are always shown on touch interfaces.

Image status

Default

image default state

Hover

image hover state

Selected

image hover state

Image selector example on desktop:

image selector example in desktop size

On mobile devices, since there is no hover state, images must always display their title.

image selector example in mobile size

Something to improve? Report an issue!
Menu