[ImageList] Wrap image with a link <a>

[szewah]

I want to add a link tag around the images. However, when I resize the browser to greater than 1245px, the images separate.

Here's the sandbox:
https://codesandbox.io/s/thirsty-diffie-3e2fg?file=/src/App.js

Adding screen cap of the original

I'm using:
@material-ui/core": "^4.11.0"
react: "^16.13.1"

[alexmotoc]

I bumped into the same issue quite recently. The way I solved it was to add an onClick to the GridListTile and redirect to the desired link that way.

From the official documentation:

Theoretically you can pass any node as children, but the main use case is to pass an img, in which case GridListTile takes care of making the image "cover" available space

[oliviertassinari]

While we have revamped the component in #22395, the limitation still stands. You need to apply the object-fit style and to grow the image to cover the whole space of the cell:

/* eslint-disable @typescript-eslint/no-use-before-define */
import * as React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import ImageList from '@material-ui/core/ImageList';
import ImageListItem from '@material-ui/core/ImageListItem';

const useStyles = makeStyles({
  a: {
    display: 'block',
    height: '100%',
  },
  img: {
    objectFit: 'cover',
    width: '100%',
    height: '100%',
  },
});

export default function StandardImageList() {
  const classes = useStyles();

  return (
    <ImageList cols={3} rowHeight={164}>
      {itemData.map((item) => (
        <ImageListItem key={item.img}>
          <a className={classes.a} href="#">
            <img
              className={classes.img}
              srcSet={`${item.img}?w=164&h=164&fit=crop&auto=format 1x,
                          ${item.img}?w=164&h=164&fit=crop&auto=format&dpr=2 2x`}
              alt={item.title}
            />
          </a>
        </ImageListItem>
      ))}
    </ImageList>
  );
}

const itemData = [
  {
    img: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e',
    title: 'Breakfast',
  },
  {
    img: 'https://images.unsplash.com/photo-1551782450-a2132b4ba21d',
    title: 'Burger',
  },
  {
    img: 'https://images.unsplash.com/photo-1522770179533-24471fcdba45',
    title: 'Camera',
  },
  {
    img: 'https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c',
    title: 'Coffee',
  },
  {
    img: 'https://images.unsplash.com/photo-1533827432537-70133748f5c8',
    title: 'Hats',
  },
  {
    img: 'https://images.unsplash.com/photo-1558642452-9d2a7deb7f62',
    title: 'Honey',
  },
  {
    img: 'https://images.unsplash.com/photo-1516802273409-68526ee1bdd6',
    title: 'Basketball',
  },
  {
    img: 'https://images.unsplash.com/photo-1518756131217-31eb79b20e8f',
    title: 'Fern',
  },
  {
    img: 'https://images.unsplash.com/photo-1597645587822-e99fa5d45d25',
    title: 'Mushrooms',
  },
  {
    img: 'https://images.unsplash.com/photo-1567306301408-9b74779a11af',
    title: 'Tomato basil',
  },
  {
    img: 'https://images.unsplash.com/photo-1471357674240-e1a485acb3e1',
    title: 'Sea star',
  },
  {
    img: 'https://images.unsplash.com/photo-1589118949245-7d38baf380d6',
    title: 'Bike',
  },
];

@mbrookes I can't think of a better approach. Any idea? Maybe we could close the issue with this propose workaround?

[szewah]

Thanks @alexmotoc your hack worked.
Thanks @oliviertassinari. Will wait for the updates.

[mbrookes]

@oliviertassinari We could target any img descendent of ImageListItem, which would remove the need for React.cloneElement, but at the expense of ease of customisation.

[oliviertassinari]

@mbrookes the issue is that a developer also needs to change the size of the wrapping element of the image, it's required to have the correct placement. So I don't think that it's enough to solve this specific issue.

Now, maybe using a & > img selector instead of clone element would help for a different type of problem. It could make it easier when wrapping the img into another component without changing the DOM structure. We would keep a flat CSS specificity, so still easy to override.

[oliviertassinari]

My bad .MuiImageListItem-standard > img has a specificity of two. I think that it would still be better to ask the developers to rewrite the styles than have to fight with CSS specificity. At least, now, they are in control. Considering the initial question was answered, I'm closing.