Problem with INCLUDEJS and INCLUDECSS

For support and discussion related to templates, themes, and imagesets in phpBB 3.2.
sfzeller
Registered User
Posts: 43
Joined: Mon Dec 11, 2017 9:02 pm

Problem with INCLUDEJS and INCLUDECSS

Post by sfzeller » Tue Jul 30, 2019 4:45 am

Hi all,

I'd like to use a syntax highlighting software (https://highlightjs.org/), but rather as an extension host it myself and referring to it from the OVERALL_FOOTER template. I tried to write the path to both the JS and the CSS relative and absolute, but it does not seem to make any difference. You you please point me to the right direction and tell me what I'm doing wrong?

The forum is here:
http://dynomotion.com/staging/index.php?
and
https://www.dynomotion.com/staging/view ... ?f=4&t=592

and this is what I have in the overall_footer.html:

<!-- INCLUDECSS https://www.dynomotion.com/staging/js/h ... eme/vs.css">

<!-- INCLUDEJS https://www.dynomotion.com/staging/js/h ... ht.pack.js -->
<script>hljs.initHighlightingOnLoad();</script>

User avatar
david63
Registered User
Posts: 16661
Joined: Thu Dec 19, 2002 8:08 am
Location: Lancashire, UK
Name: David Wood
Contact:

Re: Problem with INCLUDEJS and INCLUDECSS

Post by david63 » Tue Jul 30, 2019 6:06 am

If you are creating this as an extension then you need to add the css and js files into your extension. The .js will go in the template folder and the .css will go in the theme folder.

The correct syntax would then be
{% INCLUDEJS '@author_extensionname/my_file.js' %} and
{% INCLUDECSS '@author_extensionname/my_file.css' %}
sfzeller wrote:
Tue Jul 30, 2019 4:45 am
referring to it from the OVERALL_FOOTER template
When using an extension you do not use the overall footer template but an event within that template. Also in phpBB css files go in the header not the footer.
David
Remember: You only know what you know and - you don't know what you don't know!
My CDB Contributions | How to install an extension
I will not be accepting translations for any of my extensions in Github - please post any translations in the appropriate topic.
No support requests via PM or email as they will be ignored

User avatar
Mannix_
Registered User
Posts: 564
Joined: Sun Oct 25, 2015 2:56 pm
Contact:

Re: Problem with INCLUDEJS and INCLUDECSS

Post by Mannix_ » Tue Jul 30, 2019 7:13 am

Have you cleared the cache when you edited the overall_footer file?
-=-=-=-=-=-=-=-=-=-=-=-=-My Styles-=-=-=-=-=-=-=-=-=-=-=-=-
HexagonHexagonRebornCleanSilverProject Durango
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
Want me to port a style to 3.2.x etc. contact me here or on twitter.

User avatar
david63
Registered User
Posts: 16661
Joined: Thu Dec 19, 2002 8:08 am
Location: Lancashire, UK
Name: David Wood
Contact:

Re: Problem with INCLUDEJS and INCLUDECSS

Post by david63 » Tue Jul 30, 2019 7:25 am

Mannix_ wrote:
Tue Jul 30, 2019 7:13 am
Have you cleared the cache when you edited the overall_footer file?
But as an extension it should not be in the overall_footer anyway which is what the OP is appearing to want to do
sfzeller wrote:
Tue Jul 30, 2019 4:45 am
rather as an extension host it myself
David
Remember: You only know what you know and - you don't know what you don't know!
My CDB Contributions | How to install an extension
I will not be accepting translations for any of my extensions in Github - please post any translations in the appropriate topic.
No support requests via PM or email as they will be ignored

sfzeller
Registered User
Posts: 43
Joined: Mon Dec 11, 2017 9:02 pm

Re: Problem with INCLUDEJS and INCLUDECSS

Post by sfzeller » Tue Jul 30, 2019 4:17 pm

Thank you for your replies. I actually wanted to bypass that whole extension thing as I am not a developer, and all that seems rather complicated. All I wanted was that my site refers to one simple .js and one simple .css file - and that would be it.

Not sure though if that is even possible, because why would one need extensions in the first place if it were as simple to accomplish as I had assumed. So my question now would be: can I do what I wanted without an extension?

User avatar
EA117
Registered User
Posts: 1037
Joined: Wed Aug 15, 2018 3:23 am
Contact:

Re: Problem with INCLUDEJS and INCLUDECSS

Post by EA117 » Tue Jul 30, 2019 4:33 pm

sfzeller wrote:
Tue Jul 30, 2019 4:45 am
<!-- INCLUDEJS https://www.dynomotion.com/staging/js/h ... ht.pack.js -->
<script>hljs.initHighlightingOnLoad();</script>
Other than seeing it mentioned as a new keyword available for phpBB 3.1, I'm not familiar with INCLUDEJS. Though it's stated purpose seems straight-forward enough.

What I'm seeing though in the HTML rendered for the example page you linked to is that although the INCLUDECSS seems to have queued the CSS file for inclusion successfully, somehow the INCLUDEJS reference got rendered into "a literal INCLUDEJS HTML element"?
view source on https://www.dynomotion.com/staging/viewtopic.php?f=4&t=592 wrote: <script type="text/javascript" src="./assets/javascript/jquery.min.js?assets_version=54"></script>
<script type="text/javascript" src="./assets/javascript/core.js?assets_version=54"></script>

<INCLUDEJS https://www.dynomotion.com/staging/js/highlight/highlight.pack.js>
<script>hljs.initHighlightingOnLoad();</script>


<script src="./styles/prosilver/template/ajax.js?assets_version=54"></script>
No idea as to the "why"; just saying that's what I'm seeing. I did note the INCLUDECSS example you showed had an unbalanced quote character in it, but the INCLUDECSS directive seemed to work. But maybe make sure there aren't other syntax issues in the header which might have left the parser confused by the time it reached your INCLUDEJS directive.

User avatar
kinerity
Community Team Member
Community Team Member
Posts: 2376
Joined: Mon Sep 01, 2014 1:00 am
Location: sudo rm -rf /
Name: Kailey Truscott
Contact:

Re: Problem with INCLUDEJS and INCLUDECSS

Post by kinerity » Tue Jul 30, 2019 10:43 pm

Why are you against an extension. On top of that, why reinvent the wheel when it's already been done?
Kailey Truscott - Community Team

sfzeller
Registered User
Posts: 43
Joined: Mon Dec 11, 2017 9:02 pm

Re: Problem with INCLUDEJS and INCLUDECSS

Post by sfzeller » Wed Jul 31, 2019 4:38 pm

Hi kinnerty,

I'm not against extensions at all. I am actually using the highlighter you linked to on the live site for 2 years now, but need certain changes in the way it displays code, so I thought I'd try the latest version from highlightjs.org with only the languages I need. I then included the following in my overall_footer.html:

<!-- INCLUDEJS https://www.dynomotion.com/staging/js/h ... ht.pack.js -->
<script>hljs.initHighlightingOnLoad();</script>

But now it does not highlight at all, so I wonder if I just referring to my .js file doe anything at all. Seems there needs to be an additional step to happen when you copy/paste code into a post and hit 'preview' or 'submit' that would actually execute the script.

User avatar
david63
Registered User
Posts: 16661
Joined: Thu Dec 19, 2002 8:08 am
Location: Lancashire, UK
Name: David Wood
Contact:

Re: Problem with INCLUDEJS and INCLUDECSS

Post by david63 » Wed Jul 31, 2019 5:46 pm

INCLUDEJS and INCLUDECSS have a specific syntax are are used in extensions - you cannot add then to a "normal" template.

You started off this topic by saying that you were creating an extension so why are you now trying to mix extension syntax in with core code - it just will never work.
David
Remember: You only know what you know and - you don't know what you don't know!
My CDB Contributions | How to install an extension
I will not be accepting translations for any of my extensions in Github - please post any translations in the appropriate topic.
No support requests via PM or email as they will be ignored

User avatar
EA117
Registered User
Posts: 1037
Joined: Wed Aug 15, 2018 3:23 am
Contact:

Re: Problem with INCLUDEJS and INCLUDECSS

Post by EA117 » Wed Jul 31, 2019 6:02 pm

sfzeller wrote:
Wed Jul 31, 2019 4:38 pm
I then included the following in my overall_footer.html:
Indeed, presuming you're talking about a style's overall_header.html and overall_footer.html, you don't need to use INCLUDEJS and INCLUDECSS. You can just put normal HTML in those templates, such as a <link> reference up in <head>, and a <script> reference at the end of <body> to load an execute the script you want.

It's then "tied to the style" since you've made the change in a specific style's templates, and these changes won't be "injected no matter which style you have selected" like an extension would be able to do. But using a style's templates, this is how you're expected to be able to add additional CSS and JavaScript, and you should expect success when doing it.

User avatar
3Di
Former Team Member
Posts: 14347
Joined: Mon Apr 04, 2005 11:09 pm
Location: Milan (IT) Frankfurt (DE)
Name: Marco
Contact:

Re: Problem with INCLUDEJS and INCLUDECSS

Post by 3Di » Wed Jul 31, 2019 6:25 pm

sfzeller wrote:
Wed Jul 31, 2019 4:38 pm
I am actually using the highlighter you linked to on the live site for 2 years now, but need certain changes in the way it displays code, so I thought I'd try the latest version from highlightjs.org with only the languages I need. I then included the following in my overall_footer.html:

<!-- INCLUDEJS https://www.dynomotion.com/staging/js/h ... ht.pack.js -->
<script>hljs.initHighlightingOnLoad();</script>

But now it does not highlight at all, so I wonder if I just referring to my .js file doe anything at all. Seems there needs to be an additional step to happen when you copy/paste code into a post and hit 'preview' or 'submit' that would actually execute the script.
You can indeed use INCLUDEJS in overall_footer.html, just take a note that the template engine searchs within the template folders, example:

1 - save your JS as https://www.dynomotion.com/styles/prosilver/template/highlight.pack.js

2 - open the overal_footer.html file and after

Code: Select all

<!-- IF S_PLUPLOAD --><!-- INCLUDE plupload.html --><!-- ENDIF -->
{$SCRIPTS}
on a new line ADD

Code: Select all

<!-- INCLUDEJS highlight.pack.js -->
<script>hljs.initHighlightingOnLoad();</script>
Purge the cache in ACP, even better delete the production folder located therein.. et voilat.

Same applies for the CSS, but in overall_header and should be saved in the
https://www.dynomotion.com/styles/prosilver/theme/vs.cssfolder

there you should find the line
{$STYLESHEETS}
and after ADD your direct INCLUDECSS
<!-- INCLUDECSS vs.css -->

You will see in the console they will be included.

Written on the fly ;)
Please PM me only to request paid works. Thx.
Want to compensate me for my interest? Donate
My development's activity º PhpStorm's proud user
Extensions, Scripts, MOD porting, Update/Upgrades
👨‍🏫 | Take a tour to | The Studio | 👨‍🏫

sfzeller
Registered User
Posts: 43
Joined: Mon Dec 11, 2017 9:02 pm

Re: Problem with INCLUDEJS and INCLUDECSS

Post by sfzeller » Wed Jul 31, 2019 7:48 pm

Thank all of you a lot for your time, except for a few minor things it seems to be working!

User avatar
EA117
Registered User
Posts: 1037
Joined: Wed Aug 15, 2018 3:23 am
Contact:

Re: Problem with INCLUDEJS and INCLUDECSS

Post by EA117 » Wed Jul 31, 2019 8:23 pm

For what it's worth, right at this moment when I'm looking at the linked example page, agree that the JavaScript reference from overall_footer.html now looks correct.

I don't know what minor things you're saying might still not work correctly, but it doesn't appear as though there is any highlight-specific stylesheet linked from your overall_header.html. e.g. Per https://highlightjs.org/usage/ I might have expected to see at least default.css linked there; even if not the previous vs.css you were successfully linking before now.

sfzeller
Registered User
Posts: 43
Joined: Mon Dec 11, 2017 9:02 pm

Re: Problem with INCLUDEJS and INCLUDECSS

Post by sfzeller » Thu Aug 01, 2019 8:21 pm

Well, the overall_header calls a bunch of css files, and I modified one existing one (https://www.dynomotion.com/staging/styl ... common.css) to include (at the very bottom) all my posting/forum styles ;-)

One of the strange things I still need to fix is that now for some reason the "Select all" button lost its functionality - I have no idea why...

sfzeller
Registered User
Posts: 43
Joined: Mon Dec 11, 2017 9:02 pm

Re: Problem with INCLUDEJS and INCLUDECSS

Post by sfzeller » Thu Aug 01, 2019 9:25 pm

According to an old post from 2011:
viewtopic.php?f=46&t=2115780
the code governing behavior for "select all" is here, starting at line 146:
https://www.dynomotion.com/staging/styl ... orum_fn.js
search for: function selectCode(a)

This file has never been modified, but the introduction of:
<script>hljs.initHighlightingOnLoad();</script>
in the overall_footer.html is new and might conflict with the select all function. Can this be the case?

Post Reply

Return to “[3.2.x] Styles Support & Discussion”