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

Question

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

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

示例

第一个问题：

我想改为设置默认值 400 像素。但是 width 字段不是不同的节点属性，而是 »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 的默认配置并删除您不喜欢的属性extend/configure/override（例如：替代文本和标题）。最后你一定有类似的代码：

`# 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 步： 对于预定义图像尺寸的 selection，我们添加自定义属性 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

此配置添加一个 select 具有自定义图像大小的字段。

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

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

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

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

Set default value for image width in TYPO3 Neos

neoscms