In the template we've been using, I used @media CSS queries to tell the page which to use at which size. This won't work for larger numbers of graphics (at least without effort), so we're going back to using the JavaScript I used in the YouTube walkthrough.
Each graphic should be in a different file. Keep them in the same folder, though.
When ai2html runs, it will create images and HTML for each graphic. The filenames of your images and HTML will be based on the filename of your Illustrator file + the name of the artboards.
If you're irritated about the fact that all of these images are in the same folder as your HTML file, you'll need to edit the settings block in your Illustrator file (the text block on the far left). Where it says image_output_path, change it to say image_output_path: images. When you export again, all of your images will be set up in a nice folder called images - flowers will bloom, rainbows will shine, etc. I should have set it up like that initially, but I don't want to change the template this far in!
Just like you did before, copy the HTML into your template and move your files into the same folder as your template.
There's one tricky part - each place you want to include an ai2html graphic, you should use all of this code:
<div class="chart-section">
<div class="chart-row">
<div class="chart">
<!-- AI2HTML content goes here -->
</div>
</div>
</div>That allows it to work with the existing template. This means before you paste, your template will look something like this:
Open up your story's HTML file and confirm that the graphics show up (all three sizes, for each). The next step will be to make them responsive.
As I mentioned up above, we were previously using CSS to show and hide the different versions of the charts. Instead, we'll now need to insert some JavaScript instead, kust like in the video. You can put this code just about anywhere in the HTML.
<script type="text/javascript">
(function() {
// only want one resizer on the page
if (document.documentElement.className.indexOf("g-resizer-v3-init") > -1) return;
document.documentElement.className += " g-resizer-v3-init";
// require IE9+
if (!("querySelector" in document)) return;
function resizer() {
var elements = Array.prototype.slice.call(document.querySelectorAll(".g-artboard[data-min-width]")),
widthById = {};
elements.forEach(function(el) {
var parent = el.parentNode,
width = widthById[parent.id] || parent.getBoundingClientRect().width,
minwidth = el.getAttribute("data-min-width"),
maxwidth = el.getAttribute("data-max-width");
widthById[parent.id] = width;
if (+minwidth <= width && (+maxwidth >= width || maxwidth === null)) {
el.style.display = "block";
} else {
el.style.display = "none";
}
});
try {
if (window.parent && window.parent.$) {
window.parent.$("body").trigger("resizedcontent", [window]);
}
if (window.require) {
require(['foundation/main'], function() {
require(['shared/interactive/instances/app-communicator'], function(AppCommunicator) {
AppCommunicator.triggerResize();
});
});
}
} catch(e) { console.log(e); }
}
document.addEventListener('DOMContentLoaded', resizer);
// feel free to replace throttle with _.throttle, if available
window.addEventListener('resize', throttle(resizer, 200));
function throttle(func, wait) {
// from underscore.js
var _now = Date.now || function() { return new Date().getTime(); },
context, args, result, timeout = null, previous = 0;
var later = function() {
previous = _now();
timeout = null;
result = func.apply(context, args);
if (!timeout) context = args = null;
};
return function() {
var now = _now(), remaining = wait - (now - previous);
context = this;
args = arguments;
if (remaining <= 0 || remaining > wait) {
if (timeout) {
clearTimeout(timeout);
timeout = null;
}
previous = now;
result = func.apply(context, args);
if (!timeout) context = args = null;
} else if (!timeout && options.trailing !== false) {
timeout = setTimeout(later, remaining);
}
return result;
};
}
})();
</script>In this image, I put it up near the top:
And then you should be done!
