Example 1: An image resource reference in a typical CSS file
- Create a new presentation template, remove the default HTML in the "Presentation Template" field and replace it with the following tag: <element type="content" context="current" key="Web Resource Body"/>
- Create a new authoring template and add a HTML element named "Web Resource Body".
- Map the presentation template to the authoring template under a library and/or site appropriate for storing "design items" (items that will not be visible in the menus of your site).
- Upload any images required by the web resource file as library components and replace their URLs in the "Web Resource Body" field with WCM component tags (see Example 2 below).
Example 2: An image resource reference in a CSS file managed as a WCM content document
background-image: url(<Component name="background" format="url"/>);
- Save the content document in your design library.
Example 3: Referencing a CSS content document from a presentation template
<link rel="StyleSheet" href="/wps/wcm/myconnect/Web+Content/Site/SiteArea/myStyleSheet?subtype=css" type="text/css" media="screen">
<Element context="current" type="content" key="Body"/>
- Note the "subtype" query string parameter that has been appended to the URL. This tells WCM to use text/css as the response header content type when this URL is requested.
- Also note that the "subtype" query string parameter only applies to the default content renderer and will not work on URLs which invoke the component renderer (i.e. which contain srv=cmpnt in the query string parameter).