ImageField size does not change with styles

[RafeSacks]

https://github.com/marmelab/react-admin/issues/1480 is similar but was closed but fix is not in the history and the link is broken. I tried to be more complete here and add more information.

What you were expecting: Image size style to set image size.

What happened instead: Only the column width changes. The image size is not affected.

With no styles

With styles

Repro CodeSandbox (https://codesandbox.io/embed/54r440jp8k)

import React from "react";
import { Datagrid, ImageField, List, TextField } from "react-admin"; // eslint-disable-line import/no-unresolved
import { withStyles } from "material-ui/styles";

const styles = {
  image: {
    width: "20px",
    height: "20px"
  }
};

export const PostList = withStyles(styles)(({ classes, ...props }) => (
  <List {...props}>
    <Datagrid>
      <ImageField source="image.url" className={classes.image} />
      <TextField source="id" />
      <TextField source="title" cellClassName={classes.title} />
    </Datagrid>
  </List>
));

Environment

• React-admin version: 2.8.5
• Last version that did not exhibit the issue (if applicable): Not sure
• React version: 16.8.6
• Browser: Chrome Version 73.0.3683.86 (Official Build) (64-bit)
• Stack trace (in case of a JS error): None

[djhi]

As explained in the closed issue, it's possible. I understand the codesandbox isn't available anymore but this is still a How To question. Please ask those on StackOverFlow as explained in the react-admin contributing guide.

This makes your question easy to find by the core team, and the developer community. Unlike Github, StackOverFlow has great SEO, gamification, voting, and reputation. That's why we chose it, and decided to keep GitHub issues only for bugs and feature requests.

So I'm closing this issue, and inviting you to ask your question at:

http://stackoverflow.com/questions/tagged/react-admin

And once you get a response, please continue to hang out on the react-admin channel in StackOverflow. That way, you can help newcomers and share your expertise!

[brownieboy]

this is still a How To question. Please ask those on StackOverFlow as explained in the react-admin contributing guide.

Actually, that contributing guide says nothing about asking questions on SO first. (Yes, I know it's pretty standard practice, anyway.)

[djhi]

You're right it's in the issue template

[RafeSacks]

I'm confused why is this is not considered a bug. I spent time making a code sandbox to prove it doesn't work. if I made a user error, that is fine, but not obvious. material-ui-image, for example documents style for width and height.

I did search for a solution, including StakeOverflow, before spending my time to create a repro and this post with screenshots and such. I couldn't find anything helpful. Just going to the link you provide with the tagged questions and typing "image size" returns no posts.

I'll repost this to StackOverflow.

As feedback: It seems like adding images to a list view would be handy to have in the docs.

P.S. Really love working with react-admin. Thank you for all your efforts!

[brownieboy]

I went an old school route to work around this.

I set a className on the <ImageField /> and then style its child <img /> tag in my App.css file. (My app is based on Create React App.)

So here's the App.css code:

.thumbNailView img {
  height: 60px;
  width: 60px;
  border-radius: 50%
}

And here's the React component code:

    <List {...props}>
      <Datagrid rowClick="edit">
        <ImageField source="thumbFullUrl" className="thumbNailView" label="" />

I realise that this kind of breaks the whole JSS philosophy of React Admin, but it worked for me!

[RafeSacks]

StackOverflow: https://stackoverflow.com/questions/55604052/how-do-i-change-the-size-of-an-image-in-an-imagefield

[anthlasserre]

I had the same problem and I just found the solution by checking React Admin Theming.

Explaination:

The component ImageField create a <div> element that contain an img element. The class you want to link is attached directly to the div. So actually you are resizing the div and not directly the img. The best way is to select the child img of this div with the trick '& img'

The solution:

import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles({
  imgContainer: {
    '& img': {
      height: 50,
      width: 50,
      objectFit: "contain"
    }
  }
});

export const ShopList = (props) => {
  const classes = useStyles();
  return (
    <List {...props} filters={<ShopFilter />}>
      <Datagrid>
        <ImageField className={classes.imgContainer} source="assets.logo" label={"Logo"} />
....

Say me now if it is working for you 🚀

[Luwangel]

The best solution is to use the Material-UI customization mechanism.

You can target the rule image defined for the <ImageField> component.

// ImageField.tsx
const useStyles = makeStyles(
    {
        list: {
            display: 'flex',
            listStyleType: 'none',
        },
        image: {
            margin: '0.5rem',
            maxHeight: '10rem',
        },
    },
    { name: 'RaImageField' }
);

I've tested it in the Simple Example:

// In PostEdit.js
import { makeStyles } from '@material-ui/core/styles';

const useImageFieldStyles = makeStyles(theme => ({
    image: { // This will override the style of the <img> inside the <div>
        width: 50,
        height: 50,
    }
}));

const PostEdit = ({ permissions, ...props }) => {
    const imageFieldClasses = useImageFieldStyles();
    return (
        // ...
        <ImageInput multiple source="pictures" accept="image/*">
            <ImageField classes={imageFieldClasses} source="src" title="title" />
        </ImageInput>
        // ...
    );
};