How exactly, do we use asset registering?
Permalink
I'm building a theme using Bootstrap and jQuery in 5.7.2.1. So far so good-ish, my theme is mostly done, but when I remove my hard-coded links to these resources, my whole theme breaks.
I figured I could ask C5 to provide the necessary files using the registerAssets function, but no matter what I do, I can't seem to get it to work.
My theme is called theme_lavalla2 (as it's an overhaul of a c5.6 theme) and my page_theme.php begins like so:
(N.B. this isn't the whole file, but the rest of the file is the same as the Elemental theme)
But when I reload my page, I don't get jQuery, but I do get font-awesome and the other CSS files -- just no Bootstrap or jQuery
Am I missing something here? Do I need to do something else in order for C5 to serve up a copy of Bootstrap for my theme, or do I still need to provide my own resources and let C5 know I'm using them by the "providesAsset" function?
I figured I could ask C5 to provide the necessary files using the registerAssets function, but no matter what I do, I can't seem to get it to work.
My theme is called theme_lavalla2 (as it's an overhaul of a c5.6 theme) and my page_theme.php begins like so:
<?php namespace Concrete\Theme\ThemeLavalla2; class PageTheme extends \Concrete\Core\Page\Theme\Theme { public function registerAssets() { //$this->providesAsset('javascript', 'bootstrap'); $this->requireAsset('css', 'bootstrap3'); $this->providesAsset('css', 'blocks/form'); $this->providesAsset('css', 'blocks/social_links'); $this->providesAsset('css', 'blocks/share_this_page'); $this->providesAsset('css', 'blocks/feature'); $this->providesAsset('css', 'blocks/testimonial'); $this->providesAsset('css', 'blocks/date_navigation'); $this->providesAsset('css', 'blocks/topic_list'); $this->providesAsset('css', 'blocks/faq'); $this->providesAsset('css', 'blocks/tags');
Viewing 15 lines of 21 lines. View entire code block.
(N.B. this isn't the whole file, but the rest of the file is the same as the Elemental theme)
But when I reload my page, I don't get jQuery, but I do get font-awesome and the other CSS files -- just no Bootstrap or jQuery
Am I missing something here? Do I need to do something else in order for C5 to serve up a copy of Bootstrap for my theme, or do I still need to provide my own resources and let C5 know I'm using them by the "providesAsset" function?
And how'd you manage to get C5 to require the assets (e.g. use C5's version of Bootstrap, jQuery etc.)? That's the main problem I'm having, as page_theme.php seems to do nothing when I call requireAsset.
Hmm – that's interesting. That code to me looks like it should be including jQuery properly. Would you be able to post your theme?
Hi Andrew, I can do that. Right now I think I've made a breakthrough of sorts.
I opened the page_theme file and mashed the keyboard to cause a syntax error and see if C5 was actually loading the file. Turns out it wasn't, so I switched themes, uninstalled mine, reinstalled then switched back. Now it loads the file correctly, but now I get. I saw on the forums to clear the cache in order to overcome that error, but so far, nothing.
The theme is here:https://github.com/Grayda/theme_lavalla2.... It's still a WIP, so expect bugs and other stuff that doesn't quite look right.
I opened the page_theme file and mashed the keyboard to cause a syntax error and see if C5 was actually loading the file. Turns out it wasn't, so I switched themes, uninstalled mine, reinstalled then switched back. Now it loads the file correctly, but now I get
Cannot redeclare class Concrete\Theme\ThemeLavalla2\PageThemeThe theme is here:https://github.com/Grayda/theme_lavalla2.... It's still a WIP, so expect bugs and other stuff that doesn't quite look right.
I think you may want to make the namespace Application\Theme\ThemeLavalla2 instead of Concrete\Theme\ThemeLavalla2 – and make sure it's in the application/themes/ directory and that your overrides caching is turned off on the Cache & Speed Settings page.
Thanks for that. jQuery is now loading correctly, but bootstrap isn't. I've had a look in Concrete > Config > app.php and made sure that I'm calling the right asset. I've even copied and pasted the Elemental page_theme.php and changed it from "providesAsset" to "requireAsset" but with no luck.
I've tried requesting "bootstrap/*", "bootstrap/" and "bootstrap", but to no avail.
I'm sure I'll get there eventually, but this new assets system is a tiny bit frustrating!
EDIT: I think "bootstrap" is C5's modified Bootstrap, not the same Bootstrap you'd download from getbootstrap.com. It'd be nice to perhaps split that up so you can call either C5's bootstrap, or a fresh, unmodified version. As it stands, I've told my C5 install to expect me to use my own Bootstrap. Right now everything works, except when I'm logged in. Then my dropdown menus don't work. Rather strange, but I'm investigating still..
I've tried requesting "bootstrap/*", "bootstrap/" and "bootstrap", but to no avail.
I'm sure I'll get there eventually, but this new assets system is a tiny bit frustrating!
EDIT: I think "bootstrap" is C5's modified Bootstrap, not the same Bootstrap you'd download from getbootstrap.com. It'd be nice to perhaps split that up so you can call either C5's bootstrap, or a fresh, unmodified version. As it stands, I've told my C5 install to expect me to use my own Bootstrap. Right now everything works, except when I'm logged in. Then my dropdown menus don't work. Rather strange, but I'm investigating still..
Hey Grayda, any luck with the investigation? im running into the same issue with bootstrap (unmodified bootstrap not showing dropdown menus)
also, andrew, is the above suggestion from grayda a feature we can expect in the future?
also, andrew, is the above suggestion from grayda a feature we can expect in the future?
I always just "provide" bootstrap with the theme (the css and the js) so I have more control over which version/modifications I am using.
In the page_theme.php just register bootstrap's css and js as provided by the theme like:
Then simply load the Bootstrap css in the header and the js in the footer like usual.
In header:
In footer:
In the page_theme.php just register bootstrap's css and js as provided by the theme like:
public function registerAssets() { //providesAsset = loaded ('provided') by the theme //requireAsset = not loaded in the theme. Needs to be loaded by C5 $this->providesAsset('javascript', 'bootstrap/*'); $this->providesAsset('css', 'bootstrap/*'); $this->requireAsset('javascript', 'jquery'); }
Then simply load the Bootstrap css in the header and the js in the footer like usual.
In header:
<link href="<?php echo $view->getThemePath()?>/css/bootstrap.css" rel='stylesheet' type='text/css'>
In footer:
<script src="<?php echo $view->getThemePath()?>/js/bootstrap.min.js" type="text/javascript"></script>
Hi, Thanks to all for advice in this thread, especially how to use your own version of Bootstrap.
That said, I am still having similar issues with registering assets.
I finally got the site to display, as it was not even acknowledging any javascript and displayed a blank screen for the longest time, but its displaying now but there is a definite issue with how it looks on the front end as well as the ability to add blocks is not working. When you click on the edit mode pencil icon, nothing happens.
There are so many scripts on this site (not my idea, but the client's) that I am not sure which are conflicting with Concrete5.
Here is the code in my page_theme.php
and I've attached a screen shot of how it looks in edit mode and here is how it should look and function:http://nis-foundation.org/new/
How do I get edit mode to work properly and the site to work as it did in the static HTML version?
Thanks,
- Sherri
That said, I am still having similar issues with registering assets.
I finally got the site to display, as it was not even acknowledging any javascript and displayed a blank screen for the longest time, but its displaying now but there is a definite issue with how it looks on the front end as well as the ability to add blocks is not working. When you click on the edit mode pencil icon, nothing happens.
There are so many scripts on this site (not my idea, but the client's) that I am not sure which are conflicting with Concrete5.
Here is the code in my page_theme.php
<?php namespace Application\Theme\NIS2015; class PageTheme extends \Concrete\Core\Page\Theme\Theme { public function registerAssets() { $this->providesAsset('css', 'bootstrap'); $this->requireAsset('javascript', 'jquery'); $this->providesAsset('javascript', 'bootstrap'); $this->providesAsset('javascript', 'slicknav'); $this->providesAsset('javascript', 'queryloader2'); $this->providesAsset('javascript', 'parallax'); $this->providesAsset('javascript', 'flexslider'); $this->providesAsset('javascript', 'scrollTo'); $this->providesAsset('javascript', 'nav'); $this->providesAsset('javascript', 'sticky');
Viewing 15 lines of 24 lines. View entire code block.
and I've attached a screen shot of how it looks in edit mode and here is how it should look and function:http://nis-foundation.org/new/
How do I get edit mode to work properly and the site to work as it did in the static HTML version?
Thanks,
- Sherri
Looking in the JavaScript console when visiting the site, it looks like there's a javascript error with the jquery.scrollTo library provided by the theme. I would try commenting that out in the source of the theme, and disabling any javascript that calls it, and see if that helps make things work. It's possible there's some kind of incompatibility between this file and a javascript included by concrete5.
Sorry, if that was confusing but the link that I sent (and which you viewed) was not a Concrete5 site, it was an example of the static page that I created in which to make the Concrete5 theme.
The link to the Concrete5.7 site is:http://nis-foundation.org/beta/...
I also tried making the site in a Concrete5.6 version (http://nis-foundation.org/beta2),... which actually looks better on the front end but the edit blocks (ccm-highlighter) don't work at all, don't even get activated when in edit mode. I posted in the 5.6 forums about it.
I don't care which version of Concrete5 I have to use to get this to work, but as this is my first try with 5.7 it was interesting to see the differences between the two interfaces. That said, in 5.6 you can add the theme-dependent scripts in the footer and add a php function to disable them in edit mode. Is this possible within 5.7?
The link to the Concrete5.7 site is:http://nis-foundation.org/beta/...
I also tried making the site in a Concrete5.6 version (http://nis-foundation.org/beta2),... which actually looks better on the front end but the edit blocks (ccm-highlighter) don't work at all, don't even get activated when in edit mode. I posted in the 5.6 forums about it.
I don't care which version of Concrete5 I have to use to get this to work, but as this is my first try with 5.7 it was interesting to see the differences between the two interfaces. That said, in 5.6 you can add the theme-dependent scripts in the footer and add a php function to disable them in edit mode. Is this possible within 5.7?
I ended up getting the 5.6 version of the site to work, by disabling one of the theme's javascripts, and adding a bit of edit mode CSS.
I am not going to pursue 5.7 for this particular site, but it was educational to see how the scripts are handled. It makes it difficult to think of all the work that would be necessary to convert my pre-5.7 sites.
Thanks for looking into it, Andrew.
I am not going to pursue 5.7 for this particular site, but it was educational to see how the scripts are handled. It makes it difficult to think of all the work that would be necessary to convert my pre-5.7 sites.
Thanks for looking into it, Andrew.
After getting it wrong myself and reading some if the comments here, I am starting to wonder if maybe there isn't a misunderstanding concerning what providesAsset() actually does.
let's say I have
What it will do is tell the system "don't load font-awesome, I am already loading my own version"
It will NOT load anything for you. You MUST load font-awesome yourself independently either by hard-coding it in your theme or using a addHeaderItem or addFooterItem in your controller or any way you choose.
let's say I have
$this->providesAsset('css', 'font-awesome');
What it will do is tell the system "don't load font-awesome, I am already loading my own version"
It will NOT load anything for you. You MUST load font-awesome yourself independently either by hard-coding it in your theme or using a addHeaderItem or addFooterItem in your controller or any way you choose.
This is exactly correct...
Also be sure to have your page_theme.php in place before installing the theme - if not it will not load!
I have seen a lot of confused topics about this and your answer should make it clear to a lot of people.
Also be sure to have your page_theme.php in place before installing the theme - if not it will not load!
I have seen a lot of confused topics about this and your answer should make it clear to a lot of people.
Correct.
I thought I made this clear in my comment over a month ago.
I thought I made this clear in my comment over a month ago.
@ChannelMarkerMedia
Same storry - did not see your post sorry...
Same storry - did not see your post sorry...
@maar: my reaction to a lot of new things 5.7 can do is: this stuff is not working, how can it be so buggy. And then, when I finally get it: this is awesome!!!!!!!!
@channelMarkerMedia: you are absolutely correct, sorry I didn't see it. I don't know if you noticed but if you look at all the comments on this topic, from this post and others, nobody actually ever says so. I only found one comment from Andrew on another post and yours here actually explaining that the asset needed to be loaded separately. It's not even that clear in the developers' doc so I thought it was worth spelling out again :)
@channelMarkerMedia: you are absolutely correct, sorry I didn't see it. I don't know if you noticed but if you look at all the comments on this topic, from this post and others, nobody actually ever says so. I only found one comment from Andrew on another post and yours here actually explaining that the asset needed to be loaded separately. It's not even that clear in the developers' doc so I thought it was worth spelling out again :)
@mnakalay
Theme building is one thing, and as you say, when you see the light then - awesome!!!!
I have build a few themes now, and still learning. One of the things that still is difficult is when the theme is almost finished. Then you also want to add the css classes to areas and blocks. Here I have a lot of thoughts about what would be the correct way for one theme and not a good idea for another. But the flexibility is awesome...
Making packages with new functionality is defiantly another thing. We just made our first add-on for 5.7 and it is fairly simply (why it's free in the marketplace). But I still have a lot to learn because the difference between 5.6 and 5.7 is huge. But I think we are coming along alright.
But the right word is "awesome". I am predicting a very interesting future...
Theme building is one thing, and as you say, when you see the light then - awesome!!!!
I have build a few themes now, and still learning. One of the things that still is difficult is when the theme is almost finished. Then you also want to add the css classes to areas and blocks. Here I have a lot of thoughts about what would be the correct way for one theme and not a good idea for another. But the flexibility is awesome...
Making packages with new functionality is defiantly another thing. We just made our first add-on for 5.7 and it is fairly simply (why it's free in the marketplace). But I still have a lot to learn because the difference between 5.6 and 5.7 is huge. But I think we are coming along alright.
But the right word is "awesome". I am predicting a very interesting future...
https://www.concrete5.org/community/forums/5-7-discussion/how-does-a...