Image dimensions without additional class

[thulstrup]

Is there a way to get the image dimensions without having to add an additional class to the markup?

At the moment the css looks like this (with dims set to true):

.icon-star { 
  background-position: 0 0;
  background-repeat: no-repeat;
  background-image: url(icons/icons.svg);
}

.icon-star-dims {
  width: 32px;
  height: 32px;
}

What I would like is this:

.icon-star { 
  background-position: 0 0;
  background-repeat: no-repeat;
  background-image: url(icons/icons.svg);
  width: 32px;
  height: 32px;
}

[jkphl]

Hey Rasmus,

that's definitely possible — by appropriately customizing the rendering templates respectively using custom templates. You didn't mention that you're using Sass or LESS, so I'll assume you're outputting plain CSS, right? Do it like this (untested — I'm on holiday in a camping car and only on my mobile phone right now):

In your Gruntfile.js:

/* ... */
render: {
    css: 'path/to/custom/template.css'
}
/* ... */

In your path/to/custom/template.css (relative to your main output directory):

{{#common}}.{{prefix}} {
    background-repeat: no-repeat;
    background-image: url({{sprite}});
}

{{/common}}{{#svg}}{{#selector}}.{{expression}}{{^last}},
{{/last}}{{/selector}} { {{#sprite}}
    background-position: {{position}};{{/sprite}}{{^common}}
    background-repeat: no-repeat;
    background-image: url({{#sprite}}{{sprite}}{{/sprite}}{{^sprite}}{{#encode}}"{{encoded}}"{{/encode}}{{^encode}}{{path}}{{/encode}}{{/sprite}});{{#dims}}{{#dimensions}}
    width: {{width}}px;
    height: {{height}}px;{{/dimensions}}{{/dims}}{{/common}}
}

{{/svg}}

Does this work?

Cheers from Japan, Joschi

[thulstrup]

Custom render templates is exactly what I need.

I've made a minor adjustment to the Grunt task but otherwise your example worked perfectly.

/* ... */
render: {
  css: {
    template: 'path/to/custom/template.css',
    dest: 'path/to/dest/file.css'
  }
}
/* ... */

Thanks for helping out and enjoy the rest of your holiday :-)

[jkphl]

Cool! Sorry, yeah, I forgot about the distinct definition of the template file — but I see you got it anyway. ;) Happy spriting!