A basic template to get you up and running fast. Scaffolds the html, css, and js necessary for a responsive iframe graphic, hassle-free.
In Terminal, navigate to your project directory (command line tutorial). Then run:
curl -Lk https://goo.gl/xlXWDl > Makefile; make basic;
That's it. You are now ready to do work. (see advanced version setup)
To see your graphic, open index.html
in a browser or run make server
if you have light-server.
All your code should go in the src
folder:
src/index.html
src/main.css
src/main.js
src/assets
Please note: If you ever find yourself needing to make an absolute path reference, remember to use '//' not 'http://'.
To integrate ai2html output into this generator, first make sure to follow instructions in Setup project. Then:
.ai
file to the src
folder and call it online.ai
.image_output_path
setting. Change it from blank to assets/
.Now, every time you run the ai2html script:
make ai2html
To deploy, follow the instructions in the How to deploy section.
The template comes equipped with base.css, a stylesheet containing reset, default Globe styles, typography, and layouts. See here for documentation and best practices.
window.pathToJPT = ''
Important If you ever make changes to the CSS and file and have to republish, make sure to update the version in the src/index.html
file so it will cache bust the previous one. (Simply look for main.css?version
in the file and update the number.)
Note: Add <p:style src='https://apps.bostonglobe.com/common/css/igraphic/igraphic-0.1.0.css'/>
to the top of the jpt if using as an igraphic.
Click on each of the files in the folder and right-click actions --> portalpubBG initially, and each time you change any of the files.
Once you've published all the files, you can access the index.html - the actual graphic - by modifying this url appropriately:
https://c.o0bg.com/rw/Boston/2011-2020/WebGraphics/<SECTION>/BostonGlobe.com/<YEAR>/<MONTH>/<SLUG>/index.html
https://c.o0bg.com/rw/Boston/2011-2020/WebGraphics/Metro/BostonGlobe.com/2015/09/hut/index.html
In methode.jpt
, replace all occurences of ${storyID}-1 with incrementing numbers for each additional graphic. So if you have two graphics, the second should be ${storyID}-2. There are two places, one near the top and one near the bottom.
In general, it is unwise to reuse a jpt in multiple articles. Changing this number in a jpt will cause it to disappear from previously published articles.
This requires node, and uses webpack with babel transform and stylus.
curl -Lk https://goo.gl/xlXWDl > Makefile; make advanced;
If using advanced setup, run npm start
to compile and preview
Light-server lets you setup a local server for live reloading when a file changes, and so that others in the building can see what you are working on.
Make sure to have node and light-server installed. Check by typing node --version
and light-server --version
in Terminal.
In the root of your project run make server
. Hitting ctrl + c
will stop the process.
Changes to any file in the src
folder will trigger your browser to reload.
Here is a list of the currently available libraries:
To use, just add a script tag in the src/index.html
page where it says "". jQuery is included but commented out by default. Simply uncomment to include. If there is a library you would like added, talk to Russell.
I'm glad you asked...
methode.jpt
can be integrated into almost any other CMS, which means other news organization or blogs can run our graphics (if we so desire).Iframes are great for the reasons mentioned above. If your graphic necessitates having one of the following features however, you might want to reconsider your design or the use of iframe.
While there are workarounds that involve setting up messaging between the parent and child, anything involving manipulating the scroll position is advised against.
Sometimes you want to do a thing based on the height of the browser (ie. make a map take up 2/3 of the browser). In order to get the height of the parent window, you must add this to src/main.js
(just below the line init()
at the bottom):
(function setupRequest() {
if(window.pymChild) {
/*** get parent height.... ***/
window.pymChild.sendMessage('height-request', true);
window.pymChild.onMessage('height-send', function(msg) {
var initialHeight = +msg;
/*** call a function here, passing it the "initialHeight" variable ***/
//example: createChart(initialHeight);
});
} else {
setTimeout(setupRequest, 30);
}
})();
Released under the MIT open source license. See LICENSE
for details.
Super thanks to NPR Visuals team for pym.js.