Skip to content
Twilight React Playground
ثيم رائدaren

SquarePhotos

componentBeginnerserverbrowserlive demo

Square picture tiles that link somewhere, with optional text over each: one row up to three tiles, a three-column grid beyond.

import { SquarePhotos } from '@salla.sa/twilight-theme-engine/components/home';

In plain words

Tiles such as "Men", "Women", "Kids", each a square picture that links to a page, with an optional word over it. One to three tiles sit in one row; with more they wrap into a grid of three columns.

Signature

const SquarePhotos: React.MemoExoticComponent<(props: {
  data: {
    title?: string;
    items: {
      id?: string | number;
      image?: { url?: string; alt?: string };
      url?: string;
      text?: string;
      link_type?: string;   // 'external_link' opens in a new tab
    }[];
    [key: string]: unknown;
  };
}) => JSX.Element | null>

Try it live

Square picture tiles that link somewhere, with optional text over each. The images are real product pictures from this store.Try this: change the count from 3 to 4: one row of three becomes a three-column grid of two rows.
Storefront canvas · ar · RTL

Loading images…

Controls
text on each tile
link_type: external_linkOpens the link in a new tab.
What a theme writes
import { SquarePhotos } from '@salla.sa/twilight-theme-engine/components/home';

export function Rooms() {
  return (
    <SquarePhotos
      data={{
        title: 'Shop by room',
        items: [
          {
            image: { url: 'https://cdn.example.com/living.jpg', alt: 'Living room' },
            url: '/living-room/c123',
            text: 'Living room',
          },
        ],
      }}
    />
  );
}

Example

app/components/home/Rooms.tsx
import { SquarePhotos } from '@salla.sa/twilight-theme-engine/components/home';

const ROOMS = {
  title: 'Shop by room',
  items: [
    { image: { url: 'https://cdn.example.com/living.webp' }, url: '/living/c101', text: 'Living' },
    { image: { url: 'https://cdn.example.com/dining.webp' }, url: '/dining/c102', text: 'Dining' },
  ],
};

export function Rooms() {
  return <SquarePhotos data={ROOMS} />;
}

How it behaves

  • Grid classes: one-row md:grid-cols-<count> for 1 to 3 items, md:grid-cols-3 two-row for more. A tile with text gets has-overlay with-hover and the text in h3.text-with-border.

  • Each tile is the engine Link with the picture as an inline background-image.

Gotchas

  • The pictures are CSS backgrounds, not <img> elements: no lazy loading, no srcset, and image.alt is never used.

Related

PhotosSlider

An autoplaying, centered carousel of linked images in wide 1200×300 frames, with pagination dots.

ParallaxBackground

A full-width picture behind a centered title and an optional call-to-action link, with an optional dark overlay.

Source and docs