dataProcessing Images Bildbearbeitung

opaque · 4. November 2016 20:21

Hallo Forum

ich habe mir eine eigene kleine Extension geschrieben um eigene CEs zu bekommen. Jetzt habe ich aber das Problem wenn ich im TypoScript setup.txt der Extension die Variable image=FILES verwende werden Bilder die mit dem Image Editor zugeschnitten wurden nicht ausgegenen. Meine Vermutung ich muss es mit den dataProcessing machen. Habe ich auch versucht nur jetzt werden die Partials nicht mehr gerendert. Am besten ich poste den Code:

ext_tables.php

<?php

if (!defined('TYPO3_MODE')) {
    die('Access denied.');
}

\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addStaticFile($_EXTKEY, 'Configuration/TypoScript', 'formquadrat CEs');

\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addPageTSConfig(
    'mod {
    	wizards.newContentElement.wizardItems.extra {
            header = formquadrat CEs
            elements {
                formquadratces_hpTeaserImage {
                    iconIdentifier = content-image
                    title = Homepage Teasers
                    description = Content Element für die Projektteaser und More Uniqueness, Headline, Text, Image
                    tt_content_defValues {
    			CType = hpTeaserImage
                    }
    		}
            }
            show = *
    	}
    }
');

Configuration/TCA/Overrides/hpTeaserImages.php

<?php

\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addPageTSConfig(
        '<INCLUDE_TYPOSCRIPT: source="FILE:EXT:' . $_EXTKEY . '/Configuration/TSConfig/Page.ts">'
);
// header;Headline;;LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:tabs.appearance,header_layout; LLL:EXT:lang/locallang_general.xlf:LGL.type, 
$tcaTtContent = array(
    'types' => array(
        'hpTeaserImage' => array(
            'showitem' => '--palette--;LLL:EXT:cms/locallang_ttc.xlf:palette.general;general,
            image;Project Image,
            --palette--;LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:palette.header;header,
            subheader;Subline,
            bodytext;Text;;richtext:rte_transform[flag=rte_enabled|mode=ts_css], rte_enabled;LLL:EXT:cms/locallang_ttc.xml:rte_enabled_formlabel,
            --div--;LLL:EXT:cms/locallang_ttc.xlf:tabs.appearance,
            --palette--;LLL:EXT:cms/locallang_ttc.xlf:palette.frames;frames,
            --div--;LLL:EXT:cms/locallang_ttc.xlf:tabs.access,
            --palette--;LLL:EXT:cms/locallang_ttc.xlf:palette.visibility;visibility'
        )
    ),
    'columns' => array(
        'CType' => array(
            'config' => array(
                'items' => array(
                    'hpTeaserImage' => array(
                        'HP Teaser Image', // Name des Inhaltselementes
                        'hpTeaserImage', // TCA Name des Inhaltselementes
                        'EXT:formquadratces/Resources/Public/Icons/hpTeaser.svg' // Bild des Inhaltelementes
                    )
                )
            )
        ),  
    )
);

\TYPO3\CMS\Core\Utility\ArrayUtility::mergeRecursiveWithOverrule($GLOBALS['TCA']['tt_content'], $tcaTtContent);

Configuration/TypoScript/setup.txt

tt_content.hpTeaserImage {
	templateRootPaths {
		0 = EXT:formquadratces/Resources/Private/Templates
	}
	partialRootPaths {
		0 = EXT:formquadratces/Resources/Private/Partials
	}
	layoutRootPaths {
		0 = formquadratces/Resources/Private/Layouts

	}
}

tt_content.hpTeaserImage = FLUIDTEMPLATE
tt_content.hpTeaserImage {
	file = EXT:formquadratces/Resources/Private/Templates/hpTeaserImage.html
        
        dataProcessing.10 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
        dataProcessing.10 {
            references.fieldName = image
            references.table = tt_content
            as = projects
       }

        variables {
            defaultHeaderType = TEXT
            defaultHeaderType.value < lib.fluidContent.settings.defaultHeaderType

            #image = FILES
            #image {
            #    references {
            #        table = tt_content
            #        fieldName = image
   	    # 	}
            #     renderObj = IMG_RESOURCE
            #     renderObj {
            #         file.import.data = file:current:uid
            #         file.treatIdAsReference = 1
            #	}
            #}      
    
  	}
}

Resources/Private/Templates/hpTeaseImages.html

<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:ce="http://typo3.org/ns/TYPO3/CMS/FluidStyledContent/ViewHelpers" data-namespace-typo3-fluid="true">
    <f:section name="ImageOne">
        <f:for each="{projects}" as="image" iteration="itemIteration">
            <f:image class="img-responsive" src="{image}" alt="{image.alternative}" title="{image.title}" width="367c" height="367c" />
        </f:for>
    </f:section>
    <f:section name="ImageHeight">
        <f:for each="{projects}" as="image">
            <f:image class="img-responsive" src="{image}" alt="{image.alternative}" title="{image.title}" width="367c" height="745c" />
        </f:for>
    </f:section>

    <f:section name="ImageWidth">
        <f:for each="{projects}" as="image">
            <f:image class="img-responsive" src="{image}" alt="{image.alternative}" title="{image.title}" width="745c" height="367c" />
        </f:for>
    </f:section>

    <f:section name="ImageBig">
        <f:for each="{projects}" as="image">
            <f:image class="img-responsive" src="{image}" alt="{image.alternative}" title="{image.title}" width="745c" height="745c" />
        </f:for>
    </f:section>
      
    #IRGENDWO HIER LIEGT der FEHLER: Wenn ich es mit der variable image [siehe auskommentiertes TypoScript weiter oben] versuche werden die sections gerendert. (Natürlich muss das <f:for each="{projects}" as="image"> weg).
    <f:if condition="{projects.image}">
        <f:then>          
            <div class="hp_teaser_image">
                <f:if condition="{data.tx_gridelements_columns} == 21"> 
                    <f:render section="ImageBig" arguments="{_all}"/>
                </f:if>
                <f:if condition="{data.tx_gridelements_columns} == 22">
                    <f:render section="ImageHeight" arguments="{_all}"/>
                </f:if>
                <f:if condition="{data.tx_gridelements_columns} == 23">
                    <f:render section="ImageWidth" arguments="{_all}"/> 
                </f:if>
                <f:if condition="{data.tx_gridelements_columns} >= 24">
                    <f:render section="ImageOne" arguments="{_all}"/>
                </f:if>                
            </div>
            
            <f:if condition="{data.header_link}">
                <f:then>
                    <div class="color_{data.layout} color" style="display:none;"></div>
                </f:then>
                <f:else>
                    <div class="color_{data.layout} color" style="display:block;"></div>
                </f:else>
            </f:if> 

            <f:link.typolink parameter="{data.header_link}">
                
                <f:if condition="{data.header_link}">
                    <f:then>
                        <div class="hp_teaser_content" style="display:none;">
                    </f:then>
                    <f:else>
                        <div class="hp_teaser_content" style="display:block;">
                    </f:else>
                </f:if>
                 <f:if condition="{data.header_layout} != 100">
                        <f:if condition="{data.header}">
                            <f:render partial="form2Header" arguments="{
                                      header: data.header,
                                      layout: data.header_layout,
                                      default: defaultHeaderType }" />

                            <f:if condition="{data.subheader}">
                                <f:render partial="form2SubHeader" arguments="{
                                          subheader: data.subheader,
                                          layout: data.header_layout,
                                          default: defaultHeaderType,
                                          tx_gridelements_columns: data.tx_gridelements_columns}" />
                            </f:if>
                        </f:if>
                    </f:if>

                    <f:if condition="{data.bodytext}">
                        <f:format.html>{data.bodytext}</f:format.html>
                    </f:if>
                </div>

            </f:link.typolink>           
        </f:then>

        <f:else>
            <div class="color_{data.layout}" style="display:block;"></div>
            <div class="hp_teaser_content" style="display:block;">
                <f:if condition="{data.header_layout} != 100">
                    <f:if condition="{data.header}">

                        <f:render partial="form2Header" arguments="{
                                  header: data.header,
                                  layout: data.header_layout,
                                  default: defaultHeaderType}" />

                        <f:if condition="{data.subheader}">
                            <f:render partial="form2SubHeader" arguments="{
                                      subheader: data.subheader,
                                      layout: data.header_layout,
                                      default: defaultHeaderType,
                                      tx_gridelements_columns: data.tx_gridelements_columns}" />
                        </f:if>

                    </f:if>
                </f:if>
                <f:format.html>{data.bodytext}</f:format.html>
            </div>
        </f:else>
    </f:if>
        
</html>

Mit dank im voraus
opaque

opaque · 8. November 2016 14:25 · Beste Antwort

Um an die processed Images zu kommen muss der f:image viewhelper so aussehen:

<f:section name="ImageBig">
  <f:for each="{projects}" as="image">
    <f:image image="{image}" class="img-responsive" width="745c" height="745c" />
  </f:for>
</f:section>

nicht src={image} sondern image={image}

und wo entschieden wird welches partial gerendert wird FALLS Bilder vorhanden sind reicht folgende if:condition:

<f:if condition="{projects}">

lg opaque