Linking to static images via dynamic JS
I have a google map app that sets the icon based off of a path attribute that matches the folder structure in Cascade.
However when I go to load the icon it says the file is not there.
I can test that the path is correct by pulling up a background image used in our CSS, and then viewing it in a separate tab. The url is something like:
dev-environment.com/renderfile/<some really long random
id>/path/to/image
Changing the path/to/image
with the path to my icon
will show me the icon.
So, if my path is correct, how do I reference the correct path with with javascript?
This discussion was closed! See this FAQ for more information:
-
Why aren't my CSS background images displaying inside of Cascade Server?
See more..CSS background images require special tags that let the system know you are referring to an image that is managed by Cascade Server. Consider the following lines in a CSS file:
.content{ background-image: url('/images/photo.png'); }
To link to this image from the CSS file within Cascade, the following steps must to be taken:
- Click Edit on the CSS file containing the reference to the backgro...
Comments are currently closed for this discussion. You can start a new one.
Keyboard shortcuts
Generic
? | Show this help |
---|---|
ESC | Blurs the current field |
Comment Form
r | Focus the comment reply box |
---|---|
^ + ↩ | Submit the comment |
You can use Command ⌘
instead of Control ^
on Mac
1 Posted by Ryan Griffith on 15 May, 2015 02:29 PM
Hi Joseph,
It sounds as though Cascade may not be tracking the path to the image. Try surrounding the path to your icon with the
[system-asset]
pseudo tag to force Cascade to track the link.Please let me know if you have any questions or if adding the pseudo tag does not help.
Thanks!
2 Posted by Joseph Dillon on 15 May, 2015 03:28 PM
I wrapped the paths in my js file with the
[system-asset]
tags, set the system to handle it, and it works great when I view the page on the layout and preview tabs. But when I publish the page and view it live the icon paths went fromrenderfile/<long id>/path/to/file
to../path/to/file
and the icons no longer work.3 Posted by Ryan Griffith on 15 May, 2015 03:47 PM
Hi Joseph,
The relative path is to be expected because Cascade will rewrite the tracked links to be relative to the asset containing the link.
Off the top of my head, you have a couple of options here:
Please let me know if you have any questions.
Thanks!
4 Posted by Joseph Dillon on 15 May, 2015 04:21 PM
Thanks, maintaining absolute links worked great.
5 Posted by Ryan Griffith on 15 May, 2015 05:25 PM
Not a problem at all, Joseph, thank you for following up. I am glad to hear adjusting the link rewriting behavior did the trick.
I'm going to go ahead and close this discussion, please feel free to comment or reply to re-open if you have any additional questions.
Have a great day!
Ryan Griffith closed this discussion on 15 May, 2015 05:25 PM.