Skip to main content

Smartsprites feature doesn't seem to work

  25 posts   Feedicon  
Replies: 24 - Last Post: May 08, 2014 18:54
by: icefox
showing 1 - 20 of 25
« Previous 1
Posted: January 19, 2014 12:00 by paranoiabla
Hi guys,

I'm trying the smartsprites feature ( and it doesn't seem to work for me.
I've done everything according to the tutorial, but still i can't get jawr to use the generated sprite. In my css I have:
#minicart_data {
    background-position:  right 75%;
    background-image: url('../images/nav-inactive-marker.png'); /** sprite-ref: mysprite; */
    background-repeat:  no-repeat;
    background-color: transparent;

and in the jsp i have:
        <jwr:style src="/mysite/all.css" />

Then during server start-up I can see a new css+sprite gets generated in: /target/tmp/cssSprites/src/resources/theme/mysite/normal/ (I use maven-jetty-plugin):


So seems like jawr is using correctly smartsprites to generate the new css+sprite. Unfortunately when I open the page and inspect the #minicart_data I get:
#minicart_data {
  background-position: right 75%;
  background-image: url('../images/nav-inactive-marker.png');
  background-repeat: no-repeat;
  background-color: transparent;

in debug mode, and
#minicart_data {
  background-position: right 75%;
  background-image: url('../../cb3919559889/resources/theme/mysite/normal/images/nav-inactive-marker.png');
  background-repeat: no-repeat;
  background-color: transparent;

in not-debug mode.

So I can never get jawr to use the generated mysprite.png Frown
Posted: January 19, 2014 21:49 by icefox
Hi paranoblia,

This is an issue. The sprites generation is broken for CSS file which are provided by a generator.

A bug has been opened in JIRA ( and it's already fixed.
The fix will be released in the next version.

Posted: January 19, 2014 23:08 by paranoiabla
Hi icefox,

I tested it and indeed now the sprite is referenced when in production mode (jawr.debug.on=false). However, I have 2 problems.
I have this in my css:
/** sprite: mysite; sprite-image: url('../images/mysite.png'); sprite-layout: vertical */

so when in production mode my png sprite is referenced as:
background-image: url('../../resources/theme/mysite/normal/images/mysite.png')

and the server doesn't seem to find it (returns 404). I don't really know what the correct url should be, but I guess it is generated wrong Frown It is referenced from this css:
<link rel="stylesheet" type="text/css" media="screen" href="/gzip_822602493/mysite/all.css" />

2) Also the sprite is not referenced when in development mode (jawr.debug.on=true). Is there a setting I need to turn on for that?
Posted: January 20, 2014 06:47 by icefox

Did you make the test with the trunk version which contains the fix?

For the time being it's not possible to have the sprites in debug mode.
There is already a request feature for this.

In fact, Jawr treats the sprite generation as a bundle generation,
which means that in debug mode, you get your resource as usual and when you are in production mode,
you get the processed/minified resources.

Using sprite in debug mode will change how Jawr handle resources in debug mode, because it will have to modified your resource which doesn't contains sprite references to add them.
This also means checking modifications on resources in debug mode and regenerate sprites if needed.
This is not technically unfeasible, but it will change how Jawr handles the resources in debug mode, which is in general :
"Do nothing".

So I'm not sure that this request will be realised.

What is your use case for using sprites in debug mode?
Why would you like to have this feature in debug mode?

Posted: January 20, 2014 11:15 by paranoiabla
Hello icefox,

I didn't know smartsprites is not working in development mode - that's why I asked. Maybe it would be good mentioning it in the documentation. But now that you say, it does make sense indeed.

As I said the smartsprites doesn't work for me in production mode. I have these folders:

then I specify in all.css the following:
/** sprite: mysprite; sprite-image: url('../images/mysprite.png'); sprite-layout: vertical */

and after startup I can see these correct folders:

and also:
N-O-T-I-C-E-     T-H-I-S       F-O-L-D-E-R       C-O-N-T-A-I-N-S      N-O     I-M-A-G-E-S

and in the browser images are referenced as:
background-image: url('../../resources/theme/mysite/normal/images/mysprite.png')

from css:

which is 404 - not found!
What should be the correct URL? Is it because I use relative path ('../')?
Posted: January 20, 2014 11:51 by icefox

Can you confirm that you are using the latest snapshot version?

It seems that you're using the 3.5 version which contains the bug,
because the compressed bundle "all.css", should contain a reference like this to your sprite :

background-image: url('../../GENERATED_UNIQUE_ID/resources/theme/mysite/normal/images/mysprite.png')

Posted: January 20, 2014 12:17 by paranoiabla
Yes, I'm using latest 3.6-SNAPSHOT (svn version 1055). Before I wasn't even referencing mysprite.png, and now I get it referenced, unfortunately the image isn't there.
Posted: January 20, 2014 12:46 by icefox

I'll take a look at this.
Can you send me your CSS bundle configuration?

Posted: January 20, 2014 12:56 by paranoiabla
Sure, what is your email?
Posted: January 20, 2014 14:45 by icefox

You can create a JIRA and attach your config file.
It will help me if you would be able to have a minimal config file with which you're able to reproduce this issue.

Posted: January 20, 2014 21:23 by paranoiabla
Hello icefox,

jira does not allow me to attach files Frown
I created a small draft project. All you need to do is unzip, run mvn clean install and then run mvn jetty:run. After that go to http://localhost:8080/
It should be straightforward but if you have any problems please let me know.
Here's the project:
Posted: January 21, 2014 23:17 by icefox

It seems to be a bug.
I need to investigate.

Anyway, if you use the following syntax in your base.css, it should work.

/** sprite: mysprite; sprite-image: url('spriteHmmmimages/mysprite.png'); sprite-layout: vertical */

Posted: January 25, 2014 17:21 by paranoiabla
Hello icefox,

I tried your suggestion:
/** sprite: mysprite; sprite-image: url('sprites/images/mysprite.png'); sprite-layout: vertical */

and it doesn't seem to work Frown
I get this in the console:
Impossible to define the checksum for the resource '/resources/theme/mysite/normal/css/sprites/images/mysprite.png'

so looking into the code I can see that this occurs in the PostProcessorCssImageUrlRewriter:248. The exception is thrown because of the getResourceAsStream method of CssSmartSpritesResourceReader:
	public InputStream getResourceAsStream(String resourceName,
			boolean processingBundle) {
		String path = resourceName; // <----- /resources/theme/mysite/normal/css/sprites/images/mysprite.png
		GeneratorRegistry generatorRegistry = jawrConfig.getGeneratorRegistry();
			path = path.replace(':', '/');
			path = GeneratorRegistry.SPRITE_GENERATOR_PREFIX+JawrConstant.URL_SEPARATOR+path; // <---- sprite//resources/theme/mysite/normal/css/sprites/images/mysprite.png
		path = JawrConstant.SPRITE_GENERATED_IMG_DIR+path; // <--- /generatedSpriteImg/sprite//resources/theme/mysite/normal/css/sprites/images/mysprite.png
		return ((StreamResourceReader) resourceReader).getResourceAsStream(path, processingBundle);

So as you can see it prepends "/generatedSpriteImg/sprite/" so the whole url becomes:

and then it tries to load it from the file system but the file is not there Frown
The file is actually in:

So I guess these constants are wrong:

Maybe they correspond to a different smartsprites version?
Posted: January 27, 2014 09:04 by icefox

I've got a patch for this bug but didn't get time to test it properly.
I'll try to fix this, this week if I get time.

Posted: January 31, 2014 19:53 by icefox

I've commit the change ont he trunk version.

Can you please check and tell me if you still encounter this issue?

Posted: February 03, 2014 08:03 by paranoiabla
Hi icefox,

i just saw your post this morning. Tested it and seems to be working fine. Thank you Smile Now the only real issue I have left is the jquery map file.
Posted: April 24, 2014 13:45 by Shoot_The_Moon
I checked this with the JAWR code when it was the above and it worked, however with 3.5.1 it isn't working. All my smartsprites are returning as the original image.
Posted: April 24, 2014 20:43 by icefox

Can you be more specific and give me an example when it's not working?

Posted: April 26, 2014 16:49 by Shoot_The_Moon
I use smartsprites to gather my images into one sprite.

When I go to the folder to where they should be created, I see them there, but when I hit a page where I should see a sprite, all the images are referenced to their actual path and not to the sprite.

In the path variable in the getResource method is being set to an incorrect value for the sprites.

The fix for issue 262, revision 1056, works for me, however the path variable changed in a newer revision.
Posted: April 27, 2014 19:34 by icefox

Could you give me a css sample where it doesn't work?
What is the source CSS file and what is generated? (I only need the references to the image URL)

What is the path which is referenced in the processed CSS file?

As I understand the image path in the processed CSS file, is the original one, which seems to indicate that there where not taking in account in the Smartsprites processor.

What do you mean by "In the path variable in the getResource method is being set to an incorrect value for the sprites"?

You can fill a JIRA for this issue, where you can indicate any information, which will help me to understand and correct the issue.

showing 1 - 20 of 25
« Previous 1
Replies: 24 - Last Post: May 08, 2014 18:54
by: icefox
Please Confirm