我想在TYPO3 Neos中设置图像宽度的默认值。
现在编辑器可以插入任何图像,默认情况下»width«值将等于原始大小。
示例
第一个问题:
我想设置默认值为400像素。但宽度字段不是明确的节点属性,而是“图像”的属性。如何在Neos中设置属性的默认值?
第二个问题:
我需要做什么,完全隐藏基于像素的值字段并提供选择?例如“选项1:小预告片(150px),选项2:常规内容图像(400px),选项3:大图像(980px)”。 我应该以某种方式删除»width«属性并添加一个新的属性节点?或者我可以以某种方式改变属性的类型吗?
答案 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步:现在我们需要在TypoScript中覆盖默认的 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
我希望这个解决方案很有帮助。