I'd like to know the idiomatic way to reference css images (images linked in css through url(...) ) from within an Ember addon.
Ostensibly the addon public/ folder will get merged with dist/ in the final build and the css files will be merged with vendor.css
How can images therefore be linked i.e. if I have an image in /my-addon/public/images/icon.png how should I reference it in my CSS file? I've tried url(/my-addon/images/icon.png) and it doesn't respect the rootURL setting (only works if rootUrl = '/').
The only thing that seems to work is url(../my-addon/images/icon.png) but I've never heard mention that images should be linked with relative paths in this way.
Is there an established way to reference image assets from within addon css?
I've tried everything mentioned above but the only thing that works is relative paths. Am I correct to do so?
Related
I am starting to build a website from scratch using python, django, and bootstrap. I have noticed that many times js, css, img. and fonts are stored in a folder vendor, such as:
/static/js/vendor/bootstrap/bootstrap.min.js
/static/css/vendor/bootstrap/bootstrap.min.css
or something similar.
What is the benefit of this folder structure over something like:
/static/bootstrap/js/bootstrap.min.js
/static/bootstrap/css/bootstrap.min.css
In the first example, when using the vendor folder as I have often seen, I would have to download bootstrap and unpack the downloaded folder into the js and css vendor sub-directories. In the second example, I can download bootstrap and drop the downloaded folder into /static without having to unpack anything.
It clearly marks which files are third-party libraries that should not be edited directly.
The vendor folder is where you usually (I'm using the word 'usually' because it's not exactly a rule but more of a preference in the coding community with the purpose of having a semantic directory structure) keep third-party resources(icons, images, codes, you name it) as opposed to a lib (library) folder where you or the author of the site/application to be specific keep your original codes in.
So if I were to download and use the site/application in the hypothetical scenario above, I can then create relevant folders for each data type (src/images for images, style/css for css, script/js for js, etc) and move required assets from the lib folder to the new folders without having to edit the third-party codes (or other assets) thus making it easier to rollback on any changes made that cause errors and such.
I have made a CMS with rails, users can upload js and css freely to customize the pages made by the CMS, I just generate a simple link to the assets according to what they are, and they have worked without any problems, how ever after updating the service to Rails5, there have been some troubles with the files uploaded in the public directory.
Mainly when people directly edit the css file in the public directory since they prefer to do that when running the CMS locally with there preferred editors when doing initial mocking.
The things known are,
The css or js does not update when locally edited (so changing body background to #000 or something doesn't show up)
directly accessing them in the browser seems to update them for subsequent accesses
assets are mostly generated by compass or webpack-dev-server since js is jsx and css is sass, but the problem reproduces even when directly editing css or js.
I know its a vague problem to ask, but I feel the asset pipeline may be interfering with files directly placed in the public directory somehow, its even more bizarre since it happens on some computers, and not on all of them.
I understand a couple questions (i.e. this) of this nature have already been posted, however no solid solution has been found. From what it seems, Meteor currently lacks of the ability to dynamically load/render different UI JavaScript (i.e. uilang) or CSS files per template. In my application, I have templates that require specific JS libraries and CSS as oppose to other templates.
For example:
user.html requires -> uilang.js, user_ui_code.js, userstyle.css
admin.html requires -> uilang.js, admin_ui_code.js, admin_style.css
I would need each js/css file to render/load depending on which route gets requested (i.e. example.com/user or example.com/admin), for things like different background-colors, transitions, etc. Meteor documentation states:
Files in /public are served to the client as-is. Use this to store assets such as images. For example, if you have an image located at /public/background.png, you can include it in your HTML with or in your CSS with background-image: url(/background.png). Note that /public is not part of the image URL.
So you would think that putting all your js/css/images assets in public and calling the needed files statically in head would solve the problem. Instead, it seems that the JS (CSS as well) files get concatenated and it all runs at the same time regardless of which route you are on, thus overlapping code. I'm not sure if I am missing something blatantly obvious or is this an actual issue in Meteor?
Thanks for any help.
Meteor doesn't yet support lazy/on demand loading of resources. The feature is on the roadmap as "incremental loading".
In the meantime, have a look at numtel:publicsources and numtel:privatesources, which let you create bundles for lazy loading resources, with or without authentication.
I've started using SailsJS for a small web app and so far it's great.
However I'm struggling with the assets and layout.
Basically I would like to be able to use different type of assets (groups of css files) depending on the page.
For this, I wrote 2 different layouts, each should includes the correct css files.
However, when I add those files in the config/assets.js files there all bundled together.
Is there a way to specifiy in my layout which assets i want to use ?
I know you can specify assets.js or assets.styles but I would like to be able to create my own group .
I also tried to put those assets in a different directory (public for example) and load them manually in my layout. It's still not working because the server doesn't want to 'serve' them.
Any idea ?
Glad you're liking Sails :)
For now, you can (a) bring in all styles all the time and make only the relevant ones apply (b) use another tool (like Grunt) to bundle assets like you would in a vanilla node.js project or (c) link the stylesheets manually (put them in your public folder).
As for the roadmap-- the community is working on more options for serving templates/styles/client-side logic. There's an open spec here:
https://github.com/balderdashy/sails/issues/240
Hope that helps!
I know this is old, but in case anyone else comes across this; in recent versions of sails the asset pipeline is built around grunt by default (I haven't used sails before 0.10.x).
You can add your own exports in tasks/pipeline.js and link those to the appropriate location in tasks/config/sails-linker.js. E.g. you could have a views/public folder and tell sails-linker to inject publicCSS vars there. Then adjust your layout.ejs so that it imports the styles/javascript from whichever folder.
I have all jQuery files in the js folder. I noticed that the SlickGrid download contains its own copy of jQuery. I'd prefer to have a single copy of jQuery for my own code as well as SlickGrid. Presently the folder hierarchy looks like this:
mysite/
js/
SlickGrid/
build/
css/
examples/
images/
lib/
jquery-1.4.3.min.js
jquery-1.8.5.custom.min.js
...
MIT-LICENSE.txt
slick.columnpicker.css
...
jquery-1.5.1.min.js
jquery-ui-1.8.13.custom.min.js
Is there a way to rearrange the folder hierarchy so that only a single copy of jQuery is used? Is it advisable?
in my humble opinion, it depends how demand you are. If you want to keep the folder structure then you should test if the plugin does also work with the newer versions of jquery and jquery-ui. If so, then you have to change all script includes to new .js files. You can use an extra program to do the changes automatically, like Search & Replace. After that move the newer ones to the 'lib' folder and delete the other files.
from my experience, when using jquery plugins we can copy the relevant plugin script, the css and images to what ever folder we need. when referring the plugin, we refer from that folder. in this case u can remove the jquery scripts provided with Slick grid and refer the one you already use.
PLS NOTE : when moving css files, the images referred in css also should be moved to specific folders accordingly.
Since there's so much in the SlickGrid git repo that I don't want to have in my own source tree I've been pulling it into directory outside my project's tree and copying the files I need into the appropriate places in my source.
This is kind of a crappy solution since it takes a while to update. So what I've been thinking of doing is making the copies of the SlickGrid files in my source tree into links to the outside repo. So when I pull a new version of SlickGrid the copies in my tree would update automatically.