web-dev-qa-db-ja.com

fluid_styled_contentを使用して、TYPO3 7.5および7 LTSでカスタムコンテンツ要素を作成する方法は？

新しいfluid_styled_contentシステム拡張を使用して、TYPO37.5でバックエンドのカスタムの構造化されたコンテンツ要素をセットアップするのは簡単だと言われました。

sysext/fluid_styled_contentとsysext/backendを見た後、私はそれを自分で理解することができませんでした。ヒントはありますか？

typo3typo3-7.xfluid-styled-content
12
Urs

情報源： Githubのfluid_styled_slider

これらの情報はここでも入手できます： setypo3 blog

公式ドキュメント もオンラインです。

PageTSconfig

コンテンツ要素を新しいコンテンツ要素のウィザードに表示するには、PageTSconfigを介して追加する必要があります

mod.wizards.newContentElement.wizardItems.common {
    elements {
        fs_slider {
            iconIdentifier = content-image
            title = LLL:EXT:fluid_styled_slider/Resources/Private/Language/locallang_be.xlf:wizard.title
            description = LLL:EXT:fluid_styled_slider/Resources/Private/Language/locallang_be.xlf:wizard.description
            tt_content_defValues {
                CType = fs_slider
            }
        }
    }
    show := addToList(fs_slider)
}

TCA

次に、TYPO3にバックエンドに表示するフィールドを指示する必要があります。したがって、tt_content TCA構成を拡張する必要があります。この作業は、フォルダConfiguration/TCA/Overrides/で実行されます。最初に新しいCTypeを追加しましょう（これはext_tables.phpでも実行できます）：

\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addTcaSelectItem(
    'tt_content',
    'CType',
    [
        'LLL:EXT:fluid_styled_slider/Resources/Private/Language/locallang_be.xlf:wizard.title',
        'fs_slider',
        'content-image'
    ],
    'textmedia',
    'after'
);

次に、CTypeに表示するフィールドを決定します。

$GLOBALS['TCA']['tt_content']['types']['fs_slider'] = [
    'showitem'         => '
            --palette--;' . $frontendLanguageFilePrefix . 'palette.general;general,
            --palette--;' . $languageFilePrefix . 'tt_content.palette.mediaAdjustments;mediaAdjustments,
            pi_flexform,
        --div--;' . $customLanguageFilePrefix . 'tca.tab.sliderElements,
             media
    '
];

TypoScript

新しいCType fs_sliderにはレンダリング定義が必要です。これはかなり単純です：

tt_content {
    fs_slider < lib.fluidContent
    fs_slider {
        templateName = FluidStyledSlider
        dataProcessing {
            10 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
            10 {
                references.fieldName = media
            }
            20 = DanielGoerz\FluidStyledSlider\DataProcessing\FluidStyledSliderProcessor
        }
    }
}

lib.fluidContentは、FLUIDCONTENTオブジェクトの初期化にすぎません。テンプレート名を変更し（少なくともテンプレートパスをlib.fluidContent.templateRootPathsに追加してください）、使用するdataProcessorsを指定するだけです。そうそう、dataProcessors。

DataProcessors

これらはPHPクラスで、fluidtemplateに渡される前にデータを取得します。データを操作したり、テンプレートに存在するものを追加したりできます。たとえば、TYPO3\CMS\Frontend\DataProcessing\FilesProcessorはすべてを解決します。ビュー内のFileReferenceオブジェクトにアクセスできるようにメディア要素を添付しました。DanielGoerz\FluidStyledSlider\DataProcessing\FluidStyledSliderProcessorは、これがどのように機能するかを示すカスタムプロセッサです。

class FluidStyledSliderProcessor implements DataProcessorInterface
{
    /**
     * Process data for the CType "fs_slider"
     *
     * @param ContentObjectRenderer $cObj The content object renderer, which contains data of the content element
     * @param array $contentObjectConfiguration The configuration of Content Object
     * @param array $processorConfiguration The configuration of this processor
     * @param array $processedData Key/value store of processed data (e.g. to be passed to a Fluid View)
     * @return array the processed data as key/value store
     * @throws ContentRenderingException
     */
    public function process(ContentObjectRenderer $cObj, array $contentObjectConfiguration, array $processorConfiguration, array $processedData)
    {
        // Content of $processedData will be available in the template
        // It can be processed here to your needs.
        $processedData['slider']['width'] = 1000;
        return $processedData;
    }

ただし、DataProcessorsはオプションです。

流体テンプレート

パズルの最後のピースは、指定されたすべてのDataProcessorによって最終的に処理されたデータを受け取る実際のテンプレートです。私たちが知っている（そして愛している）ので、これは明白な流動性です：

<html xmlns:f="http://xsd.helhum.io/ns/typo3/cms-fluid/master/ViewHelpers">
<div class="fluid-styled-slider" style="width: {slider.width}px; margin: auto">
    <f:for each="{files}" as="file">
        <figure class="fluid-styled-slider-item">
            <f:image image="{file}" height="{data.imageheight}" width="{data.imagewidth}" alt="{file.properties.alt}" title="{file.properties.title}"/>
            <f:if condition="{file.properties.description}">
                <figcaption>{file.properties.description}</figcaption>
            </f:if>
        </figure>
    </f:for>
</div>
</html>

もちろん、ここでもレイアウトとパーシャルを使用できます。 {data}にレンダリングされたコンテンツ要素のtt_content行がどのように含まれているかに注意してください。 {files}はTYPO3\CMS\Frontend\DataProcessing\FilesProcessorによって追加され、接続されたメディアを適切なオブジェクトとして含みます。 {slider.width}は独自のDataProcessorによって追加されます。

オプション：ページモジュールでプレビュー

おそらく、ページモジュールのエディターに何らかのプレビューが必要です。これを実現するには、2つの注目すべき可能性があります。

PageTSconfigでプレビューとしてレンダリングする流動的なテンプレートを指定するだけです。

web_layout.tt_content.preview.fs_slider = EXT:fluid_styled_slider/Resources/Private/Templates/Preview/FluidStyledSlider.html

このテンプレートは、tt_content行のすべてのフィールドを直接受け取ります。したがって、{header}にはヘッダーが含まれ、{bodytext}には本文が含まれます。

子レコードを解決するなど、より高度な処理を実行する場合は、次のようにtt_content_drawItemフックに登録できます。

$GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['cms/layout/class.tx_cms_layout.php']['tt_content_drawItem']['fluid_styled_slider']
    = \DanielGoerz\FluidStyledSlider\Hooks\FsSliderPreviewRenderer::class;

私たちのクラスは実装する必要があります
\TYPO3\CMS\Backend\View\PageLayoutViewDrawItemHookInterface。

class FsSliderPreviewRenderer implements PageLayoutViewDrawItemHookInterface
{
    /**
     * Preprocesses the preview rendering of a content element of type "fs_slider"
     *
     * @param \TYPO3\CMS\Backend\View\PageLayoutView $parentObject Calling parent object
     * @param bool $drawItem Whether to draw the item using the default functionality
     * @param string $headerContent Header content
     * @param string $itemContent Item content
     * @param array $row Record row of tt_content
     * @return void
     */
    public function preProcess(PageLayoutView &$parentObject, &$drawItem, &$headerContent, &$itemContent, array &$row)
    {
        if ($row['CType'] === 'fs_slider') {
            if ($row['media']) {
                $itemContent .= '<h3>Fluid Styled Slider</h3>';
                $itemContent .= $parentObject->thumbCode($row, 'tt_content', 'media') . '<br />';
            }
            $drawItem = false;
        }
    }
}

$itemContentに書き込んだものはすべて、コンテンツ要素内のページモジュールにレンダリングされます。

19
Daniel

ダニエル

TCAの最初の段落：「オーバーライド」ではなく「構成/ TCA /オーバーライド」である必要があります

0
Ruwen Gastrock