1

TYPO3 Neos の画像幅のデフォルト値を設定したいと思います。

現在、編集者は任意の画像を挿入でき、»width« の値はデフォルトで元のサイズに等しくなります。

例画像の幅

最初の質問:

代わりにデフォルトの 400 ピクセルを設定したいと思います。ただし、幅フィールドは個別のノード プロパティではなく、»image« の属性です。Neos で属性のデフォルト値を設定するにはどうすればよいですか?

2 番目の質問:

ピクセルベースの値フィールドを完全に非表示にして、代わりに選択を提供するには、どうすればよいですか? 「オプション 1: 小さなティーザー (150px)、オプション 2: 通常のコンテンツ画像 (400px)、オプション 3: 大きな画像 (980px)」のように。どうにかして »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: ImageMixin のデフォルト構成をNeos CMS Core (/Packages/Application/TYPO3.Neos.NodeTypes/Configuration/NodeTypes.Mixin.yaml) からコピーし、拡張/構成/オーバーライドしたくないプロパティを削除します (たとえば、 : 代替テキストとタイトル)。最後に、同様のコードが必要です。

`# 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関数のように機能します。この関数をmaximumWidthとmaximumHeightに使用します。すべてのオプションの条件を作成した後。この状態で、どの画像サイズが選択されているかを確認し、幅と高さのカスタム ピクセル値を書き込みます。フォールバック条件を使用すると、画像サイズが空または選択されていない場合のデフォルト値を定義できます。

最終的な解決策は次のようになります: 例: 画像サイズの選択

このソリューションがお役に立てば幸いです。

于 2016-09-27T16:32:29.847 に答える