Skip to main content

Generated Content and CSS Image Paths

  5 posts   Feedicon  
Replies: 4 - Last Post: March 06, 2012 21:57
by: ingeo
showing 1 - 5 of 5
Posted: March 02, 2012 17:38 by ingeo
In the project I am currently developing I have come across an issue where relative image paths declared in generated CSS are not displayed when running the application with Jawr DEBUG mode enabled.

I have two bundles, the first is generated using the Less CSS generated found at https://github.com/eliotsykes/less-css-jawr and the second is a traditional CSS file.
<!-- LESS BUNDLE -->
<link rel="stylesheet" type="text/css" media="all" href="/mycontext/cssb/jawr_generator.css?generationConfigParam=less%3A%2Fresources%2Fbootstrap%2Fless%2Fbootstrap.less" />

<!-- CSS Bundle -->
<link rel="stylesheet" type="text/css" media="all" href="/mycontent/cssb/resources/theme/mytheme/css/backgrounds.css" />


The bundle paths start with /mycontext/cssb/ however the CSS bundle includes additional path information (resources/themes/mytheme/css/...) which the generated bundle does not include.

The end result is relative images declared within the generated content fail to load because their path is incorrect.

Both files use background: url(../img/myfile.png); however the path requested from the server for the image from the traditional CSS bundle is:

http://localhost:8080/mycontext/cssb/resources/theme/mytheme/img/icons/ico-search.png and the Generated bundle's path is http://localhost:8080/mycontext/cssb/img/icons/ico-search.png

Is there a way to force jawr to include the additional path information when it generates the bundles URL. The generated bundle's url does contain the path in the query string generationConfigParam=lessHmmmresources/bootstrap/less/bootstrap.less

I should also note that if I run JAWR in production mode the css path rewriter rewrites the image paths in both the LESS and CSS bundle and the images display correctly.
Posted: March 02, 2012 19:50 by ingeo
After further investigation the custom less generator is declaring (as per the Jawr documentation)

    public String getDebugModeRequestPath() {
        return ResourceGenerator.CSS_DEBUGPATH;
    }


Which is called by the GeneratorRegistry.getDebugModeGenerationPath.

The documentation describes, for most generators the default path constants defined in ResourceGenerator should suffice. Except any generated content that references a relative path will not work as the CSS_DEBUGPATH does not take into account the path of the files included in the bundle.

If the ResourceGenerator interface was updated to pass the path of the bundle to the getDebugModeRequestPath then custom generators could determine for themselves if they need to use any of the supplied path as part of the debug path.

Posted: March 06, 2012 19:52 by icefox
Hi,

I will check this and I will try to find out if an update of the interface is the only solution available.

Cheers,
Posted: March 06, 2012 20:13 by icefox
Hi,

Can you please tell me which URL is wrong?
After rereading your post, I'm not sure that I've fully understand your issue.

Is the issue related with the path of the less bootstrap file?
I don't understand how changing the path of the bootstrap file will fix you issue?

Is the issue not related with the content of the less bootstrap file?

Cheers,
Posted: March 06, 2012 21:57 by ingeo
The root of the issue I am experiencing is that the debug path for generated content does not take into account that resources referenced within the generated content do not exist at the root level of your project.

If my project had a project structure like this:

    /resources
        /css
           filea.css
           fileb.css
        /less
           myproject.less
        /img
            foobar.jpg


And a CSS bundle configuration that paths the CSS bundles as: /bundle/.... The resources are output into the HTML as:

   <!-- starting mycss.css -->
   /bundle/resources/css/traditional.css
   /bundle/jawr_generator.css?generationConfigParam=less:/resources/less/myproject.less


The standard CSS debug path takes into account where files were located within the project when their debug paths are output and relative image paths like ../img/foobar.jpg resolve to /resources/img/foobar.jpg.

The Generator content does not include the path of the original resource and therefore image paths resolve up one directory from /bundle and there is no img directory at this level.

If the ResourceGenerator interface was updated to getDebugModeRequestPath(String mappingPath) the author would be free to use or ignore this information. In the case of a Generator that has a mapping to a single file (like the Less Css Generator) this path information can be used to ensure the debug path is /resources/less/jawr_generator.css. This would change the bundle path to:

    /bundle/resources/less/jawr_generator.css?...


The same relative image path ../img/foobar.jpg would resolve to /resources/img/foobar.jpg because the missing path information (as it is today) would be included in the generated css path.

After stepping through the jawr source in the debugger I noticed the GeneratorRegistry has the CSS bundle's path mapping, however it is currently only used to determine the generator prefix to find the correct Generator instance.

As a final note: None of this is an issue when you run in production mode because the CSS Path Re-writer is properly updating the relative paths to account for the /bundle/{hash}/mycss.css.
Replies: 4 - Last Post: March 06, 2012 21:57
by: ingeo
 
 
Close
loading
Please Confirm
Close