Design Links

Squiz Matrix Support
1

Hi,


I have linked to 2 CSS files by making them associated with a design and using <mysource_PRINT />.



Within the CSS files I have references to images. How do I know what path to use in the CSS file once I have uploaded the images to Matrix



Many thanks.

2

You cant put image URLs for Matrix files into your CSS yet. You have to include that particlar style information in the parse file of the design so the URLs get replaced by Matrix.


For example:

If your CSS file had

    .sample {
      background-image: url(my_file.jpg);
    }

You'd have to enter this information into the parse file
3

Thanks.


I have used the last suggestion (mysource_files) you made.



I noticed that it inserted "http://172.16.1.75/base/advanced.css" into the HTML, so I edited the external CSS files so that they reference the same path:



body{ margin: 0; padding: 0; min-width: 550px; background: white url(/base/bg.body.gif) repeat-y; }



It seems to work.



However in the back end of the system I now have the background image on the edit pages where the content page is a child of the site with that design.



Should the design CSS is applied to the edit page content ?



Many thanks.



RLH

4

This wont work. Once a file goes LIVE in Matrix and is publically accessible, the URL will change to use http://172.16.1.75/__data/blah/blah.jpg so that Apache serves the file directly for a speed increase.


[quote]Should the design CSS is applied to the edit page content ?[/quote]

Yeah, it does get applied so that if your using DIVs for your WYSIWYG editors, the CSS flows through so you get to preview your content with the design applied. This will probably change in the future as we introduce our Java WYSIWYG editor.

5

Thanks Greg,


I just found this out for myself!



Just a suggestion: as backgrounds in external CSS files are becoming a lot more common, could Matrix have a 'fake' URL so that external CSS files could access other design assets.



Or can I rely on "http://172.16.1.75/__data/blah/blah.jpg" ?





Thanks again.



RLH

6

The only problem with having a "fake url" is that it is muhc slower to serve the file. Matrix has to be loaded, the file asset has to be loaded, then PHP has to open and output the file.


We are looking into having two URLs for all file assets to serve this purpose for situations where you really need it, but I think you'd benifit from having the CSS files parsed like designs are - which we are also looking into.



For the time being, you can rely on the __data URL. It will only ever change if the ID or the type of the asset changes, which doesnt happen unless you explicitly do it.

7

I have the same issue only with alot more CSS files. For now I am making do with manually setting the __data url in each css file. It works ok but a CSS parse file would be a great advantage.

8

Just of the top of my head:


What we possibly need is a gauranteed short path that holds the CSS and any images.



I prefer not to have long urls in my CSS files (for size reasons) and I use a lot of backgrond images.



I associate all my CSS files and the images with the design. Perhaps these could all be put in a single folder alias: /styles



then we can use url( "/styles/image.png") in the exteranlly linked CSS file with relative impunity.



I realise this probably goes against the object architecture of the system though which stores each object in a folder with the object number.



The CSS parse file is a possible option, my only concern with that is that the browser needs to see CSS files as static pages so that they are cached for the site after the first load. And there is the latency question too, with having to parse the CSS file for every page view - Some of my CSS files go up to 10K in size.



cheers.

9

When this is implemented, the CSS files will be able to access any image uploaded to a design using the short URL "mysource_files/file.jpg"


This is the way designs currently work also. When the browser recieves the CSS file, it will have __data URLs inside, but these will remain fairly static and will be cached by the browser.

10

Cool. That would be great. Would the parsed CSS file get written to a static location - because it probably only needs to get parsed when it is changed, which for most sites is not very often.


cheers.

11

The __data URL is a static location in the data/public. It will only change if you make the file restricted (meaning Matrix will have to check permissions - hence the normal URL is used again). The parsed CSS file will handle the change automatically.