Archive:Tutorial:Inserting image files

Inserting and displaying image files

Images can be maps, figures (graphs), tables or pictures. Statistical articles as a rule have no pictures (photographs or drawings) unless, very exceptionnally, these contribute real additional information; pictures are not used solely for the purpose of illustration.

Inserting and displaying images consists of three consecutive steps:

• converting the table, figure or map into a png file, stored locally;
• uploading (inserting) this png file into Statistics Explained;
• adding an image link in the article to the uploaded image file, specifying the target image file name, where and how to display it and the caption below it.

Selecting an image and converting it to png file

There are essentially three methods for selecting an image and saving it as a pgn file; the first one, in Excel, will probably be used most often.

1. Excel

In the majority of cases, image files are taken from a source Excel file where they have been layouted according to the Eurostat layout rules (see here), using the specially developed Eurostat layout commands in Excel. The resulting table or graph or map then only has to be copied and saved locally as a png file.

2. FastStone Capture (screenshot)

• Open the file containing the source image you want to insert, e.g. a Word document, PDF or Excel file, web page or any other screen view with a table or graph or map. Adjust the zoom of your view to the appropriate resolution, neither too small (for good visibility) nor too large (avoiding 'granularity' in picture) - the screenshot you take will determine the readability of the png file you upload!
• Open FastStone Capture.
• On the FastStone Capture tool bar, click on the dropdown menu of the next to last item ('Output-> ...' , for selecting where to send the output), select 'To File'.
• Click on the fourth item (frame with dotted margins, 'Capture rectangular region').
• Select with the left mouse button the screen area you want to copy: the map, table, graph, picture, without the heading or title ! but including any footnotes at the bottom (including the source is optional - not necessary as it will be in caption below image, but not a problem either). When releasing the left mouse button, a save window opens.
• In the 'save' window:
  • select 'desktop' or any other location where you want to store the file;
  • copy in or type the appropriate name after 'Object name';
  • save as a png file.

3. Paint (for capturing images too large for one screen)

• Select and copy the image in word, pdf or excel.
• Open 'Paint'.
• Click 'File/'New'.
• Paste the image in via 'Edit'/'Paste' (in order to avoid having blank spaces to the right and below your pasted image, you may first have to click 'Image'/'Attributes' and set both 'Width' and 'Height' at '1' = minimal).
• Click 'File/Save as' and complete or select:

• Save in: any location where you can easily retrieve the file (e.g. on desktop or in temporary map);
• File name: copy the full name of the original image (e.g.from the pdf document) but without the beginning 'Map 12.1: '; paste this name after 'File name'. You may have to do this in two movements; if the title is in 2 lines, separated by 'return'.
• Save as type: PNG (*.PNG), the last one.

The image file name has to be unique and descriptive - including a year or period! Do not use just 'Figure 1' or 'Table 2.1' as name!! - hardly unique or descriptive in a collection of several tens of thousands image files! Do not include 'Figure 1' or 'Table 2.1' at the beginninng of the name!! - this makes it next to impossible to find it via search dropdown of 'File:Xxx...' within the enormous number of image files, and it leads to confusion when renumbering in the article or re-use in another article! The recommended and easiest way is to copy & paste the full name of the original image (e.g. from the pdf document) but without the numbering at the beginning ('Map 12.1:' etc.); you may have to do this in two movements if the title is in 2 lines, separated by 'return'. Using this name from the very beginning has the big advantage that in the next steps of uploading, inserting the file name and adding the caption, you can just copy & paste this same name. Adding a year or period is very important: new versions should not be uploaded under an already existing name, because then old versions of a statistical article will then display the new version of an image next to a mismatched text discussing a previous version of the data. New versions should be uploaded with the same file name, if content has not changed, and just a different year or period. For instance: 'Job vacancy rate, 2008' and 'Job vacancy rate, 2009'. Characters to be avoided in file names To avoid syntax problems it is recommended not to use / (slash), \ (backslash), ? (question mark), % (percent sign), * (asterisk), : (colon), | (vertical bar), " (quotation mark), < (less than), > (greater than) and . (period).

Uploading an image in Statistics Explained

• click 'Upload file', third item of 'Toolbox' to the left.
• complete or select:

• Source file name: click on browse and select the file you want to upload, on the location where you have pasted it temporarily;
• Destination file name: the same file name appears automatically here, but now separated by underscores instead of blanks; the name should be descriptive of its content and distinctive, not something general like 'Table 1' ! It should also, at the end, contain the year(s) or period to which the data refer, separated by a comma and before brackets (if any), in order to make the file unique;

for instance: Taxes_and_social_contributions,_2007;

do not include subtitles or qualifiers which might make the file name too long and do not add to the description (such as '% of GDP'), although these subtitles must be added to the title appearing below the image in the statistical article (see below);

• click 'Upload file';
• after having uploaded the image into Statistics Explained, the temporary png file (on the desktop or elsewhere) is no longer needed and may be deleted.

Inserting an image in a statistical article

Position of images in a statistical article Image 1 is normally put at the very first line of the article, before the introduction (so that in the page view it appears to the right of the introduction). Image 2 and all other ones are normally put all together at the beginning of 'Main statistical findings'. If however the resulting page view is not easily readable or not nice (e.g. if Image 1 is quite large), the images can be moved at will to other locations in the article. You can always check out how they look clicking 'Show preview'; but be careful, your changes are not saved and if you go to another page or click on 'page' or 'edit' again, your changes will be lost!

After having inserted the image file in Statistics Explained, this image can now be shown in a statistical article by inserting a line in the edit of the article, in the appropriate format.

The format of an inserted image (in edit mode) consists of

• the name of the image file, e.g. File:Top_30_NUTS_2_regions_with_highest_volume_of_air_freight_in_2006.PNG;
• formatting parameters, e.g. thumb|right|350px - careful: the file name is case-sensitive, including the extension - files generated with FastStone Capture have 'png', with Paint 'PNG', be sure to use the appropriate one;
• the title accompanying the image, e.g. Table 2: Top 30 NUTS 2 regions with highest volume of air freight in 2006 and index 2003 = 100
• the data code(s) as part of the title (if possible)

within [[ ]] and separated by '|'.

Example: [[File:Resource_productivity_by_country.jpg|thumb|right|350px|Figure 2: Resource productivity by country (EUR/kg) - Source: Eurostat {{Stable link|title=|code=tsdpc100}}]]

The parameters in this case mean that images normally are presented as a clickable thumb to the right, with a size of 350px; this is the conventional way to display statistical data, providing the right balance between 60 % text and 40 % images (depending on screen resolution and browser settings).

• Replace the file name, by copy & paste; Note: the name has to be the exact name of the image file, including upper/lower case! (if it doesn't work, go to the file page via 'Special pages'/'Media reports and uploads'/'File list', copy the file name and paste it in).
• leave 'Figure' or 'Map' or 'Table', as may be the case, removing both others, and add the right order number;
• replace the title in the model, using copy & paste;
• save page.

Stopping text flow

On occasion it is desirable to stop text from flowing around an image. Depending on the web browser's screen resolution and such, text flow on the right side of an image may cause a section header (for instance, ==My Header==) to appear to the right of the image, instead of below it, as a user may expect. The text flow can be stopped by placing <br style="clear: both" /> before the text that should start after the image (see Mediawiki Help: Images - Stopping text flow).