1

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

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

例子图像宽度

第一个问题：

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

第二个问题：

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

4

1 回答 1

2

您可以在 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的 默认配置并删除您不喜欢扩展/配置/覆盖的属性（例如：替代文本和标题）。最后你必须有类似的代码：

`# 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 文档中阅读更多相关信息。

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

最终解决方案可能如下所示： 示例：选择图像大小

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

于 2016-09-27T16:32:29.847 回答