Inject CSS from a Component within a Partial


I just further work on my sidebar setup and have some problems injecting CSS from a component inside a partial to the page.

Lets have a look on the basic setup: This here is the sidebar placeholder within the layout:
{% partial placeholder("sidebar") %}

I prepared several sidebar partials for the different areas of my page.

Within every different page, I push the name of the sidebar partial which I would like to render to the layout:
{% put sidebar = "sidebars/mysidebar" %}

And within the mysidebar, I render my component:

{% component 'myComponent' %}

So far so good, the component is rendering and everything works fine.

The problem comes with addCss() in the component.

It doesnt matter if I use the addCss() method in the component init(), onRun() or the onStart() or onEnd() in the components partials - it does not work since this partial is obviously rendered to late in the renderCycle and the {% styles %} area in the layout is already filled.

It would work with the {% scripts %} area and addJs() if I would need that, since the scripts area is in the end of the template, well… just that’s not what I need.

Now I wonder:
What options do I have to inject a css file at that point or what can I change to the whole sidebar partials idea in order to make this work…

Thanks a lot ^^

EDIT: Honestly :smiley: After a search for like two days and my decision to post here, I find a possible solution like ten minutes later >.<

My solution: I store the partial as a twig variable which I then push from the page to the layout as described here:

So my modifications in the layout:
{% placeholder sidebar %}

and in the page:
{% put sidebar = partial("sidebars/mysidebar") %}

now the addCss() method works in the init() method of the component.

Would be great if one of the October Experts can add his opinion to this solution so I know if this is a good solution, a bad one or if there’s an even better approach so I can mark this problem as solved lateron.

Thanks ^^

Hi @LordRazen

The demo theme handles this using the Resources component: october/image-slice.htm at 3.x · octobercms/october · GitHub