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

时间:2015-02-25 17:11:23

标签: neoscms

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

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

示例Image Width

第一个问题

我想设置默认值为400像素。但宽度字段不是明确的节点属性,而是“图像”的属性。如何在Neos中设置属性的默认值?

第二个问题

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

1 个答案:

答案 0 :(得分:2)

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

请按照以下步骤操作:

第1步: 在您的sitepackage中创建新的配置文件 NodeTypes.Mixins.yaml (例如:/Packages/Sites/YourSitePackageName/Configuration/NodeTypes.ImageMixin.yaml)

第2步: 从Neos CMS Core复制 ImageMixin 的默认配置(/Packages/Application/TYPO3.Neos.NodeTypes/Configuration/NodeTypes.Mixin.yaml)并删除您不想扩展的属性/ configure / override(例如:alternativeText和title)。最后,你必须有类似的代码:

`# 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步:现在我们需要在T​​ypoScript中覆盖默认的 Image NodeType。将以下代码添加到Root.ts(/Packages/Sites/YourSitePackageName/Resources/Private/TypoScript/Root.ts2)(也许您使用其他的typoscript文件)。

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 。为每个选项创建条件后。在这种情况下,我们检查选择了哪个图像尺寸,然后为宽度和高度写入自定义像素值。使用后备条件,如果图像大小为空或未选中,则可以定义默认值。

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

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