twolfson/spritesmith

Spritesmith: x and y position generated is wrong when using varying sizes of images.

einsteinreloaded opened this issue · 3 comments

einsteinreloaded commented

The x and y generated is incorrect when different sized images are used for sprite generation in spritesmith npm.

twolfson commented

Can you provide an example case where this is failing?

einsteinreloaded commented

I am trying with 12040 px, 2424px , 40*40px size of images. and generating the css
`
let spriteTemplateFunction = function (data,iconSlugs,spritePath) {
var shared = ".brand-icon-retina { background-image: url('I'); }".replace(
"I",
spritePath
);
var perSprite = Object.keys(data.coordinates)
.map(function (key,index) {
let sprite = data.coordinates[key];
return ".brand-icon-retina_N { width: Wpx; height: Hpx; background-position: Xpx Ypx; }"
.replace("N", iconSlugs[index])
.replace("W", sprite.width)
.replace("H", sprite.height)
.replace("X", sprite.x)
.replace("Y", sprite.y);
})
.join("\n");

return shared + "\n" + perSprite;

};
`
I am using this function to generate sprite css from the output of spritesmith

twolfson commented

CSS sprites require using a negative background-position for what seems an obvious positive position. This is due to implementation. If you update to the following then it should work:

.replace("X", -sprite.x)
.replace("Y", -sprite.y);

Reference in the grunt-spritesmith and gulp.spritesmith libraries: