Search code examples
typo3fluidfluid-styled-content

fluidcontent_core: hide headline in customized content elements


I am pretty new to Typo3, Fluid etc. and I can't solve the following problem: I don't want fluidcontent_core to render the headline of my customized content element. Therefore I created a new template with an appropriate layout but the headline gets still rendered. I've been looking for a while now and can't find my mistake. It would be really nice if someone can help me!

I've already added the layoutRootPath and the templateRootPath to the fluidcontetn_core plugin. In the template where the CE is added I render the content with <v:content.render column="1" />

template of the customized content element:

<div xmlns="http://www.w3.org/1999/xhtml" lang="en"
xmlns:f="http://typo3.org/ns/TYPO3/Fluid/ViewHelpers"
xmlns:flux="http://typo3.org/ns/FluidTYPO3/Flux/ViewHelpers"
xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers">

<f:layout name="Content" />

<f:section name="Configuration">
    <flux:form options="{group: 'Carousel'}" id="carousel" label="Carousel">
        <flux:grid>
            <flux:grid.row>
                <flux:grid.column name="Content" label="Carousel Content" />
            </flux:grid.row>
        </flux:grid>
    </flux:form>
</f:section>
<f:section name="Preview">
    <flux:widget.grid />
</f:section>

<f:section name="Main">
    <section class="kundenlist carousel slide frame" id="kundenlist" data-ride="carousel">
        <div class="carousel-inner">
            <flux:content.render area="content" />
        </div>

        <ol class="carousel-indicators visible-xs">
            <li data-target="#kundenlist" data-slide-to="0" class="active"></li>
            <li data-target="#kundenlist" data-slide-to="1"></li>
        </ol>

        <ul class="carousel-navigation hidden-xs">
            <li>
                <a class="left" href="#kundenlist" data-slide="prev">
                    <span class="icon-carousel-prev"></span>
                </a>
            </li>
            <li><span class="js-active-slide">1</span> / 2<!--bei dynamischer Generierung fix reinschreiben--></li>
            <li>
                <a class="right" href="#kundenlist" data-slide="next">
                    <span class="icon-carousel-next"></span>
                </a>
            </li>
        </ul>
    </section>
</f:section>

layout of the customized content element:

{namespace flux=FluidTYPO3\Flux\ViewHelpers}
{namespace v=FluidTYPO3\Vhs\ViewHelpers}

<f:layout name="Content" />
<f:if condition="{settings.content.settings.container.addAnchor}">
    <a name="c{record.uid}"></a>
</f:if>
<v:tag name="{v:variable.get(name: 'settings.container.types.    {record.CType}') -> v:or(alternative: settings.container.types.default)}"
    class="{settings.content.settings.container.className}">
    <f:render section="Main" />
</v:tag>

Solution

  • CE Carousel example:

    <div xmlns="http://www.w3.org/1999/xhtml" lang="en"
    xmlns:f="http://typo3.org/ns/TYPO3/Fluid/ViewHelpers"
    xmlns:flux="http://typo3.org/ns/FluidTYPO3/Flux/ViewHelpers"
    xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers">
    
    <f:layout name="Content" />
    
    <f:section name="Configuration">
        <flux:form options="{group: 'CE'}" id="carousel" label="Carousel">
            <flux:form.section name="carouselsec" label="Carousel">
                <flux:form.object name="carouselobt" label="Add new">
                    <flux:field.file name="image" uploadFolder="uploads/tx_fluidcontent/" label="Upload image" allowed="jpg, jpeg, png, gif"  showThumbnails="1" />
                    <flux:field.input name="link" label="Page link" >
                        <flux:wizard.link />
                    </flux:field.input>
                </flux:form.object>
            </flux:form.section>
        </flux:form>
    </f:section>
    
    <f:section name="Preview">
        <h2>Carousel</h2>
    </f:section>
    
    <f:section name="Main">
        <section class="kundenlist carousel slide frame" id="kundenlist" data-ride="carousel">
            <div class="carousel-inner">
                <ul> <!-- Your Carousel HTML structure -->
                    <f:for each="{carouselsec}" as="carouselList" iteration="Iteration">
                        <li>
                            <f:link.page pageUid="{carouselList.carouselobt.link}">
                                <f:image src="uploads/tx_fluidcontent/{carouselList.carouselobt.image}" width="150c" height="150" alt="carousel" />
                            </f:link.page>
                        </li>
                    </f:for>
                </ul>
            </div>
            <ol class="carousel-indicators visible-xs">
                <f:for each="{carouselsec}" as="carouselList" iteration="Iteration">
                    <li data-target="#kundenlist" data-slide-to="{Iteration.index}" class="<f:if condition='{Iteration.index}==0'>active</f:if>"></li>
                </f:for>
            </ol>
            <ul class="carousel-navigation hidden-xs">
                <li> <a class="left" href="#kundenlist" data-slide="prev"> <span class="icon-carousel-prev"></span> </a> </li>
                <li><span class="js-active-slide">1</span> / 2<!--bei dynamischer Generierung fix reinschreiben--></li>
                <li> <a class="right" href="#kundenlist" data-slide="next"> <span class="icon-carousel-next"></span> </a> </li>
            </ul>
        </section>
    </f:section>
    

    Useful links