Menu icon Foundation

Designer | Rochester Ny

I'm been knee deep in web design/dev

My Posts







My Comments

Ethan Hackett commented on Ethan Hackett's post over 1 year

Just so user don't have to hunt for Will's explination here's what he said on the other thread.
Rather than going through Panini use yargs and access the variable directly in the helper file var selected = yargs.argv.dealer;.
"Then my helper file info.js looks like "
import yargs from 'yargs';

module.exports = function(options) {

var selected = yargs.argv.dealer;
var dealer = options.data.root.dealers[selected];
var data = dealer[options.fn(this)];

return data;
}

Ethan Hackett commented on will hart's post over 1 year

Works great thanks Will!

Ethan Hackett commented on Ethan Hackett's post over 1 year

Kevin,
I think Will gave a more fitting example here. It looks like the data snippet you mentioned might be able to do it but the data needs to be dynamic to match the gulp process ie dev/prod builds. Wills example shows you could pull yarg properties right into a helper which which is way simpler than pulling going through Panini.

Ethan Hackett commented on will hart's post over 1 year

Oh interesting so it looks like in your info.js example you can pull yarg variables. That's cool I just assumed it was too far down stream to maintain arguments.

Ethan Hackett commented on Jay Robinson's post over 1 year

Corey glad you got it working and thanks for sharing the {{root}} solution.

Ethan Hackett commented on Jay Robinson's post over 1 year

Corey,
I believe you're right with the direcotry issue looking for css/app.css if your emails are burried in a sub folder it needs to be ../css/app.css where each ../ goes up a level in the folders.
But you'd need to make sure each of your sub directories are the same depth like the example bellow.

company_1- email 1- email 2
company_2- email 1- email 2

You also might be able to create multiple layout files with matching paths to css ie one is /css/apps.css and the other is ../css/apps.css and two levels down would use ../../apps.css but I haven't created multuple layouts yet so I don't know how to implement that.
A third option would be to explore using partials which would allow you to create reusible headers/footers for each company and you include them at the top and bottom of each email. This way if the content is relatively the same you can easily move them between companies and just swap out the includes to project specific partials.

Ethan Hackett commented on will hart's post over 1 year

Will,
I'm not sure if this would help but I was exploring global variables in INK recently and found a possible solution.
Here's why I went the route I did - http://foundation.zurb.com/forum/posts/39280-filler-textvariable-handlebar-helper-or-partial
Here's the npm package comment https://github.com/zurb/panini/issues/51
Pros: you could use yargs which is already included in ink to pass a variable to a custom build like this... npm run location South-Beath and then it would pass the argument South-Beath as a variable to your gulp build, define the globals variable in panini which passes it down stream to your templates.
Cons: At the moment this would be a custom change to the panini npm package which means it would break when you update the package and you'd need to fix it manually after each update. I requested that globals be added to panini for the future but at the moment it's a work around.
I hope that helps @ethanhackett

Ethan Hackett commented on Ethan Hackett's post over 1 year

I ended up writing a handelbar/panini helper that was a combination of the two.
Version 1.0 var-filler.js
module.exports = function(variable, filler, context) {
if (context.data.root.globals.filler === false) {
var arr = variable;
} else {
var arr = filler;
}
return arr;
}

In the code the snippet looks like the following.
{{ var-filler 'first_name' 'John Smith' }}
This will either output first_name or 'John Smith' depending on the build process.
It also required a little tweaking to the panini npm package file render.js (see git tweaks and reasoning) I suggested the change to the repo because without it there doesn't seem to be a way to globally set a paramiter to turn the variable/filler back and forth. So the tweak above lets me set a 'globals' variable in Panini which I can then use later in any helper. In this project I use filler as the object and pass a true/false statement which in return determains whether to output filler or variable names.
function pages() {
return gulp.src('src/pages/*/.html')
.pipe(panini({
root: 'src/pages',
layouts: 'src/layouts',
partials: 'src/partials',
helpers: 'src/helpers',
globals: { filler : FILLER }
}))
.pipe(inky())
.pipe(gulp.dest('dist'));
}
Todo: I want might add anothe object in the globals variable option for open and closing the variable. For instance I might want to set whether the output as a ruby variable <% @var %> or a php var <? @var ?> etc so rather than modifying the helper I could pass them along as a globals variable or maybe on a pr value option.

Ethan Hackett commented on Ethan Hackett's post over 1 year

Sorry I didn't know how to best highlight new/modifications to the gulp file so it is a little lengthy.

Ethan Hackett commented on Ethan Hackett's post almost 2 years

Sweet thanks!

Posts Followed

  • 10
    Replies
  • Question about Projects

    By Jay Robinson

    SASS version

    This might be a really dumb question, but here goes. When working with the&nbsp;Sass version of Foundation for Emails do I have to install a new project every time I want to make a new email? Or can I just create new pages within the src directory? If the... (continued)

    Last Reply by Ethan Hackett over 1 year ago


  • 4
    Replies
  • Injecting global data into template

    By will hart

    data

    Ok so I am not sure I am wording this correctly, but the concept is we have a client with a fair number of locations. &nbsp;Each has its own phone number, address, etc, etc. I want to work within the foundation email framework but&nbsp;not have a seperate... (continued)

    Last Reply by Ethan Hackett over 1 year ago




Following

    No Content

Followers

My Posts

My Comments

You commented on Ethan Hackett's post over 1 year

Just so user don't have to hunt for Will's explination here's what he said on the other thread.
Rather than going through Panini use yargs and access the variable directly in the helper file var selected = yargs.argv.dealer;.
"Then my helper file info.js looks like "
import yargs from 'yargs';

module.exports = function(options) {

var selected = yargs.argv.dealer;
var dealer = options.data.root.dealers[selected];
var data = dealer[options.fn(this)];

return data;
}

You commented on will hart's post over 1 year

Works great thanks Will!

You commented on Ethan Hackett's post over 1 year

Kevin,
I think Will gave a more fitting example here. It looks like the data snippet you mentioned might be able to do it but the data needs to be dynamic to match the gulp process ie dev/prod builds. Wills example shows you could pull yarg properties right into a helper which which is way simpler than pulling going through Panini.

You commented on will hart's post over 1 year

Oh interesting so it looks like in your info.js example you can pull yarg variables. That's cool I just assumed it was too far down stream to maintain arguments.

You commented on Jay Robinson's post over 1 year

Corey glad you got it working and thanks for sharing the {{root}} solution.

You commented on Jay Robinson's post over 1 year

Corey,
I believe you're right with the direcotry issue looking for css/app.css if your emails are burried in a sub folder it needs to be ../css/app.css where each ../ goes up a level in the folders.
But you'd need to make sure each of your sub directories are the same depth like the example bellow.

company_1- email 1- email 2
company_2- email 1- email 2

You also might be able to create multiple layout files with matching paths to css ie one is /css/apps.css and the other is ../css/apps.css and two levels down would use ../../apps.css but I haven't created multuple layouts yet so I don't know how to implement that.
A third option would be to explore using partials which would allow you to create reusible headers/footers for each company and you include them at the top and bottom of each email. This way if the content is relatively the same you can easily move them between companies and just swap out the includes to project specific partials.

You commented on will hart's post over 1 year

Will,
I'm not sure if this would help but I was exploring global variables in INK recently and found a possible solution.
Here's why I went the route I did - http://foundation.zurb.com/forum/posts/39280-filler-textvariable-handlebar-helper-or-partial
Here's the npm package comment https://github.com/zurb/panini/issues/51
Pros: you could use yargs which is already included in ink to pass a variable to a custom build like this... npm run location South-Beath and then it would pass the argument South-Beath as a variable to your gulp build, define the globals variable in panini which passes it down stream to your templates.
Cons: At the moment this would be a custom change to the panini npm package which means it would break when you update the package and you'd need to fix it manually after each update. I requested that globals be added to panini for the future but at the moment it's a work around.
I hope that helps @ethanhackett

You commented on Ethan Hackett's post over 1 year

I ended up writing a handelbar/panini helper that was a combination of the two.
Version 1.0 var-filler.js
module.exports = function(variable, filler, context) {
if (context.data.root.globals.filler === false) {
var arr = variable;
} else {
var arr = filler;
}
return arr;
}

In the code the snippet looks like the following.
{{ var-filler 'first_name' 'John Smith' }}
This will either output first_name or 'John Smith' depending on the build process.
It also required a little tweaking to the panini npm package file render.js (see git tweaks and reasoning) I suggested the change to the repo because without it there doesn't seem to be a way to globally set a paramiter to turn the variable/filler back and forth. So the tweak above lets me set a 'globals' variable in Panini which I can then use later in any helper. In this project I use filler as the object and pass a true/false statement which in return determains whether to output filler or variable names.
function pages() {
return gulp.src('src/pages/*/.html')
.pipe(panini({
root: 'src/pages',
layouts: 'src/layouts',
partials: 'src/partials',
helpers: 'src/helpers',
globals: { filler : FILLER }
}))
.pipe(inky())
.pipe(gulp.dest('dist'));
}
Todo: I want might add anothe object in the globals variable option for open and closing the variable. For instance I might want to set whether the output as a ruby variable <% @var %> or a php var <? @var ?> etc so rather than modifying the helper I could pass them along as a globals variable or maybe on a pr value option.

You commented on Ethan Hackett's post over 1 year

Sorry I didn't know how to best highlight new/modifications to the gulp file so it is a little lengthy.

You commented on Ethan Hackett's post almost 2 years

Sweet thanks!

Posts Followed




Following

  • No Content

Followers

  • No Content