jQuery and Pylons
writeson
I'm a pretty new user of Pylons and I've got a question about using
jQuery/jQueryUI with Pylons. When I'm developing on my local machine
and accessing static files in the public directory things work fine.
But when I post this to our production server there is a problem
accessing images that are embedded in jQuery and jQuery css files
(background-mage : url(/images/thing.png);). This is because my local
development path is something like this:
/tool/verify
where as in production:
/plant/tool/verify
This breaks the hard coded image paths that are in the jQuery UI css
files (and in some of my Javascript files that are trying to use
images). In my Python files I can use h.url_for() function to great
the correct relative mapping. But I can't call this function from
Javascript, and there is nothing that would do this kind of work
inside of css files. Is there a way to handle this so I don't have to
edit the paths inside css files for every installation?
Thanks in advance for your help!
Doug
Paweł Stradomski
> Hi all,
>
> I'm a pretty new user of Pylons and I've got a question about using
> jQuery/jQueryUI with Pylons. When I'm developing on my local machine
> and accessing static files in the public directory things work fine.
> But when I post this to our production server there is a problem
> accessing images that are embedded in jQuery and jQuery css files
> (background-mage : url(/images/thing.png);). This is because my local
> development path is something like this:
>
> /tool/verify
>
> where as in production:
>
> /plant/tool/verify
With CSS files it's probably best to reference all images with relative paths.
They are resolved using CSS file location as base, so you don't have to worry
about which page is including the CSS file.
So with structure like
(something)/css/myfile.css
(something)/images/myimage.png
I'd use background-image: url('../images/myimage.png')
With regard to javascript, I'd inject path to project root to some global
variable.
In your top-level layout template, in the <head> (before all other scripts)
you could put this snippet
<script>
var MyProjectConfiguration = {
'base_path' : ${h.url('/')}
}
</script>
Then in other scripts you can construct paths with code like
MyProjectConfiguration.base_path + 'some/path' (important: no leading slash)
--
Paweł Stradomski
Paweł Stradomski
> W liście writeson z dnia czwartek 07 stycznia 2010:
> var MyProjectConfiguration = {
> 'base_path' : ${h.url('/')}
> }
> </script>
Bah, forgot quotes arount the url (and proper escaping).
--
Paweł Stradomski
DD
map.redirect('/plant/tool/verify/img/{fname}.png',
'/tool/verify/img/{fname}.png')
DD.
eneely
all my other templates inherit from in Mako that has a base path
defined. I also use definitions to setup all of the html structure
for including my css and javascript files. However, that doesn't help
with images that are defined in the css files if they are hardcoded.
I have to say that almost all of the jQuery plugins, including UI,
that I have used have relative paths defined in the CSS.
I like to have all my images in one location and used to put all of
the jQuery images in my images directory, but that is impractical so I
just make sure that when I install a plugin it goes under my
javascript/jquery directory exactly like the author defined.
- Eric
writeson
Thanks for the reply, and nice to see an example of Pylons routes
being able to rewrite. However, that doesn't solve the problem in the
general case, but in a file by file manner.
I think what I might end up doing is create a proxy server in Apache
that directs all the dynamic requests to Pylons, but serves the static
files itself. In this way I only have to change one filepath location
in the Apache configuration to make my development system and
production system work.
Thanks again,
Doug
writeson
Thanks for the reply. Depending on how well my proxy server idea
works, I might have to go back to what you're describing above. Though
I don't like having images in what I consider a Javascript folder, it
just might make things easier in the long run!
Again, thanks for your reply,
Doug
writeson
them and see what works best for our application. I'm getting my head
around the routes thing, so that appeals to me. :)
Thanks again,
Doug
Jonathan Vanasco
2- on all my projects, i tend to do something like this:
<img src="${g.cdn}/_img/logo.gif"/>
g.cdn is blank by default, but if i need to switch to simplecdn/
amazons3/etc... i can in a heartbeat
3- in my /public file, i basically only have things like _img , _js ,
_css. these directories are just symbolic links to elsewhere in my
release.
usually i have
/project
/project/www/www.site.com/_img
/project/web-pylons/appname/app/public/_img ( symlink to other
directory )
4- all that being said, i'd handle your issue in one of two ways:
a- i'd have a symlink on the folder for /public/plant/tool/
verify to /public/tool/verify , or vice versa.
b- i'd do url rewriting, via nginx or pylons or whatever,