Art Museum, Phase 5: Gallery Images

Understand the Problem

You’ll now enhance GalleryView to render images of artworks from the selected gallery using a new component called ArtImageTile. These images will be clickable and lead to detailed artwork views in Phase 6.

Devise a Plan

  1. Create an ArtImageTile component inside a new folder
  2. Inside GalleryView, find gallery.objects and loop through it
  3. For each object, render an ArtImageTile and pass art as a prop
  4. Inside ArtImageTile, find and render the first image using an <img> tag inside a Link
  5. The Link should direct users to /galleries/:galleryId/art/:artId

Carry Out the Plan

Create ArtImageTile.jsx

// src/components/ArtImageTile/ArtImageTile.jsx
import { Link } from 'react-router-dom';

function ArtImageTile({ art }) {
  const imageUrl = art.images?.[0]?.baseimageurl;
  return (
    <Link to={`art/${art.id}`}>
      <img src={imageUrl} alt={art.title} />
    </Link>
  );
}

export default ArtImageTile;

Update GalleryView.jsx

import ArtImageTile from '../ArtImageTile';

...
return (
  <>
    <h2>{gallery.name}</h2>
    <div className="art-grid">
      {gallery.objects.map(art => (
        <ArtImageTile key={art.id} art={art} />
      ))}
    </div>
  </>
);

Look Back and Refactor

The GalleryView is now a rich visual component, showing clickable art images using composition and props. You've also prepared your route pattern for Phase 6.

Real-World Analogy

This feels like walking into a real gallery room and seeing rows of art. Each image serves as a doorway to a more detailed view — like peeking into a magnifying glass.

Extra Resources