how to use retina

[choongmanee]

Hi i'm having issues trying to use the retina feature. i'm not sure what to put in classifier and are there any additional packages i need besides webpack-spritesmith to use the retina feature? A working example of this feature would be a useful guide. Thanks!

retina: { classifier: true, // not sure what to put here targetImage: path.resolve(__dirname, 'path/to/file2x.png), cssImageRef: '~/public/path/to/file2x.png' }

[mixtur]

Usually you don't have to use detailed config with classifier and such, unless you having some special folder structure.

If you have something like this

sprite_source_images/
|--file.png
|--file@2x.png
|--another-file.png
|--another-file@2x.png

Then retina: "@2x" - will be enough.

though if you have something more peculiar, like

sprite_source_images
|--normal/
|  |--file.png
|  |--another-file.png
|--retina/
   |--file.png
   |--another-file.png

Then you'll have to use classifier etc. I should probably remove this possibility because I honestly don't think anyone will ever need this. But it will be a BREAKING CHANGE and I don't want to go there.

[bennam]

Is it possible to pass in multiple retina sprites eg @2X, @3X? Cheers

[mixtur]

It is not currently possible, sorry.

[ghost]

Hi, I used the retina: "@2x" configuration, and it builds correctly, but my retina image keeps its original size (40x40px), and should be displayed at 20x20px And I can't play with background size to reduce because it's a sprite Did I forget something ?

[mixtur]

Not sure. I need more details. To be clear. Both sprites are correctly compiled, and one is twice bigger than the other. (That is fine) But when you actually use them they are also take different space on the page? That is weird. What is your CSS preprocessor. How are you using it? Or you are using plain CSS?

[ghost]

I use Stylus. My sprite.styl is updated with retina variables and mixins, the sprite@2x.png is also created. But then, the generated css only contains @1x classes.

new SpritesmithPlugin({
  src: {
    cwd: APP_DIR + '/src/spritesrc',
    glob: '*.png'
  },
  target: {
    image: APP_DIR + '/src/css/sprite.png',
    css: APP_DIR + '/src/css/sprite.styl'
  },
  apiOptions: {
    cssImageRef: '~sprite.png'
  },
  retina: '@2x'
})

[mixtur]

I am using this set of templates to generate css/sass/less/stylus.

From what I can see here, you should probably use retinaSprite or retinaSprites.

[ghost]

I finally found how to load every icon classes in my stylus file (@1x and @2x) But now I have a problem with the icons positions. I used retinaSprites mixin to generate the classes.

Example of a loaded retina icon : .cs-outside-view-active { background-image: url(css/sprite@2x.png); background-size: 119px 73px; }

Only the background size is changed (not the position). And the given background size is bigger than the half of my retina sprite : 200x148px should return 100x74px, not 119x73px .... And the ratio isn't the same at all.

I don't understand the logic. Looks like the calculations are wrong...

[ghost]

Just realized my two sprites don't put the icons at the same place. So the ratio can change.

[mixtur]

They should be at the same place if they all exactly twice bigger then their non-retina counterparts

[ghost]

Ahhhh the problem was there. An icon was not twice bigger than the non-retina version. Just resolved it. It works now ! Thank you ;)

[mixtur]

Closing due to inactivity