Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Trouble setting up custom templates / Using PNG instead of SVG optionally #56

Closed
6eDesign opened this issue Jul 8, 2015 · 4 comments
Closed
Assignees
Labels

Comments

@6eDesign
Copy link

6eDesign commented Jul 8, 2015

Hello,

This is an awesome project you have going here, thanks so much for your hard work. I'm hoping you can point me in the right direction on a requirement I'm trying to accomodate: optionally using PNG sprites instead of SVG.

I have already used grunt-svg2png to automatically convert all SVG's in my spritesheet folder to PNG files after the grunt-svg-sprite task runs. Now, I'm just trying to sort out how I implement a custom template or otherwise tell grunt-svg-sprite to map CSS URL's to the .png file instead of the .svg.

FWIW, I only want to do this some of the time. I've read this issue #29 but your proposed solution there does not appear to be working.

Here is the template I'm trying to include:

{{#svg}}{{#selector}}.{{expression}}{{^last}},
{{/last}}{{/selector}} {
background-position: {{position}};
background-repeat: no-repeat;
background-image: url({{#png}}{{{sprite}}}{{/png}});
background-image: linear-gradient(transparent, transparent), url({{{sprite}}});
}
{{/svg}}

From the base directory (where Gruntfile is located), this file is located in sprites/templates/email.css. I have tried including this like so (as suggested, if I'm reading it correctly, in that other issue):

render: {
css: {
template: 'sprites/templates/email.css'
}
}

FWIW, I did figure out how I could manipulate the color/fill of the SVG using the post transformation on the sprite (which I thought would be the harder of the two issues I initially encountered). In any case, I'm left with this one now and very sorry to bug you but hopefully you can help.

Thanks again.

@6eDesign
Copy link
Author

6eDesign commented Jul 8, 2015

Also, fwiw I've defined the png function in the variables object.

@jkphl
Copy link
Collaborator

jkphl commented Jul 29, 2015

Hey @6eDesign,

first of all sorry for not responding earlier! I must have overseen your issue somehow and just "found" it when checking the repo. I'll do my best to help you with this one (if it's still relevant‽).

Could you please post your complete configuration object so that I can get an overview? Thanks!

Cheers,
Joschi

@jkphl jkphl self-assigned this Jul 29, 2015
@jkphl jkphl added the question label Jul 29, 2015
@jkphl
Copy link
Collaborator

jkphl commented Aug 19, 2015

@6eDesign Any updates on this one?

@jkphl
Copy link
Collaborator

jkphl commented Sep 18, 2015

@6eDesign As there hasn't been any activity on this for quite a while, I will close this for now. Please feel free to let me know if you've still got problems with this.

@jkphl jkphl closed this as completed Sep 18, 2015
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants