Pass fusion component to html

Using Neos & Flow
1

Hi, I’m trying to use one of my fusion components in the HTML code of a gallery plugin.

I am loading the mixins as supertypes in the yaml file.

# NodeTypes.Gallery.yaml
'DL.Gallery:Gallery':
  superTypes:
    'Neos.Neos:Content': true
    'WG.BaseSite:Mixin.Backgroundcolor': true
    'WG.BaseSite:Mixin.Headlines': true

Normally, I would add this tag <WG.BaseSite:Component.Headlines /> to my fusion code and I’m done. But now I have to pass it to the HTML of my custom theme. (For the background color it worked great because it only uses configurations and no rendering.)

# WGGalleryTheme.fusion
prototype(WG.BaseSite:DL.Gallery.Themes.WGGalleryTheme) < prototype(DL.Gallery:Themes.AbstractTheme) {
    templatePath = ${'resource://WG.Basesite/Private/Fusion/PluginOverwrites/DL.Gallery/Resources/Private/Fusion/Themes/WGGalleryTheme/WGGalleryTheme.html'}

    background = ${q(node).property('color')}

    // <WG.BaseSite:Component.Headlines />
}

# WGGalleryTheme.html
{namespace g = DL\Gallery\ViewHelpers}
{namespace media=Neos\Media\ViewHelpers}

<section class="content-wrapper {background}" >
    {backendError -> f:format.raw()}
    <div class="grid-container">
        <div class="headline-wrapper grid-x grid-padding-x grid-margin-x grid-margin-y">
            <div class="cell">
                <!-- headlines -->
            </div>
        </div>
        <div class="grid-x grid-margin-x grid-padding-x grid-padding-y">
            <div class="cell">
                <div {attributes -> f:format.raw()}>
                    <f:if condition="{imagesSelected}">
                        <div class="dl-gallery" itemscope itemtype="http://schema.org/ImageGallery">
                            <div class="dl-gallery wg-gallery">
                                <g:gallery galleryNode="{node}">
                                    <figure>
                                        <div {figureAttributes -> f:format.raw()}>
                                            <a href="{g:imageData(image:image, theme:selectedTheme, imageVariant:'large', key:'src')}" itemprop="contentUrl" data-size="{g:imageData(image:image, theme:selectedTheme, imageVariant:'large', key:'width')}x{g:imageData(image:image, theme:selectedTheme, imageVariant:'large', key:'height')}">
                                                <g:image image="{image}" theme="{selectedTheme}" imageVariant="thumb" additionalAttributes="{itemprop: 'thumbnail'}" async="true"/>
                                            </a>
                                        </div>
                                        <figcaption itemprop="caption" class="image_copyright">{g:imageData(image:image, theme:selectedTheme, imageVariant:'large', key:'caption')}</figcaption>
                                    </figure>
                                </g:gallery>
                            </div>
                        </div>
                    </f:if>
                </div>
            </div>
        </div>
    </div>
</section>

I hope somebody could tell me how to get this done :slight_smile:

Thanks

2

Hi @jjuliannnnnnnn,

to do this, add a variable in fusion, that can be used in your template:

headlines = WG.BaseSite:Component.Headlines

Then, render those headlines in your template:

{namespace fusion=Neos\Fusion\ViewHelpers}
...
<ts:render path="headlines" />

Besides that:
Using HTML templates is the old way. In newer versions of Neos, mostly afx is used (see GitHub: Neos.Fusion.Afx).