So I’ve been altering a theme to match what my project requires, but for some reason, the page won’t load the js scripts. It loads the image until I added the “{{asset ’ '}}” I’ve referred to the asset help guide but still had no luck
I’m using the latest version of ghost, here are some screenshots of how things are setup
Chrome Log
JS File Reference
Image reference
Location in the directory (The Red Square Show the files that are being used)
Any help would be appreciated.
{{asset}} helper points to the theme’s asstes folder. So your code will be like this.
<script type="text/javascript" src="{{asset 'js/firefly.js'}}"></script>
also for jQuery, as you are using CDN, you do not need {{asset}} helper.
Directly use the URL
<script src="https://code.jquery.com/1.11.2/jquery.min.js"></script>
See the doc for {{asset}} helper
So I’ve updated the code from
<src type="text/javascript" src="{{asset 'https://code.jquery.com/jquery-1.11.2.min.js'}}"></script>
<script type="text/javascript" src="{{asset 'js/content/themes/casper/assets/js/firefly.js'}}"></script>
<script type="text/javascript" src="{{asset 'js/content/themes/casper/assets/js/main.js'}}"></script>
To
<src type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="{{asset 'js/firefly.js'}}"></script>
<script type="text/javascript" src="{{asset '/js/main.js'}}"></script>
But the resources still are not being loaded.
Code looks fine except no need of that forward slash at the beggining of path in the last line of code. It should be
<script type="text/javascript" src="{{asset 'js/main.js'}}"></script>
What exact error you are seeing in console after updating the code?
It looks like other files trying to use jQuery before it fully loaded.
Do you adding your scripts within <head> tag?
Move all the javascript at the end of site before closing body tag </body}> . It is the best practice.
Also make sure you adding jQuery before other javascript file.
So back to the same issue, when I uploaded the theme, The Image stopped working.
<img src="{{asset "images/downarrow1.png"}}" class="site-page-scroll" alt="down" /></a></li>
I’ve created an images folder within the asset folder, which is what it’s linking back to.
I’m really unsure of what could be causing this. In the console, it says it cannon find the resource.
Any Ideas?
The code is looking fine and it should load the image. in your code there is </a></li> at the end. there is no beginning of those tag in your code above. I assume those are in your file, you just don’t shown here. Although it should not cause any effect in image loading.
In console, do you see 404 error?
If you are self hosting your site, do a ghost restart and see if it solve or not. Maybe any cache issue.
I am really clueless because your code is OK.
