Rendering components only in the _document.twig template

[Auroraboreali-s]

Hi guys,

Great project. I wonder if you have some toughts on rendering components in different places.

I am trying to see how to tackle the following question:

For example, a CustomComponent is a image component that you can add to a wordpress page. You want this image to be different on every page and you want to place it inside the header instead of the main content. How do you render a component only in the header instead of the main content?

As far as I understand, in the starter theme we have _document.twig main template and then the page.twig which renders the components per page.

In order to render a specific component (CustomComponent) in the header I can do the following inside the _document.twig template:

<header class="mainHeader"> {% block header %} {{ renderComponent('NavigationMain') }} {{ renderComponent('NavigationBurger') }} {{ renderComponent('CustomCompontent') }} {% endblock %} </header>

Works great, the image is being rendered in the header, however if I do that, the CustomComponent is being rendered twice, one in the _document.twig (header) template and also in page.twig (main content) because page.twig template renders all compontents that are available on this specific page:

{% block content %} {% for component in post.meta('pageComponents') %} {{ renderComponent(component) }} {% endfor %} {% endblock %}

Is there any way to exclude this specific component in the page.twig template? so the CustomCompontent will be rendered only once in the header? how would you tackle this?

[timohubois]

Hi @Auroraboreali-s, I solve such as requirements by creating a static component field group at the required pages inside the admin area. Inside the component functions.php you can use the ACFComposer to create a new fieldGroup.

Example:

use ACFComposer\ACFComposer;

add_action('Flynt/afterRegisterComponents', function () {

    ACFComposer::registerFieldGroup([
        'name' => 'optionsBreadcrumb',
        'title' => 'Breadcrumb Options',
        'style' => 'default',
        'menu_order' => 0,
        'fields' => [
            [
                'label' => '',
                'name' => 'pageOptionBreadcrumb',
                'type' => 'group',
                'layout' => 'row',
                'sub_fields' => [
                    FieldVariables\getTheme()
                ]
            ]
        ],
        'location' => [
            [
                [
                    'param' => 'page_type',
                    'operator' => '!=',
                    'value' => 'front_page'
                ]
            ]
        ]
    ]);
});

Hope this helps?

[Auroraboreali-s]

@timohubois Thank you, I wasn't sure how to work this out inside the functions.php of the component, however it brought me an idea to make a headerComponents.php (similar setup to pageComponents.php inside the fieldGroups folder) which enables a new header component section in the admin for all pages and where the CustomCompontent layout is stored. This is then being rendered via _document.twig like so:

{% for component in post.meta('headerComponents') %}  
   {{ renderComponent(component) }}  
{% endfor %}

it seems to be working. I'm not sure if that is correct interpretation of what you described though.

[timohubois]

@Auroraboreali-s I am glad that you have found a solution – with your solution approach, the content manager is very flexible. The way I described is intended rather static components that should be present on each page.

[Auroraboreali-s]

and would this be inside the functions.php of the actual compontent (for example CustomComponent)? I can't process it in my head yet :)

[timohubois]

Yes you need the use my suggestion inside your actual component (CustomComponent) functions.php. After that you can render your custom component in any .twig with {{ renderComponent('CustomComponent') }}. Hope this helps.

[Auroraboreali-s]

Aha! this makes sense now, seems to be working as well, nice! Thanks for the suggestion and a little brainstorming :)