<!-- RESOURCE --> template tag

[Arty]

edit: abandoned and moved from RFC to discussion.

This RFC requires merge of [RFC] Merge style components

Introduction
With style components separation gone, it might be a good idea to apply template inheritance to everything: templates, css files, javascript. I suggest to add new template instruction: <!-- RESOURCE filename -->

It takes only one parameter: name of file. It might be string, it might be template variable:

Code: Select all

<!-- RESOURCE 'template/mystuff.js' -->
<!-- RESOURCE IMG_LOGO -->

Template checks if file exists, outputs its file name. If it doesn't exist and style has a parent style, it outputs file name for parent style.

Sample output:

Code: Select all

./styles/whatever/template/mystuff.js
./styles/whatever/theme/images/logo.png

Advantages

• Allows to apply template inheritance to everything
• No need for variables like S_SUPER_TEMPLATE_PATH to include scripts: if script exists in current style, it will be included. If it doesn't exist, script from parent style will be included

Possible addition
Instead of one parameter, it could take several parameters, separated by spaces. Then all parameters would be merged into one big string before checking for file name. That would allow mixing strings and template variables, like

Code: Select all

<!-- RESOURCE 'images/' forumrow.FORUM_IMAGE '.png' -->

that will result in

Code: Select all

$resource = 'images/' . $_forumrow_val['FORUM_IMAGE'] . '.png';

and then checked against existing files and prepended './styles/whatever/' before echoing file name.

[MichaelC]

EDIT: Doesn't matter, I mis-read this.

Now, I'm not really sure of why this would be helpful, can you show an example use-case?

[Arty]

Now, I'm not really sure of why this would be helpful, can you show an example use-case?

Including javascript and css files.

Currently to use template inheritance for javascript files, instead of T_TEMPLATE_PATH templates should use T_SUPER_TEMPLATE_PATH, like this:

Code: Select all

<script src="{T_SUPER_TEMPLATE_PATH}/editor.js" />

If style author would want to include editor.js in his style, he has to change it to

Code: Select all

<script src="{T_TEMPLATE_PATH}/editor.js" />

Same could be applied to theme, except that there is no T_SUPER_THEME_PATH variable, so template inheritance can't be used for CSS files.

With "resource" tag template could use

Code: Select all

<script src="<!-- RESOURCE 'template/editor.js' -->" />

then phpBB will look for template/editor.js in current style and if it doesn't exist, it will link to template/editor.js in its parent style.

This tag makes it possible to use template inheritance for js and css files.

[callumacrae]

What we *could* use is something to automatically include the script in the footer. Eg:

Code: Select all

<!-- SCRIPT 'template/editor.js' -->

Would include the script after jQuery.

[brunoais]

What we *could* use is something to automatically include the script in the footer. Eg:

Code: Select all

<!-- SCRIPT 'template/editor.js' -->

Would include the script after jQuery.

Hum... Pushing too much to the bottom will force the page to take longer to load. Ppl could get upset because all the page is there but everything that uses js is still not working. Also, if you place all that at the bottom of the page you cannot use the advantage of DOMContentLoaded properly. Images take way longer to load than the js files. With all the avatars in a single page (think the bigger avatars (in file size)) js may only start loading 1 or even 2 seconds after the page is loaded. Hum... I'm getting too much into that topic again.

[callumacrae]

What we *could* use is something to automatically include the script in the footer. Eg:

Code: Select all

<!-- SCRIPT 'template/editor.js' -->

Would include the script after jQuery.

Hum... Pushing too much to the bottom will force the page to take longer to load. Ppl could get upset because all the page is there but everything that uses js is still not working. Also, if you place all that at the bottom of the page you cannot use the advantage of DOMContentLoaded properly. Images take way longer to load than the js files. With all the avatars in a single page (think the bigger avatars (in file size)) js may only start loading 1 or even 2 seconds after the page is loaded. Hum... I'm getting too much into that topic again.

…either you have a blank page for a few seconds, or a page that you can't use the JavaScript of for a few seconds. I know which I would prefer. Images are asynchronous.

[Arty]

How about this?

Code: Select all

<!-- BEGINSCRIPT -->
<script src="<!-- RESOURCE 'template/editor.js' -->"></script>
<script>
Some inline script here
</script>
<!-- ENDSCRIPT -->

All data between those tags will be buffered, then in overall_footer.html before </body> another command:

Code: Select all

<!-- SCRIPTS -->
</body>
</html>

that will echo buffered data.

If for some reason script must be included in middle of file, for example, if script is badly coded and it writes something with document.write() or if its some counter or ads, script can be included usual way without <!-- BEGINSCRIPT --> and <!-- ENDSCRIPT -->, so it won't be buffered.

[Arty]

Also, alternative suggestion for resource tag: instead of using tag, catch all entries of {T_STYLE_PATH}, like this:

Code: Select all

<img src="{T_STYLE_PATH}/images/logo.png" />

template system on finding {T_STYLE_PATH} will grab all data from } to next " or ' (in this case "/images/logo.png"), locate file based on styles tree and output path to it. Path will be hardcoded on compilation to avoid checking for files on every page load.

Example of current compiled code:

Code: Select all

<img src="<?php echo (isset($_rootref['T_STYLE_PATH'])) ? $_rootref['T_STYLE_PATH'] : ''; ?>/images/logo.png" />

Example of what it will look like:

Code: Select all

<img src="<?php ob_start(); ?>/images/logo.png<?php $link = ob_end_clean(); echo $this->locate_resource($link); ?>" />

Function locate_resource() will check for files that match $link in styles tree, if not found it will echo "styles/current_style_path" + $link.

For style authors it will look like usual template variable, so they won't get confused with even more style tags, but it will behave differently.

[brunoais]

…either you have a blank page for a few seconds, or a page that you can't use the JavaScript of for a few seconds. I know which I would prefer. Images are asynchronous.

The option you forgot. Deferring execution of js and place its tags in the head.

...
Example of what it will look like:

Code: Select all

<img src="<?php ob_start(); ?>/images/logo.png<?php $link = ob_end_clean(); echo $this->locate_resource($link); ?>" />

Function locate_resource() will check for files that match $link in styles tree, if not found it will echo "styles/current_style_path" + $link.

For style authors it will look like usual template variable, so they won't get confused with even more style tags, but it will behave differently.

I like your alternative. Anyway, you don't need ob_* for that: We can translate that to something like:
before:

Code: Select all

<img src="{T_STYLE_PATH}/images/logo.png" />

After:

Code: Select all

<img src="<?php echo $this->locate_resource('/images/logo.png')?>"  />

That code is much simpler to execute. Believe me. This option can take a little more resources to process and create that php code than your way. Anyway, it is faster to execute and I believe that the execution part is the one that really matters and not so much the caching of the template.

[Arty]

No, ob_ stuff is there for a reason: to allow use of template variables. For example:

Code: Select all

<img src="{T_STYLE_PATH}/theme/images/folder_{topicrow.FOLDER_TYPE}.png" />

edit:
Actually, never mind ob_ stuff. With it files have to be located during template execution. Without it files can be located during template compilation, reducing resources usage.