Image Naming Convention

Publishing Tasks: Phase 1 Submission

Image Naming Convention

An image file naming convention has been established for the following reasons:

• Images in ph-submissions Preview will always display
• Managing Editors will not be confused/make mistakes when they are identifying which images to move over to Jekyll
• Lesson Maintenance will be simpler because images will be named consistently

Image file names will consist of 4 parts:

• a prefix which indicates the language (en, es, fr, pt)
• an infix which indicates whether the image is an original or a translation (or, tr)
• the lesson-file-name (matching the lesson's slug:)
• a two-digit suffix number to indicate the sequence (01, 02, 03 ...)

Here's an example for an original English lesson:

en-or-computer-vision-deep-learning-01.png
en-or-computer-vision-deep-learning-02.png
en-or-computer-vision-deep-learning-03.png
en-or-computer-vision-deep-learning-04.png

And for a French translation of that lesson which uses all new images:

fr-tr-vision-par-ordinateur-apprentissage-profond-01.png
fr-tr-vision-par-ordinateur-apprentissage-profond-02.png
fr-tr-vision-par-ordinateur-apprentissage-profond-03.png
fr-tr-vision-par-ordinateur-apprentissage-profond-04.png

For a French translation which creates some new images, but keeps others as original:

en-or-computer-vision-deep-learning-01.png
en-or-computer-vision-deep-learning-02.png
fr-tr-vision-par-ordinateur-apprentissage-profond-02.png
en-or-computer-vision-deep-learning-03.png
en-or-computer-vision-deep-learning-04.png
fr-tr-vision-par-ordinateur-apprentissage-profond-04.png

If you were the French Managing Editor preparing to move the files (above) over to Jekyll for publication, you would only need to move those with the fr-tr prefix.

--

Here's an example of how that file list might look if the lesson is later translated into Spanish. Again, this translation creates some new images but keeps others as they were in the English original:

en-or-computer-vision-deep-learning-01.png
en-or-computer-vision-deep-learning-02.png
fr-tr-vision-par-ordinateur-apprentissage-profond-02.png
es-tr-vision-artificial-para-humanidades-02.png
en-or-computer-vision-deep-learning-03.png
es-tr-vision-artificial-para-humanidades-03.png
en-or-computer-vision-deep-learning-04.png
fr-tr-vision-par-ordinateur-apprentissage-profond-04.png
es-tr-vision-artificial-para-humanidades-04.png

If you were the Spanish Managing Editor preparing to move the files (above) over to Jekyll for publication, you would only need to move those with the es-tr prefix.

--

Icon naming convention

Some lessons may want to display icons inline (small square images about the height of a capital letter). This can be added inline using the following syntax:

![IconName](http://programminghistorian.github.io/ph-submissions/images/lesson-slug/icon-filename-1.png)

(Note that icons can also be gif.) We reduce the link to only /images/lesson-slug/icon-filename-1.png when staging in Jekyll.

The icon-filename convention is almost identical to the image filename convention. The only difference is replacing 01 with icon1:

es-or-introduccion-map-warper-icon1.png
es-or-introduccion-map-warper-icon2.png
es-or-introduccion-map-warper-icon3.png
es-or-introduccion-map-warper-icon4.png
etc.

The sequence of images is separate from the sequence of icons. To illustrate, the lesson es-or-introduccion-map-warper has:

es-or-introduccion-map-warper-01.png
es-or-introduccion-map-warper-02.png
es-or-introduccion-map-warper-03.png
es-or-introduccion-map-warper-04.png
es-or-introduccion-map-warper-icon1.png
es-or-introduccion-map-warper-icon2.png
es-or-introduccion-map-warper-icon3.png
es-or-introduccion-map-warper-icon4.png
etc.