In my asp.net app a user can upload several localized images (of buttons) .
For example, he will upload 'send.gif', 'send.fr.gif', 'send.en-UK,gif; etc..
When a visitor is coming to his page, I need to pick up the right file based on the visitor's locale.
Is there an api (or simple way) to find the best appropriate image based on the locale - for example, if a visitor is from France the API will return 'send.fr.gif', if the visitor is from Australia the API will return 'send.en.gif' etc...
The logic should be the same as ASP.NET pick the right localized resource file basically.
Thanks.
It seems from your post that you already have a way to detect the users locale. So I will assume that you are holding this information.
The way that we do this is we store the users locale in session, and store all localised resources in corresponding directory names. eg:
/
/images
sendButton.gif
background.gif
/de-de/
sendButton.gif
/fr-fr/
sendButton.gif
An HttpHandler is then used to map the localised directories over the top of the default directory, based on the current users locale. This allows for seamless integration of images into all code, and css, and will use the image in the base directory if no localised image is found.
If more sophisticated sorting is required then i would suggest nesting your countries inside your languages. like this:
/
/images
sendButton.gif
background.gif
/de
/de
sendButton.gif
/fr
sendButton.gif
/fr
/be
You can then specify lenguage level resources. And even have your http handler map files in suce a way that they propogate up rather than down the tree. So that the fr-fr resource will be used for all french speacking countries that dont have their own resource of that name.
Of course at this point it does become rather complex, especially when deciding which french speaking country is used as the default for the french language if none is specified. you may wish to start storing priorities somewhere in order to decide what you serve to which locale. And whether resources propogate up or down the tree. But as a transparent structure for localising images while keeping yoru markup and CSS clean this should work very well.
Related
So I code in Sublime Text 2 combining HTML, CSS, and jQuery to make web designs.
For some reason, when I am trying to specify a location of a file, say Pic01.jpg in the folder images, you would suspect typing in /images/Pic01.jpg should be enough to tell the browser where the picture is located.
But this is not the case. I find myself needing to specify the exact location of the file before the browser will render it. Like; User/Desktop/siteOne/images/Pic01.jpg
This path system is very inconvenient, as I would like to say - export my sites to different computers, but now the code is bound to that specific location on that specific computer.
How can I set it up to make /images/Pic01.jpg sufficient coding for the browser (or Sublime?) to understand what needs to be rendered?
Prepending the path by / means that it will start it search at the root, which can change depending on your server configuration.
With WAMP/MAMP, I have to prepend my URLs by / and then the name of the folder they are in, if they are not at the absolute root of the server. It depends on your setup.
If you want paths that will work regardless of the server root, it's best to use a relative path or use a constant that can easily be changed depending on the configuration.
Example :
define("PATH", "/");
Link that always work
You will only have one line to change to make your paths work all the time with a different configuration - relative paths can be tricky to deal with when working in deep sub-folders.
Furthermore, if you want to see where it's actually looking for the file, open the Console in your web browser of choice, they should display the error (404 most likely) and the path it's looking at.
Hey,
Since Google Fonts came out, I have had this question in mind. First see this below:
<link href='http://fonts.googleapis.com/css?family=Cantarell&subset=latin' rel='stylesheet' type='text/css'>
Here Google is linking to an external CSS file that doesn't have a file extension (.css)! Then Google also has another feature that if you want to inlude another font to this then just add the "|" sign and type the font name. How do you do this? Using Javascript, PHP or something?
Help is appreciated!
Thanks :)
The extension of a file does not have to mean anything at all about the contents of said file. It is merely a convention (one that Windows, for instance, uses to the point of making it seem like a requirement).
Any dynamic 'file' on a web site can return what ever kind of content it wants, any time it wants. The extension means nothing - aside from expected convention.
That URL could be a directory named css with a default 'document' that is a script, which handles the parameters to decide what content to give. Or, it could be a literal file named css which does the same thing. Or, it could not be a file or folder at all, instead merely part of a routing mechanism, which calls a controller based on the URL, and passes the parameters in.
Web servers return information in the response indicating what the MIME Type of the return value is, and the browser determines what to do with it based on that - not based on the extension of the file.
Yes, they have to be doing some sort of server-side processing when this URL is requested
http://fonts.googleapis.com/css
The querystring is parsed, and a text stream is returned with the CSS output. Allowing the user to add additional font families to the CSS is pretty trivial, as the server is just spitting back what you append to the query string.
You could do this in PHP or ASP.Net (and many others), but there is no indication of the underlying technology from Google's URL.
The easiest way to do this yourself would be to create a folder on your web server called "css", and then have a default script in there that does the processing. The URL could basically be almost identical to the Google url.
So I'm writing a Django based website that allows users select a color scheme through an administration interface.
I already have middleware/context processors that links the current request (based on domain) to the account.
My question is how to dynamically serve the CSS with the account's custom color scheme.
I see two options:
Add a CSS block to the base template that overrides the styles w/variables passed in through a context processors.
Use a custom URL (e.g. "/static/dynamic/css/< website_id >/styles.css") that gets routed to a view that grabs all the necessary values and creates the css file.
I'm content with either option, but was wondering if anyone else out there has dealt with similar problems and could give some insight as to "Best Practices".
Update : I'm leaning towards option number 2, as I think this will allow for better caching down the road. So it's dynamic the first time, gets stored in memcache (or whatever), and invalidated when a user updates their settings in the admin site.
Update: Firstly, I'd like to thank everyone for their suggestions thus far. All the answers thus far have focused around generating static files. Though this would work great in production, it feels like a tremendous burden during development. If I wanted to add a new element to be styled, or tweak existing styles I'd have to go through and recreate each and every css file. Sure, this could be done with a management command, but I just don't feel it's worth it. Doing it dynamically would add 1 maybe 2 queries to each page load, which is something I'm not worried about at this stage. All I need to know is that at some point I will be able to cache it without rewriting the whole thing.
I've used option #2 with success. There are 2 decent ways of updating the generated static files that I know of:
Use a version querystring like /special_path.css?v=11452354234 where the v parameter is generated from a database field, key in memcached, or some other persistent file. Version gets updated by admin, or for development you would just make the generation not save if the parameter was something special like v=-1. You'll need a process to clean up the old generations after some time.
Don't use a version querystring, but have it look first for the generated file, if it can't find it, it generates it. You can create a cron job or WSGI app that looks for filesystem changes for development, and have a hook from your admin panel that deletes generations after an update. Here's an example of the monitoring, which you would have to convert to be specific to your generations and not to Django. http://code.google.com/p/modwsgi/wiki/ReloadingSourceCode#Monitoring%5FFor%5FCode%5FChanges
Could generate the css and store it in a textfield in the same model as the user profile/settings. Could then have a view to recreate them if you change a style. Then do your option 1 above.
Nice question.
I would suggest to pre-generate css file after colors scheme is saved. This would have positive impact on caching and overall page loading time. You can store your css files in directory /media/css/custom/<id or stometing>/styles.css or /media/css/custom/<id or sth>.css and in template add <link rel="stylesheet" href="/media/css/custom/{{some_var_pointing _to_file_name}}" />
You can also do the trick with some random number or date in css file name that could be changed each time file is saved. Thanks to this browser will load the file immediately in case of changes.
UPDATE: example of using model to improve this example
To make managing of those file easy you can create simple model (one per user):
class UserCSS(models.Model):
bg_color = models.CharField(..)
...
...
Fields (like bg_color) can represent parts of your css file. You can ovveride save method to add logic that creates css file for user (by rendering some template).
In case your file format change you can make changes in your's model definition (with some default values for new fields), make little changes in template and run save method for each exisintg instance of class. This would renew your css files.
That should work nicely.
I would create an md5 key with the theme elements, store this key in the user profile and create a ccs file named after this md5 key : you gain static file access and automatic theme change detection.
We have a custom business culture we've created, let's call it customer.
So we've created a custom culture, en-GB-Customer.
That all works fine if we have a base resource file and then the customer resource file, e.g. Login.aspx.resx and Login.aspx.en-GB-Customer.resx
We see text for general users and then text for Customers depending on the culture.
We have certain aspx pages that are only used by this business culure, e.g. CustomerWelcome.aspx
Ideally we'd like all the customer resources in *.en-GB-Customer.resx
However for some reason, if we only have a CustomerWelcome.aspx.en-GB-Customer.resx file, its not being picked up. The only thing that is displayed is the text in the text='' field on that page. If I rename CustomerWelcome.aspx.en-GB-Customer.resx to CustomerWelcome.aspx.resx then we see the Customer specific stuff.
How do I get this to work?
You always need to provide a fallback resource file, that is, without a culture specified. otherwise it does not work correctly.
So you'll need to keep two files with basically the same content.
CustomerWelcome.aspx.resx (fallback)
CustomerWelcome.aspx.en-GB-Customer.resx
I have a large (700kb) Flex .swf file representing the main file of a site.
For performance testing I wanted to try and move it off to Amazon S3 hosting (which i have already done with certain videos and large files).
I went ahead and did that, and updated the html page to reference the remote .swf.
It turns out that Flash will load any resources relative to the .swf file accessing the resource - no matter what the root of the html page is. So my resources are now being loaded from the remote site (where they don't exist).
There are two obvious things I could do :
* copy all my resources remotely (not ready for this since i'm just testing now)
* add in some layer of abstraction to every URL that the .swf accesses to derive a new path.
I really want to flick a switch and say 'load everything relative to [original server]'.
Does such a thing exist or am I stuck loading everythin from the remote machine unless I fully qualify every path?
i want to avoid anything 'hacky' like : subclass Image and hack the path there
Append a slash before your urls, this should load relative to the domain instead of the current folder:
foo.load('/like/this/image.jpg')
This is a bit quick and dirty, feeding a "relative" url via a querystring (or the base parameter) would be way more flexible.
You could try specifying the base parameter of your SWF's embed/object tags. In theory it defines the base path that will be used to resolve relative paths for loading, but I don't know if it will work if the base value points to a different server from where the SWF is.
See the docs on embed/object params here. Scroll down to "base" at the middle.
If that doesn't work, another thing I've seen people do is to pass in a custom base path via flashvars. Then inside your SWF, you check if that base path is defined, and if so prepend it to relative URLs before loading.