Neos: How can I enable the width/height chooser for Images in the inspector?

Neos / Flow FAQ
1

Answer

Before Neos 2.0, the selectors for image width/height were visible by default. In Neos 2.0, this default has changed because we believe that people often go the “responsive-image” way. If you want to enable the selectors, add the following snippet to your Settings.yaml:

TYPO3:
  Neos:
    userInterface:
      inspector:
        dataTypes:
          'TYPO3\Media\Domain\Model\ImageInterface':
            editorOptions:
              features:
                resize: TRUE

See all the options of the image editor in the documentation.

2 Likes
2

Nice tip. Thanks :slight_smile:

3

In general it’s better to configure image size during rendering (in TS or Fluid), and only allow editors to crop images, but not define the resulting size, as usually they don’t understand anything about pixels (and with responsive images it gets even more complicated).

1 Like
4

Actually this weekend I ran into the problem that even no size configured in the inspector does not lead you to responsive images. The image partial used for rendering is using the ImageViewHelper from the media package which will in any case add both, a height and a width attribute leading to stretched images.

As I’m not the responsive frontend expert: anything I miss here? Or should we extend the ImageViewHelper so it does not enforce those properties?

5

Not an expert either, but it’s always good to have real dimensions on img tag and then just use css:

img {
  border: 0;
  max-width: 100%;
  height: auto;
  display: inline-block;
  vertical-align: middle;
}