Getting template ID (not page/post ID)

Developers
,
1

I am using a template, type=“section”.
This template (html-snippet) will be rendered using a javascript function or Ajax, etc…
As I do not want to render the whole page (or “single” template), I need to include the used CSS (and maybe javascript/code elements too).
I can do this using something like this:

	$template_data = \Bricks\Element_Template::get_builder_call_additional_data( $template_id );
	$inline_css = $template_data['css'];

BUT: How I can get the $template_ID of the currently rendered template?

The page_ID is not helping, also I can not use \Bricks\Templates::get_templates_by_type( [‘section’]) as I am not on page level.

Annotation:
Sometimes you nest templates inside of a template.
In those cases, you would need to include the CSS content for each used child template (and maybe the CSS of the parent template). Therefore each template would need to have a code field to render the CSS (based on the retrieved current template ID)

2

@charaf, @timmse, pls can you give an advice here?
How can I get the template ID inside of any used single template (or an array of used templates inside another template)?

Was trying today different options, but again without success.
Thought this should be simple, but seems not to be the case…
Thanks in advance.

3

Hi @Jochen ,

I am sorry that don’t understand what you mean from your first post.
Do you mean you are trying to retrieve the section template HTML and CSS?

Don’t you already have the section template ID?

Is [bricks_template id="xxx"] shortcode able to fulfill your requirement?

You can also get some generated CSS from \Bricks\Assets::$inline_css_dynamic_data or \Bricks\Assets::$inline_css

You could get the rendered template IDs via \Bricks\Templates::$rendered_template_ids_on_page

Please note that the dev team might change these static variables in any future version as they are not meant for public usage.

Regards,
Jenn

4

Little side question after reading @itchycode comment :grimacing:

I used \Bricks\Assets::$inline_css in the past to get CSS produced inside a Bricks template rendered in a shortcode, but I wasn’t aware of the other inline_css_dynamic_data .

What CSS inline_css_dynamic_data contains ?
In which scenario is populated ?
How does it differ from inline_css ?

Jacopo

5

Hi @tresorama ,

When the user uses dynamic tags on CSS like background-image, border-color.
Looping template might add that as well.

6

Interesting! Thanks @itchycode

7

Hi @itchycode.
Tomorrow I am on a business trip and can check back (most likely) next week.
Really, thanks for your effort, I value this.
Sorry if the answer is a little bit longer…

I guess, this is a conceptual or design limitation of Bricksbuilder, I hope they will fix this with the new components…

Let me first of all explain in a more detailed way:

  • If you use swup.js anything inside the #swup container will be transitioned to another page (but it can be any other javascript framework).
  • This #swup container can be everywhere on the page - so, it is created below “main”.
  • Therefore #swup-div does not include any inline CSS, which is a must-have.
  • The CSS must cover all inserted Bricks-elements, regardless if directly inserted or especially inserted via template elements.
  • To make my workflow easier, typically I use nested sub-templates to create “html-blocks”, so I do not need to touch other parts of the page again and be flexible.
    Therefore, often I use different templates inside of a single template - in this case below the #swup-container.

The overall structure could look like this:

html
  head
   section-template #nav_header
  body
    main
      section
        #top_element
        #swup div
          ** section-template #id123 tpl_a    **** on this level I need all 3 template CSS
            ** section-template #id456 tpl_a1
            ** section-template #id789 tpl_a2
        #any_other element
      footer-template #footer

Bricks will auto-generate the inline-CSS inside of the head.
But this will not help me, I need the inline-CSS below the #swup div (marked with **)

Now I have two options:
a) create for each template the inline-CSS (so in each template I put a code block) OR
b) generate all inline-CSS (tpl_a1, tpl_a2 and tpl_a) below the #swup container (so only one code block in the parent template)

To make it very simple:
Please create yourself 2 child-templates (with only a styled div) and put both inside a parent template (maybe next to each other in a grid).
Now create the inline CSS for all these 3 templates and print it out inside of each template or alternatively together in the parent template.
You should now see 3 different CSS: /* TEMPLATE SHORTCODE CSS (ID: xxx) */
Is this possible for you, if so how you did this?

Of course, I tried also, but to answer your question:
[bricks_template id=“xxx”] does in this case not help, as it will not create the CSS inside the template.
I created the above-mentioned 2 child + 1 parent template, but it will not generate all the needed output:
\Bricks\Assets::$inline_css_dynamic_data → yes, gives the CSS, but sometimes 1 CSS sometimes 2 CSS (seems, it loops and appends the next CSS) - so (from my point of view) not a secure way to use, in addition the parent CSS is missing
\Bricks\Assets::$inline_css → array with the elements and the CSS but it is called: template_12345, so -again- I need the template ID, in addition: it appends the template CSS as well

Again, to avoid all this, I ONLY need the template ID.
INSIDE of each template, I would like to put a PHP script to get the ID + the related CSS)…
But how this is possible?

If I am putting the template ID manually all is fine, but this would be anachronistic…