Menu icon Foundation
Handlebars Img SRC depending on test or production

Hello,

When I design my emails I first do it locally and then upload them to production on my server. I make lots of emails based on the same template.

I was thinking to include a handlebars function so I can add the address where the mail is located on the server (for assets like imgs) but be able to change it if I'm working locally. 

Something like:

---
is_local: true
websrc: http://www.mywebsite.com/mailing/
email_version: 25_05_2016/

if (is_local) {
root: "";
} else {
root: websrc + email_version
}

This is so I can add {{root}} to all my images or assets, like

<img src="{{root}}/assets/img/img1.png" />

I know the code in Handlebars isn't supposed to be written like I did, but I've been unable to make it work so far. Any help would be appreciated.

Thanks!

Handlebarsautomatization

Hello,

When I design my emails I first do it locally and then upload them to production on my server. I make lots of emails based on the same template.

I was thinking to include a handlebars function so I can add the address where the mail is located on the server (for assets like imgs) but be able to change it if I'm working locally. 

Something like:

---
is_local: true
websrc: http://www.mywebsite.com/mailing/
email_version: 25_05_2016/

if (is_local) {
root: "";
} else {
root: websrc + email_version
}

This is so I can add {{root}} to all my images or assets, like

<img src="{{root}}/assets/img/img1.png" />

I know the code in Handlebars isn't supposed to be written like I did, but I've been unable to make it work so far. Any help would be appreciated.

Thanks!

Ruvalter over 1 year ago

After this change gulp does not work. The "chmod" is not defined. Also the command "foundation build" does not work.

Corey Schaaf over 3 years ago

There are few steps in order to use variables. They aren't outlined really well in the Docs so I'll go through my process with you. 

First, inside your src folder you need to create a a folder and call it "data".  

Inside that folder I created a file called variables.yml.  You can name this whatever you want, but the name of the folder is important when referencing the variables inside of it.  We'll get to that in a moment. 

After you've created a yml file I setup my variables like so: 

---
local-portal:'http://localhost.workboots'
root-portal: 'http://workboots.com'
portal: 'WorkBoots.com'

YML files have certain syntax that you can look up. Sometimes you may have to escape characters depending on the complexity of your variable. I'm just showing a few that I use in my file instead of all of them. 

The next this to do is to modify the gulpfile.babel.js that exist in the root of you project folder. 

Around line 50 you'll see the following: 

// Compile layouts, pages, and partials into flat HTML files
// Then parse using Inky templates
function pages() {
  return gulp.src('src/pages/**/*.html')
    .pipe(panini({
      root: 'src/pages',
      layouts: 'src/layouts',
      partials: 'src/partials',
      helpers: 'src/helpers',
      data: 'src/data'
    }))
    .pipe(inky())
    .pipe(chmod(755))    //added this to fix file perms
    .pipe(gulp.dest('dist'));
}

Notice that I added:

data: 'src/data'

Also, make sure when you add this line that you add a comma after the line before it. But do not inlcude a comma on this new line.  

After that, you will need to use the command: 

foundation build

This will rebuild the project. It will also find the new data folder and .yml file you created. Assuiming your syntax is correct in the yml file the variables you add should be read. 

Then, whatever function you're building for local vs production can be used since you can create two separate variables. 

Now remember, when referencing a variable I said you could name the .yml file whatever you wanted. So when you want to access one of those variables I write it like so: 

<a href="{{ nameofymlfile.nameofvariable }}">test</a>
<!-- Remeber the name of my file was called variables.yml 
 and I had a variable called root-portal which was set = to http://workboots.com. If I wanted to access that variable I would write my handelbars like so
-->

<a href="{{ variables.root-portal }}">test</a>

<!-- the output of that would translate into this -->
<a href=" http://workboots.com">test</a>