Apocalism.js (or, How I Automated My Illustrated Short Story Build Process)(andrey-p.github.io)
andrey-p.github.io
Apocalism.js (or, How I Automated My Illustrated Short Story Build Process)
http://andrey-p.github.io/
1 comments
very interesting! I was looking for some solution to maintain a photo blog lately. could you give a clearer example how to work with images with your solution? do you maintain the pictures in a directory before/after a build?
Thanks! I'm not really sure if a photo blog would be the best use for this tool. What I had more in mind is trying to get a text written in markdown as a printable book - the HTML output would be simply an online representation of that printable book.
Here's something in the way of an example:
Say you've got an image which is 1299x901 pixels, called "foo.png". It's pretty big because we want it to be a certain size when viewed at 300dpi (ie print quality).
Before the build, it'll be stored at a folder called "images/" at the root of your project folder. In your markdown text you reference its with its filename only. So you reference it as "".
If you build with the "--output html" option, the image will be copied over to the output folder, and it'll be referenced in the HTML as "<img width='415' height='288' src='images/foo.png'/>".
Note the width and height in the markup are reduced - this is so the image will keep its relative size with the text when viewed at 96dpi, but if you print the page it'll still look crisp and nice. (This is what happens when you create a print-ready PDF, too.)
If you build with the "--lo-res" option, the image will still be referenced in the HTML as "<img width='415' height='288' src='images/foo.png'/>", but the file will be reduced to that size when copied. So on one hand it'll take up less space, and on the other hand it won't be good to print.
Hope that clears things up a bit.
Here's something in the way of an example:
Say you've got an image which is 1299x901 pixels, called "foo.png". It's pretty big because we want it to be a certain size when viewed at 300dpi (ie print quality).
Before the build, it'll be stored at a folder called "images/" at the root of your project folder. In your markdown text you reference its with its filename only. So you reference it as "".
If you build with the "--output html" option, the image will be copied over to the output folder, and it'll be referenced in the HTML as "<img width='415' height='288' src='images/foo.png'/>".
Note the width and height in the markup are reduced - this is so the image will keep its relative size with the text when viewed at 96dpi, but if you print the page it'll still look crisp and nice. (This is what happens when you create a print-ready PDF, too.)
If you build with the "--lo-res" option, the image will still be referenced in the HTML as "<img width='415' height='288' src='images/foo.png'/>", but the file will be reduced to that size when copied. So on one hand it'll take up less space, and on the other hand it won't be good to print.
Hope that clears things up a bit.