Referencing image assets in css

(Ryan Archer) #1

I'm looking to reference image assets in my design associated css asset.

I tried using the './?a=238456' dynamic linking but that does not work. I was told the system would parse the css file when loading it in like that. Hasn't worked.

 

I have checked out some other project work and noticed that it references the _data url of the object. I think that is what I need to do to get it to work. How can I find an image assets location in the _data repository?

 

I'm really new to this and I can't find out where to get this reference.

(Ryan Archer) #2

Actually the './?a=238456' dynamic linking does work. I just did not have the stylesheet referenced properly.

Still not sure how to get the _data URL though actually.

(Nic Hubbard) #3

Are you meaning you want to have __data URLs for the images that you are referencing? If so, you need to make sure that they are live and have public read access.

 

If you were referring to the CSS Design Asset, then you need to make sure that you have the static asset setting turned on so that it can be given __data URLs.

(Anthony Barnes) #4

Matrix does a bit of magic with file references in CSS design assets (and Design assets). I believe what you might be looking for is the following:

 

Under the CSS design asset upload your image as an image file asset, e.g:

 

main.css

   + myimage.png

 

Then in the content of the design asset parse file you reference it with the following path:

.myclass {
    background-image: url(mysource_files/myimage.png);
}

Because the file exists under the design asset it is know as an associated file and Matrix knows to magically parse out the 'mysource_files' references and replace them with actual paths to the file, which if it is live and has public access granted will gain an __data path automatically.

 

In Design assets the usage of ./?a= should be avoided since it will never be dynamically replaced into a proper web path. You should instead use mysource_files for file assets, or nest in assets that do actually replace the ./?a= references (e.g. nested standard page).

(Ryan Archer) #5

Thanks for the assistance folks!

#6

Scotty always said mysource references were optimal however if IDs are required the globals keyword will work as well. Performance wise as Anthony said!