Set default value for image width in TYPO3 Neos

Question

I would like to set a default value for an image width in TYPO3 Neos.

Right now an editor may insert any image and the »width« value will be equal to the original size by default.

Example

First question:

I would like to set a default of 400 pixel instead. But the width field is no distinct node property, but an attribute of »image«. How do I set default values for attributes in Neos?

Second question:

What would I need to do, to completely hide the pixel based value field and offer an selection instead? Like „Option 1: Small teaser (150px), Option 2: Regular content image (400px), Option 3: Large image (980px)“. Should I somehow remove the »width« attribute and add a new property node? Or may I change the type of the attribute somehow?

Answer 1

you can extend and configure default NodeType (TYPO3.Neos.NodeTypes:ImageMixin) for ImageEditor in Neos CMS.

Follow this steps:

Step 1: Create new configuration file NodeTypes.Mixins.yaml in your sitepackage (for example: /Packages/Sites/YourSitePackageName/Configuration/NodeTypes.ImageMixin.yaml)

Step 2: Copy default configuration for ImageMixin from Neos CMS Core (/Packages/Application/TYPO3.Neos.NodeTypes/Configuration/NodeTypes.Mixin.yaml) and remove properties which you doesn't like to extend/configure/override (for example: alternativeText and title). At the end you must have similar code:

`# Image mixin
'TYPO3.Neos.NodeTypes:ImageMixin':
  abstract: TRUE
  ui:
    inspector:
      groups:
        image:
          label: i18n
          position: 5
  properties:
    image:
      type: TYPO3\Media\Domain\Model\ImageInterface
      ui:
        label: i18n
        reloadIfChanged: TRUE
        inspector:
          group: 'image'
          position: 50`

Step 3: If you like to hide pixel base value fields (width, height) and crop button, you must add following editor options to image property:

position: 50
editorOptions:
  features:
    crop: FALSE --> hides crop button
    resize: FALSE --> hides pixel based value fields

You can read more about this in Neos Documentation.

Step 4: For selection of predefined image sizes we add custom property imageSize (you can use other name) with following configuration:

imageSize:
  type: string
  ui:
    label: 'Select Image Size'
    reloadIfChanged: TRUE
    inspector:
      group: 'image'
      position: 60
      editor: 'TYPO3.Neos/Inspector/Editors/SelectBoxEditor'
      editorOptions:
        values:
          small:
            label: 'Small teaser (150x150)'
          regular:
            label: 'Regular content image (400x270)'
          large:
            label: 'Large image (980x500)'
        allowEmpty: TRUE

This configuration add an select field with custom image sizes.

Step 5: Now we need to override default Image NodeType in TypoScript. Add following code to your Root.ts (/Packages/Sites/YourSitePackageName/Resources/Private/TypoScript/Root.ts2) (maybe you use other typoscript file).

prototype(TYPO3.Neos.NodeTypes:Image) {
  // overwrite template for images
  templatePath = 'resource://Vendor.YouSitePackageName/Private/Templates/NodeTypes/Image.html'

  // define maximumWidth for images
  maximumWidth = TYPO3.TypoScript:Case {
    smallCondition {
        condition = ${q(node).property('imageSize') == 'small'}
        renderer = 150
    }
    regularCondition {
        condition = ${q(node).property('imageSize') == 'regular'}
        renderer = 400
    }
    largeCondition {
        condition = ${q(node).property('imageSize') == 'large'}
        renderer = 980
    }
    fallback {
        condition = ${q(node).property('imageSize') == ''}
        renderer = 400
    }
  }
  // define maximumHeight for images
  maximumHeight = TYPO3.TypoScript:Case {
    smallCondition {
        condition = ${q(node).property('imageSize') == 'small'}
        renderer = 150
    }
    regularCondition {
        condition = ${q(node).property('imageSize') == 'regular'}
        renderer = 270
    }
    largeCondition {
        condition = ${q(node).property('imageSize') == 'large'}
        renderer = 500
    }
    fallback {
        condition = ${q(node).property('imageSize') == ''}
        renderer = 270
    }
  }
  allowCropping = true
}

TYPO3.TypoScript:Case works like switch-function in PHP. We use this function for maximumWidth and maximumHeight. After create an condition for every option. In this condition we check which image size is selected and then write custom pixel value for width and height. With fallback condition you can define default value if image size is empty or was not selected.

The final solution may look as follows: Example: Select Image Size

I hope this solution was helpful.