Actions

JDOC

Difference between revisions of "Image naming guidelines"

From Joomla! Documentation

m
(Marked this version for translation)
 
(28 intermediate revisions by 2 users not shown)
Line 1: Line 1:
{{notice|The information on this page is out-of-date and in the process of being updated. {{Last edited by}}}}
+
<noinclude><languages /></noinclude>
 +
<translate><!--T:28-->
 +
The image naming guidelines are to give documentation contributors a set guidelines about naming an '''uploaded image file <u>not used</u> by Joomla! [[Help screens]]'''. These guidelines are not absolute but for informative purposes. They should only be used as a reference for helping contributors form a good image file name. Naming an image for use in Joomla documentation is not difficult once you understand how the images are processed and stored. Some of the benefits of Mediawiki's method of image storage are an image history, extra image data, and easy image updating.
  
It is quite simple to upload an image on the wiki - once you are familiar with the image naming convention click on 'Toolbox' in the left hand menu bar, then click on 'Upload File'.
+
==Naming an Uploaded Image== <!--T:29-->
 +
The Mediawiki software allows uploaded images to be named by [[Help:Image_uploading|two methods]].
 +
</translate>
 +
# <translate><!--T:30-->
 +
Uploading an image directly, not referenced in a page but will be used. The default name of the image will be the "local" (name in your file system) but it may be changed before the actual upload.</translate>
 +
# <translate><!--T:31-->
 +
Clicking on a red link, referenced in a page already with an image link such as</translate> <nowiki>[[Image:Name of the image-en.png]]</nowiki> <translate><!--T:51-->
 +
or</translate> <nowiki>[[File:Name of the image-en.png]]</nowiki>{{-}}[[File:Name of the image-<translate><!--T:50-->
 +
en</translate>.png]]
 +
<translate>
 +
<!--T:32-->
 +
Of the two methods, the later method is the easiest method to use.
  
The image naming convention aims to:
+
==Naming Pattern Suggestions== <!--T:33-->
* Reduce the likelihood of image name clashes; and
+
Image names should consist of an underscore or hyphenated separated list of descriptive words. Think of them as a summary description of the image.  
* Increase the likelihood that images are re-used.
+
  
Image names should consist of an underscore-separated list of pre-defined tags, detailed below. Tags are generally in order of least specific to most specific and the date on which the image is created or uploaded is appended. Additional tags can be defined as required. Some typical image names are:
+
===Suggested Formats For Joomla Images=== <!--T:34-->
 +
It would be very beneficial if the first part of any Joomla image refers to it's version. This allows someone to instantly know what version of Joomla is connected to the image. Example: <code>j3x</code> or <code>j25</code>. There is no need to insert the .(dot) in the version, please omit it.
 +
</translate>
 
<pre>
 
<pre>
screenshot_content_article_manager_full_20090117.png
+
<jver>-<admin>-<view>.<extension('png' | 'jpg' | 'jpeg' | 'gif')>
screenshot_site_global_config_seo_settings_annotated_20090117.png
+
 
</pre>
 
</pre>
The format is defined as:
+
<translate>
 +
==== Joomla Image Examples ==== <!--T:35-->
 +
A screenshot of Joomla 3.x or 2.5 administrator's view of the article manager could be written as:</translate>
 
<pre>
 
<pre>
<filename> ::= <tag-list>_<yyyy><mm><dd>.<extension>
+
j3x_admin_content_article_manager_articles.png
<tag-list> ::= <tag> | <tag>_<tag-list>
+
j25-admin-content-article-manager-articles.png
<yyyy> ::= 4-digit year number
+
<mm> ::= 2-digit month number
+
<dd> ::= 2-digit day number
+
<extension> ::= 'png' | 'jpg' | 'jpeg' | 'gif'
+
 
</pre>
 
</pre>
  
To further promote image re-use, all image tags have a corresponding category on this wiki and care should be taken to ensure that images are correctly assigned to their relevant categories as defined below.
+
<translate><!--T:36-->
==Top-level Tags==
+
A screenshot of Joomla 3.x or 2.5 site's(frontend) view of the log in module could be written as:</translate>
{| class="wikitable"
+
<pre>
|-
+
j3x_site_protostar_log_in_module.png
!Tag
+
j25-frontent-beez-20-log_in_module.png
!Description
+
</pre>
!Category
+
<translate>
|-
+
===Suggested Formats For non-Joomla Images=== <!--T:37-->
|screenshot
+
|Image is a screenshot of the Joomla package. See below for subsidiary tags.
+
|[[:Category:Joomla screenshots]]
+
|-
+
|eclipse
+
|Image is a screenshot of the Eclipse package.
+
|[[:Category:Eclipse screenshots]]
+
|-
+
|phpmyadmin
+
|Image is a screenshot of the phpMyAdmin package.
+
|[[:Category:PhpMyAdmin screenshots]]
+
|-
+
|diagram
+
|Image is a diagram.
+
|[[:Category:Diagrams]]
+
|-
+
|chart
+
|Image is a chart.
+
|[[:Category:Charts]]
+
|}
+
  
===Joomla screenshots Tags===
+
<!--T:38-->
These tags are defined as subsidiary to the ''screenshot'' tag.  They mostly correspond to the top-level menus in the Administrator, plus the template names for screenshots of the front-end.
+
Common sense and a descriptive summary should be the guide for non-Joomla images. Again, use the underscore _ or hyphen - to separate the summary. For images of people, please use the person's name. For images of software or website's, please include them within reason.
{| class="wikitable"
+
|-
+
!Tag
+
!Description
+
!Category
+
|-
+
|site
+
|Site menu.  See below for subsidiary tags.
+
|[[:Category:Site screenshots]]
+
|-
+
|menus
+
|Menus menu.  See below for subsidiary tags.
+
|[[:Category:Menus screenshots]]
+
|-
+
|content
+
|Content menu.  See below for subsidiary tags.
+
|[[:Category:Content screenshots]]
+
|-
+
|components
+
|Components menu.  See below for subsidiary tags.
+
|[[:Category:Component screenshots]]
+
|-
+
|extensions
+
|Extensions menu. See below for subsidiary tags.
+
|[[:Category:Extensions screenshots]]
+
|-
+
|tools
+
|Tools menu.  See below for subsidiary tags.
+
|[[:Category:Tools screenshots]]
+
|-
+
|help
+
|Help menu.  See below for subsidiary tags.
+
|[[:Category:Help screenshots]]
+
|-
+
|milky_way
+
|Screenshots of the Milky Way template.
+
|[[:Category:Milky Way screenshots]]
+
|-
+
|beez
+
|Screenshots of the Beez template.
+
|[[:Category:Beez screenshots]]
+
|-
+
|ja_purity
+
|Screenshots of the JA_Purity template.
+
|[[:Category:Ja_purity screenshots]]
+
|-
+
|installation
+
|Screenshots of Joomla installation.
+
|[[:Category:Installation screenshots]]
+
|-
+
|parameter
+
|Screenshots of generic parameters.
+
|[[:Category:Parameters screenshots]]
+
|}
+
  
====Site screenshots Tags====
+
====Non-Joomla Image Examples==== <!--T:39-->
These tags are defined as subsidiary to the ''screenshot'' and ''site'' tags.  They correspond to sub-menu items under the ''Site'' menu in the Administrator.
+
{| class="wikitable"
+
|-
+
!Tag
+
!Description
+
!Category
+
|-
+
|control_panel
+
|Screenshots of '''Site -> Control Panel'''.
+
|[[:Category:Control panel screenshots]]
+
|-
+
|user_manager
+
|Screenshots of '''Site -> User Manager'''.
+
|[[:Category:User manager screenshots]]
+
|-
+
|media_manager
+
|Screenshots of '''Site -> Media Manager'''.
+
|[[:Category:Media manager screenshots]]
+
|-
+
|global_config
+
|Screenshots of '''Site -> Global Configuration'''.
+
|[[:Category:Global configuration screenshots]]
+
|}
+
  
====Menus screenshots Tags====
+
<!--T:40-->
These tags are defined as subsidiary to the ''screenshot'' and ''menus'' tags. They correspond to sub-menu items under the ''Menus'' menu in the Administrator.
+
GitHub pull request, the Firefox Firebug tool, or these other examples could be written as:</translate>
{| class="wikitable"
+
<pre>
|-
+
github-pull-request-how-to.png
!Tag
+
eclipse_indigo_interface_egit_browsing_veiw.png
!Description
+
joomla-event-Nov-2013-John-Smith.png
!Category
+
firefox_addon_firebug_colour_picker.png
|-
+
</pre>
|menu_manager
+
<translate>
|Screenshots of '''Menus -> Menu Manager'''.
+
<!--T:41-->
|[[:Category:Menu manager screenshots]]
+
They are short, descriptive and inform the viewer looking at the image call what the image is quickly.
|-
+
|menu_trash
+
|Screenshots of '''Menus -> Menu Trash'''.
+
|[[:Category:Menu trash screenshots]]
+
|-
+
|main_menu
+
|Screenshots of the sample content Main Menu.
+
|[[:Category:Main menu screenshots]]
+
|}
+
  
====Content screenshots Tags====
+
==Localisation of Image Names== <!--T:42-->
These tags are defined as subsidiary to the ''screenshot'' and ''content'' tags.  They correspond to sub-menu items under the ''Content'' menu in the Administrator.
+
{| class="wikitable"
+
|-
+
!Tag
+
!Description
+
!Category
+
|-
+
|article_manager
+
|Screenshots of '''Content -> Article Manager'''.
+
|[[:Category:Article manager screenshots]]
+
|-
+
|article_trash
+
|Screenshots of '''Content -> Article trash'''.
+
|[[:Category:Article trash screenshots]]
+
|-
+
|section_manager
+
|Screenshots of '''Content -> Section Manager'''.
+
|[[:Category:Section manager screenshots]]
+
|-
+
|category_manager
+
|Screenshots of '''Content -> Category Manager'''.
+
|[[:Category:Category manager screenshots]]
+
|-
+
|front_page_manager
+
|Screenshots of '''Content -> Front Page Manager'''.
+
|[[:Category:Front page manager screenshots]]
+
|}
+
  
====Components screenshots Tags====
+
<!--T:43-->
These tags are defined as subsidiary to the ''screenshot'' and ''components'' tags.  They correspond to sub-menu items under the ''Components'' menu in the Administrator.
+
In preparation for documentation localisation, how to address images of different languages needs to be addressed. As documentation becomes localised, it is necessary to let user's and the Documentation Working Group identify images in another language quickly. Please do not use a native language as a file name description. Instead, add a trailing two-letter language code to the end of your file description before you upload the image in the 'base' language description.
{| class="wikitable"
+
|-
+
!Tag
+
!Description
+
!Category
+
|-
+
|banner_banners
+
|Screenshots of '''Components -> Banners -> Banners'''.
+
|[[:Category:Banners banners screenshots]]
+
|-
+
|banner_clients
+
|Screenshots of '''Components -> Banners -> Clients'''.
+
|[[:Category:Banners clients screenshots]]
+
|-
+
|banner_categories
+
|Screenshots of '''Components -> Banners -> Categories'''.
+
|[[:Category:Banners categories screenshots]]
+
|-
+
|contacts_contacts
+
|Screenshots of '''Components -> Contact -> Contacts'''.
+
|[[:Category:Contacts contacts screenshots]]
+
|-
+
|contacts_categories
+
|Screenshots of '''Components -> Contact -> Categories'''.
+
|[[:Category:Contacts categories screenshots]]
+
|-
+
|news_feeds_feeds
+
|Screenshots of '''Components -> News feeds -> Feeds'''.
+
|[[:Category:News feeds feeds screenshots]]
+
|-
+
|news_feeds_categories
+
|Screenshots of '''Components -> News feeds -> Categories'''.
+
|[[:Category:News feeds categories screenshots]]
+
|-
+
|polls
+
|Screenshots of '''Components -> Polls'''.
+
|[[:Category:Polls screenshots]]
+
|-
+
|search
+
|Screenshots of '''Components -> Search'''.
+
|[[:Category:Search screenshots]]
+
|-
+
|web_links_links
+
|Screenshots of '''Components -> Web links -> Links'''.
+
|[[:Category:Web links links screenshots]]
+
|-
+
|web_links_categories
+
|Screenshots of '''Components -> Web links -> Categories'''.
+
|[[:Category:Web links categories screenshots]]
+
|}
+
  
====Extensions screenshots Tags====
+
<!--T:44-->
These tags are defined as subsidiary to the ''screenshot'' and ''extensions'' tags.  They correspond to sub-menu items under the ''Extensions'' menu in the Administrator.
+
Translators of Joomla! Documentation should read:</translate> [[S:MyLanguage/JDOC:Localising Images|<translate><!--T:45-->
{| class="wikitable"
+
Localising Images</translate>]]. <translate><!--T:52-->
|-
+
Translators will find detailed information about translating images.</translate>
!Tag
+
<translate>
!Description
+
<!--T:46-->
!Category
+
Here is the base examples:
|-
+
</translate>
|install
+
<pre>
|Screenshots of '''Extensions -> install/uninstall'''.
+
<jver>-<admin>-<view>-<language code>.<extension('png' | 'jpg' | 'jpeg' | 'gif')>
|[[:Category:Extensions install screenshots]]
+
</pre>
|-
+
<translate>
|module_manager
+
<!--T:47-->
|Screenshots of '''Extensions -> Module Manager'''.
+
Taking some of the examples from above:
|[[:Category:Module manager screenshots]]
+
</translate>
|-
+
<pre>
|plugin_manager
+
j3x_admin_content_article_manager_articles_es.png
|Screenshots of '''Extensions -> Plugin Manager'''.
+
j25-admin-content-article-manager-articles-fr.png
|[[:Category:Plugin manager screenshots]]
+
</pre>
|-
+
<translate>
|template_manager
+
<!--T:48-->
|Screenshots of '''Extensions -> Template Manager'''.
+
A screenshot of Joomla 3.x or 2.5 site's(frontend) view of the log in module could be written as:</translate>
|[[:Category:Template manager screenshots]]
+
<pre>
|-
+
j3x_site_protostar_log_in_module_fr.png
|language_manager
+
j25-frontent-beez-20-log_in_module-es.png
|Screenshots of '''Extensions -> Language Manager'''.
+
</pre>
|[[:Category:Language manager screenshots]]
+
<translate>
|}
+
<!--T:49-->
 
+
====Tools screenshots Tags====
+
These tags are defined as subsidiary to the ''screenshot'' and ''tools'' tags.  They correspond to sub-menu items under the ''Tools'' menu in the Administrator.
+
{| class="wikitable"
+
|-
+
!Tag
+
!Description
+
!Category
+
|-
+
|read_messages
+
|Screenshots of the '''Tools -> Read messages''' screen.
+
|[[:Category:Read messages screenshots]]
+
|-
+
|write_message
+
|Screenshots of the '''Tools -> Write message''' screen.
+
|[[:Category:Write message screenshots]]
+
|-
+
|mass_mail
+
|Screenshots of the '''Tools -> Mass mail''' screen.
+
|[[:Category:Mass mail screenshots]]
+
|-
+
|global_check-in
+
|Screenshots of the '''Tools -> Global check-in''' screen.
+
|[[:Category:Global check-in screenshots]]
+
|-
+
|clean_cache
+
|Screenshots of the '''Tools -> Clean cache''' screen.
+
|[[:Category:Clean cache screenshots]]
+
|}
+
 
+
====Help screenshots Tags====
+
These tags are defined as subsidiary to the ''screenshot'' and ''help'' tags.  They correspond to sub-menu items under the ''Help'' menu in the Administrator.
+
{| class="wikitable"
+
|-
+
!Tag
+
!Description
+
!Category
+
|-
+
|joomla_help
+
|Screenshots of the '''Help -> Joomla help''' screen.
+
|[[:Category:Joomla help screenshots]]
+
|-
+
|system_info
+
|Screenshots of the '''Help -> System info''' screen.
+
|[[:Category:System info screenshots]]
+
|}
+
 
+
==Other tags==
+
A number of other tags may be used to give further information about an image.
+
{| class="wikitable"
+
|-
+
!Tag
+
!Description
+
!Category
+
|-
+
|full
+
|Full-page screenshot.
+
|[[:Category:Full page screenshots]]
+
|-
+
|annotated
+
|Screenshot with annotations or other information superimposed.
+
|[[:Category:Annotated screenshots]]
+
|}
+
 
<noinclude>[[Category:Documentation Wiki Information]]</noinclude>
 
<noinclude>[[Category:Documentation Wiki Information]]</noinclude>
 +
</translate>

Latest revision as of 20:03, 19 October 2014

Other languages: English 100% • ‎español 100% • ‎français 100%

The image naming guidelines are to give documentation contributors a set guidelines about naming an uploaded image file not used by Joomla! Help screens. These guidelines are not absolute but for informative purposes. They should only be used as a reference for helping contributors form a good image file name. Naming an image for use in Joomla documentation is not difficult once you understand how the images are processed and stored. Some of the benefits of Mediawiki's method of image storage are an image history, extra image data, and easy image updating.

Contents

Naming an Uploaded Image

The Mediawiki software allows uploaded images to be named by two methods.

  1. Uploading an image directly, not referenced in a page but will be used. The default name of the image will be the "local" (name in your file system) but it may be changed before the actual upload.
  2. Clicking on a red link, referenced in a page already with an image link such as [[Image:Name of the image-en.png]] or [[File:Name of the image-en.png]]
    Name of the image-en.png

Of the two methods, the later method is the easiest method to use.

Naming Pattern Suggestions

Image names should consist of an underscore or hyphenated separated list of descriptive words. Think of them as a summary description of the image.

Suggested Formats For Joomla Images

It would be very beneficial if the first part of any Joomla image refers to it's version. This allows someone to instantly know what version of Joomla is connected to the image. Example: j3x or j25. There is no need to insert the .(dot) in the version, please omit it.

<jver>-<admin>-<view>.<extension('png' | 'jpg' | 'jpeg' | 'gif')>

Joomla Image Examples

A screenshot of Joomla 3.x or 2.5 administrator's view of the article manager could be written as:

j3x_admin_content_article_manager_articles.png
j25-admin-content-article-manager-articles.png

A screenshot of Joomla 3.x or 2.5 site's(frontend) view of the log in module could be written as:

j3x_site_protostar_log_in_module.png
j25-frontent-beez-20-log_in_module.png

Suggested Formats For non-Joomla Images

Common sense and a descriptive summary should be the guide for non-Joomla images. Again, use the underscore _ or hyphen - to separate the summary. For images of people, please use the person's name. For images of software or website's, please include them within reason.

Non-Joomla Image Examples

GitHub pull request, the Firefox Firebug tool, or these other examples could be written as:

github-pull-request-how-to.png
eclipse_indigo_interface_egit_browsing_veiw.png
joomla-event-Nov-2013-John-Smith.png
firefox_addon_firebug_colour_picker.png

They are short, descriptive and inform the viewer looking at the image call what the image is quickly.

Localisation of Image Names

In preparation for documentation localisation, how to address images of different languages needs to be addressed. As documentation becomes localised, it is necessary to let user's and the Documentation Working Group identify images in another language quickly. Please do not use a native language as a file name description. Instead, add a trailing two-letter language code to the end of your file description before you upload the image in the 'base' language description.

Translators of Joomla! Documentation should read: Localising Images. Translators will find detailed information about translating images. Here is the base examples:

<jver>-<admin>-<view>-<language code>.<extension('png' | 'jpg' | 'jpeg' | 'gif')>

Taking some of the examples from above:

j3x_admin_content_article_manager_articles_es.png
j25-admin-content-article-manager-articles-fr.png

A screenshot of Joomla 3.x or 2.5 site's(frontend) view of the log in module could be written as:

j3x_site_protostar_log_in_module_fr.png
j25-frontent-beez-20-log_in_module-es.png