Skip to content

Images guidelines beta

jueyang edited this page Feb 20, 2013 · 3 revisions

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.

1. How images are linked in the markdown post

This is the format of the link. What goes in the [] will show on hover.

![]({{site.baseurl}}/images/nl_beg_ch3_image06.png)

2. Processing image names, formats and sizes in batch

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.

- adding prefix and suffix

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.

- converting to png

for image in *.jpeg; do echo convert $image $(basename $image .jpeg).png; done

Dry run. Take away echo when executing.

- resizing

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.