So, you need to add an ai2html graphic to your sawhorse-driven page. Let's do it!
First, start with your .ai Illustrator file. You can start with something you exported already, but you can run into a lot of problems, so let's just start from the .ai.
Open your Illustrator file up in Illustrator.
If you've run ai2html before, or are using my template, you'll have a little box on the left-hand side. This box is your settings. If you don't have this box, run the ai2html script and it'll show up.
ENHANCE!
The two things we're interested in are these two:
html_output_extension: .hbs
image_output_path: images
This means that instead of generating an .html file, ai2html will use a .hbs extension. It'll also store all of the images it generates in the sensibly-named images/ folder. You'll need to change these settings if they don't match yours.
Now run ai2html. Video here, if you need it.
If you get an error message about fonts this tutorial will help you troubleshoot it.
Now you can open up ai2html-output and see an .hbs file and a series of images inside of ai2html-output/images. Your filenames will be different, don't worry!
Now we need to **move these into our project.
Your .hbs file goes a partials directory - in this case, we've put it into src/html/story. Any folder inside of src/html would be fine, though!
Your images go into src/images.
Now we have a handlebars template, and we can just use it like any other partial. In this case, we saved ours as src/html/story/illustrator_demo.hbs. In order to include it on a web page, we use this code:
{{> story/illustrator_demo }}
Restart your server since we added new files, and you should be good to go!
You don't have to do anything!!! The site should automatically include the resizer.js script from the NYT (I think it's in most of the templates). If not, just add this to your <head>:
<script src="scripts/vendor/ai2html-resizer.js"></script>
