-
Notifications
You must be signed in to change notification settings - Fork 2
Images guidelines beta
All images are stored in the images folder to which the markdown posts link. For clarity, the images are named following the scheme below:
lang_guide_chapter_imageXX.png
[1]
for example: nl_beg_ch3_image06.png
The width of the images should not be over 520px. While there is no obvious advantage to have all images in .png
format, it does make batch changes easier when doing batch processing. Most screenshots are by default in .png
. The takeaway: Use .png
whenever possible.
If you are not familiar working with command line tools, feel free to manually tweak the images with the software of your choice. Both PC and Mac should have default image editing software. You can also use an open source image editor such as Seashore.
This is the format of the link. What goes in the []
will show on hover.
![]({{site.baseurl}}/images/nl_beg_ch3_image06.png)
After downloading google docs as webpage (.html), the images will be neatly packaged and numbered as image00
, image01
, etc in the images/
folder that comes with it. A few steps of processing will make it clean for the markdown posts. All process happens in the image directory and are executed in terminal.
To convert imageXX.png
to nl_beg_ch3_imageXX.png
, run
for image in dir -d *; do echo mv $image $(basename nl_beg_ch3_$image .png).png; done
This is a dry run (without actually producing the new files). If you think what you see in terminal looks good, remove echo
and the script will take effect.
for image in dir -d *; do mv $image $(base nl_beg_ch3_$image .png)_en.png; done
The following the operations require imageMagick, a software suite for manipulating images.
All process happens in the image directory and are executed in terminal.
for image in *.jpeg; do echo convert $image $(basename $image .jpeg).png; done
Dry run. Take away echo
when executing.
for image in *.png; do echo convert $image -resize 520x\> $(basename $image); done
Again, dry run. Take away echo
when executing. The \>
targets at images wider than 520px and shrinks them down to 520px.
[1]: Current images might differ from the neat-looking numbers because the conversion method at the time produced those artifacts (for example, when odt is saved as html in Libreoffice, it produces randomized UID for each image, thus the long name). This is no longer a concern. When using google drive to pipe out html, the naming scheme should be simple and clean.