在 TYPO3 Neos 中设置图像宽度的默认值

Question

我想为 TYPO3 Neos 中的图像宽度设置默认值。

现在编辑器可以插入任何图像，默认情况下 »width« 值将等于原始大小。

例如

第一个问题：

我想改为设置默认值 400 像素。但是宽度字段不是不同的节点属性，而是 »image« 的一个属性。如何在 Neos 中设置属性的默认值？

第二个问题：

我需要做什么才能完全隐藏基于像素的值字段并提供选择？比如“选项 1：小预告片（150 像素），选项 2：常规内容图像（400 像素），选项 3：大图像（980 像素）”。 我应该以某种方式删除»width«属性并添加一个新的属性节点吗？或者我可以以某种方式更改属性的类型吗？

Answer 1

您可以在 Neos CMS 中为 ImageEditor 扩展和配置默认 NodeType (TYPO3.Neos.NodeTypes:ImageMixin)。

按照以下步骤操作：

第 1 步： 在您的站点包中创建新的配置文件 NodeTypes.Mixins.yaml（例如：/Packages/Sites/YourSitePackageName/Configuration/NodeTypes.ImageMixin.yaml）

第 2 步： 从 Neos CMS Core (/Packages/Application/TYPO3.Neos.NodeTypes/Configuration/NodeTypes.Mixin.yaml) 复制 ImageMixin 的默认配置并删除您不喜欢扩展/配置/的属性覆盖（例如：alternativeText 和标题）。最后你必须有类似的代码：

`# 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`

第 3 步：如果您想隐藏像素基值字段（宽度、高度）和裁剪按钮，您必须在图像属性中添加以下编辑器选项：

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

您可以在Neos Documentation 中阅读更多相关信息。

第 4 步：为了选择预定义的图像尺寸，我们添加自定义属性 imageSize（您可以使用其他名称），配置如下：

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

此配置添加具有自定义图像大小的选择字段。

第 5 步： 现在我们需要在 TypoScript 中覆盖默认的 Image NodeType。将以下代码添加到您的 Root.ts (/Packages/Sites/YourSitePackageName/Resources/Private/TypoScript/Root.ts2)（也许您使用其他打字稿文件）。

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 的作用类似于 PHP 中的 switch 函数。我们将此函数用于maximumWidth 和maximumHeight。在为每个选项创造条件之后。在这种情况下，我们检查选择了哪个图像尺寸，然后为宽度和高度写入自定义像素值。使用 fallback 条件，如果图像大小为空或未选择，您可以定义默认值。

最终的解决方案可能如下所示： Example: Select Image Size

我希望这个解决方案会有所帮助。