I have some css files that are deployed in a feature scoped to "site"
They contains some calls to images (also deployed by the solution) and so the paths are things like
background: #ffcc00 url( '/sites/portal/Style Library/CSS/PersonalCenter.gif' ) repeat-x;
However I would quite like to be able to deploy to other "sites/XXXX" without having to change the url in all the css files!
I cannot just place them in the top level URL as it has its own styles etc and it would be confusing to mash styles from subs-sites into it.
Is there somewhere else I should be storing things like this?
Thanks!
How about placing them (the images) in _layouts, then you could use
url( '/_layouts/images/PersonalCenter.gif' )
There are two major options for this:
1. Store your images in the Style Library.
Browse to /sites/portal/Style Library/Images and create a folder there to store your images. This appears to be similar to what is already being done in the CSS file. Use a relative path in the CSS file to avoid the /sites/portal part of the URL.
Advantages: Version control, no need to worry about deployment across multiple servers.
2. Store your images on the file system.
Create a folder for the images specific to your solution, e.g. at
C:\Program Files\Common
Files\Microsoft Shared\web server
extensions\12\TEMPLATE\IMAGES\siteXXX
This maps to the folder that Johan mentions where you would use
/_layouts/images/siteXXX/image.gif
to reference your images.
Advantages: Performance (maybe) depending on how the server is configured.
Recommendation: Use the Style Library if possible. Version control alone is a huge benefit.
Thanks for your answers... In the end I have remembered about relative paths and
background: #ffcc00 url( '../CSS/PersonalCenter.gif' ) repeat-x;
works just fine.
The images/css files remain in the Style Library which has been useful to check CSS changes before committing them to the main feature and doing a 'proper' release of the solution
Now why did I not just do that from the start !?
Related
I'm not a developer/programmer. I'm just someone trying to use Gitit to take notes. I've got it to the point where it runs on Windows, but the math looks best using MathJax. I don't want to rely on a remote CDN to get the MathJax working (power cuts and internet disconnections are very frequent here). The author of the app mentions it can be setup in "4 lines of code" in Happstack:
mathjax-script: https://d3eoax9i5htok0.cloudfront.net/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML
# specifies the path to MathJax rendering script.
# You might want to use your own MathJax script to render formulas without
# Internet connection or if you want to use some special LaTeX packages.
# Note: path specified there cannot be an absolute path to a script on your hdd,
# instead you should run your (local if you wish) HTTP server which will
# serve the MathJax.js script. You can easily (in four lines of code) serve
# MathJax.js using http://happstack.com/docs/crashcourse/FileServing.html
# Do not forget the "http://" prefix (e.g. http://localhost:1234/MathJax.js)
The link to the tutorial is broken, so I'd be grateful for some assistance. Is there is any MathJax configuration I need to change, or simply extracting the files will do? I'll be writing lots of math in gitit. I'd prefer not to set up Apache etc. to serve MathJax. Gitit already uses Happstack, I'd prefer using that. Thanks!
EDIT: Just to be clear I'm not sure how to assign the port 1234 to serve this script
Ok I got MathJax working using portable Apache and the MathJax archive downloaded from docs.mathjax.org. The URL needs to be of the form (assuming you extracted the files into apache2/htdocs/MathJax):
http://localhost/MathJax/MathJax.js?config=TeX-AMS-MML_HTMLorMML
I wanted to keep this lightweight by reusing the same instance of Happstack as Gitit, but that seems beyond my skills/available time right now.
EDIT: Just found out that ghc will pack everything into one exe when building. So I doubt it is even possible to use the same Happstack instance, as the root directory of the server doesn't exist?
From the documentation, the static directory should work just fine:
On receiving a request, gitit always looks first in the static
directory (or in whatever directory is specified for static-dir in the
configuration file). If a file corresponding to the request is found
there, it is served immediately. If the file is not found in static,
gitit next looks in the static subdirectory of gitit's data file
($CABALDIR/share/gitit-x.y.z/data). This is where default css, images,
and javascripts are stored. If the file is not found there either,
gitit treats the request as a request for a wiki page or wiki command.
So, you can throw anything you want to be served statically (for
example, a robots.txt file or favicon.ico) in the static directory.
You can override any of gitit's default css, javascript, or image
files by putting a file with the same relative path in static. Note
that gitit has a default robots.txt file that excludes all URLs
beginning with /_.
(source: https://github.com/jgm/gitit)
Download the MathJax.js file from e.g. cdn.mathjax.org and place it in data/static/js/MathJax.js. Then change the config you quote to:
mathjax-script: http://localhost:5001/js/MathJax.js
I'm using Liferay Portal 6, The .sprite file is not specified in the source code, however, it's included in the URL with a slash dot, then it's blocked by a security program.
When I delete those file in theme/docroot/images and I deploy the project, they are generated again.
I would like to know how to manage those files or rename them?
You can open those files: It's combined images - look up "CSS Sprite" for a thorough documentation. They're used to limit the number of requests that go back to the server. Without sprites, you'd have every theme image loaded individually. With them you only need the sprite once, resulting in a significant performance boost: You want to have as few http-requests per page as possible, and sprites are one automatically handled way to help you achieving this.
I'm using the Node.js version of TiddlyWiki, and I'd like to link to images on my filesystem.
The documentation listed here doesn't work; in the [img[path]] tag, for the path part I put something like /Users/documents/ken/path_to_image.jpg yet nothing shows up in the tiddler.
My wiki exists in /Users/documents/ken/wiki.
I know this is an old post, but zacts stated that you can use a macro plugin or simply use the [img] tag to point to the relative path of the image from the tiddlywiki.html file, but the op is using the node.js version, and zacts apparently didn't read that. There is no tiddlywiki.html file for TiddlyWiki on node.js. That only works with the static .html version of tiddlywiki, not the node.js version.
Currently there is no way to point to a local file through the node.js version of Tiddlywiki as node.js is not a webserver, therefore it does not see subfolders like /images/ off of the root url. The only way is to run a parallel web server on the same machine and use the full web url to the images served up from the web server.
In case someone else stumbles across this problem:
I could not find this documented anywhere, but what seems to work is to just copy the image in the tiddlers directory, then restart the nodejs server, and search for the image title from tiddlywiki. There will be a tiddler that contains that image, that you can edit at your leisure.
Alternatively, copy the image as image_name.png (or image_name.jpg) into the tiddlers directory, and create a image_name.png.meta text file with the following contents:
title: image_name
type: image/jpeg
Upon restart of the tiddlywiki nodejs server, a tiddler with title image_name which contains the image will be there.
If you are using the Node.js version, you can simply put it in the ./files folder, and then use [img[. /files/xxx.jpg]] to reference it.
I had this same issue recently, and I found a neat little solution for it. Let me send you the links, and I'll post the snippets here.
I happened to stumble across this tiddlywiki image gallery homepage that linked to a macro plugin that lets you link in local images. Here is the link to the tiddler for the plugin: http://www.richshumaker.com/tw5/tw-photo.html#External%20Image%20Path. Here is the original TiddlyWiki google groups post of the plugin for this: https://groups.google.com/forum/#!msg/tiddlywiki/ChRV6sjQpn4/bCm35_XhGmkJ.
I hope this helps! =) (note: when I get more time I may clean up the formatting of this post).
It is very simple, you use _canonical_uri field
_canonical_uri field
The field value is something like "./wiki/path_to_image.jpg" (mine is "./files") in the same level as the tiddlers folder. I did not experimented with files outside the root folder of the wiki. The dot in the path might be ommited.
The content type might be "audio/mp3" "image/jpg" look at the "parser" shadow tiddlers. Your Browser might support more content types like "audio/wav" but you would have to add this line to "$:/core/modules/parsers/audioparser.js" For example. Might be the same thing for images. Check your browser support.
I really do not know why this fact is so obscure, but it work wonders.
I use method mobile first or a reponive webite and i use susy. How organize files _forms _typo _layout,_mixins etc.. for mobile (default) and breakpoints (tablet, desktop) and to have output files :
mobile.css
tablet.css
desktop.css
Thanks
Sass/Compass+Susy will create a file for every file in your source directory that is not preceded by an underscore.
So, simply place the code you want generated for those style sheets in files located in the source directory using any mixins from your own partials (files preceded by an underscore) or any of the extensions you're including on your project (such as susy)
A great document that talks about structuring your project is here: http://compass-style.org/help/tutorials/extensions/
Something else to look at: http://compass-style.org/help/tutorials/best_practices/
Great
i understand the technics with '_' files not generated but i search sample organization iles or responive website with susy .
if i use multiple files for layout header etc... (include or each at-breakpoint) the css file result contains miltiple declaration #media.... and not grouped .
I'm trying to build a new Orchard theme, and to keep things structures I'd like to put script includes in separate folders (this particular script include needs quite a bit of files so to put all of them in the root of the scripts folder doesn't seem so great).
Basicly I can't wrap my head around this:
Script.Require("~/ThemesFolderEtc/Scripts/libs/shadowbox/shadowbox.js");
it seems only possible to do something like this:
Script.Require("shadowbox.js");
Does anyone have any pointers on what virtual path to use, and if it's supported to use virtual paths?
I believe Script.Require is key/value dictionary of registered scripts. Try Script.Include("path"). This is what I do with my css file. I point it to a file on in public dropbox folder which makes changing the css super easy and no ftp!