Archive:Tutorial:Inserting image files

This tutorial explains how to insert image files (tables, figures, maps or pictures) in Statistics Explained and how to display them properly in an article. Images in the form of tables, figures or maps are used mainly in statistical and background articles, but also in some glossary pages and on the Main page. As a rule no pictures (photographs or drawings) are inserted, except in the rare cases when these provide additional information - pictures are not used just for illustration.

The process consists of three distinct steps:

• create image file, normally png, of sufficient size (in pixels), usually from an Excel source or, alternatively, from Word, PDF, web page ...;
• upload this file in Statistics Explained;
• insert image link in the article specifying where and how the image file is to be displayed there.

Important: image names!

PLEASE DO NOT: use just 'Figure 1.png' or 'Table 2.1.png' as name!! - zero-information label, like removal box 'box 1' ... and you might overwrite the file of someone else with the same idea ... add 'Figure 1 ...' or 'Table 2.1 ...' or 'Graph ...' at the beginning!! - makes it so much harder to find the file among 20 000 others ... start with or only use producer coding like 'YB2013 ...' or 'GDP 2012G3 table.png' - someone finding page via Google images will have no clue ... For maximum efficiency while inserting images, optimal retrieval from >20,000 image files and minimal confusion of users clicking image link and arriving at target file with totally different and obscure name: the file name must be the full descriptor of the image; completed by the geographical area (usually 'EU-28'); the time period (e.g. '2014' or '2003-2013'); and, when applicable, the unit and/or reference period, between brackets (e.g. '(% share of total area)' or '(1990=100)'). Example: Gross domestic product (GDP) per inhabitant, in purchasing power standard (PPS), EU-28, 2010 (% of the EU-27 average, EU-27 = 100).png For maximum efficiency, use this full name from the very start, when creating the png file (without 'Map 1:' or 'Figure x:'!), and then copy & paste it in all further steps: when uploading the png file, the name is entered automatically for the target file in Statistics Explained, and it is best copied right after uploading (also to avoid mistakes) and then pasted in the image link in the article, both as the name of the file there (including .png) and as the caption (without .png). Adding a time period is important to distinguish the file from the ones which in the future will be uploaded, for a later period (e.g. 'Job vacancy rate, 2013' and 'Job vacancy rate, 2014'). Images must be uploaded separately for each period, not as a new version of an existing name, because then previous versions of the article would display the new version of an image next to a mismatched text discussing a previous version of the data. Characters to be avoided in image file names To avoid syntax problems it is recommended not to use / (slash), \ (backslash), ? (question mark), * (asterisk), : (colon), | (vertical bar), " (quotation mark).

Inserting and displaying image files

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.

Note: In case a table has wide columns, e.g. with long text in the table headers, the values should be optically centred for the image file. In Excel 2010 this can be done in the following way: Home/Format/Format Cells/Alignment/Text alignment; Choose there "Horizontal: Right (Indent)" and a suitable value (1, 2, 3, 4, 5, ...) for the "Indent". The optical centring is not done in the Excel file which is attached to the article, as earlier Excel versions (2003 and 2007), which the users may have, don't show correctly an optically centred Excel 2010 file (the values go too much left). Keep thus the right alingment in the Excel file which is attached to the article.

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.

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 inserted right after the introduction and before the 'Main statistical findings' header (best separated by blank line before and after to make it stand out in editing pane); this way, it is displayed in page view to the right of the table of contents, filling up the blank space which otherwise would be there. Image 2 and all other ones are normally put all together behind image 1, also separated by blank line from each other. As a result, all images are displayed one below the other and hopefully more or less aligned with the analysis and references to them in 'Main statistical findings.' There is one exception to this rule: for articles randomly displayed in 'Today's article' (see list), images have to be positioned right on top, before the introduction, because the text to be displayed is fairly long (introduction + part of 'Main statisticial findings') and should not contain any image links. If this alignment is imperfect because text is relatively long or there are so many images they go on beyond 'Main statistical findings' or even the article, image positioning can be adapted (and result checked via 'Show preview'). Authors need not concern themselves too much with page lay-out issues, however, as the Dissemination unit checks and optimises this in any case before publishing.

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

Occasionally it may be necessary to prevent text from flowing around an image, and having it start only after the image. Depending on the web browser's screen resolution and similar parameters, 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 adding <br style="clear: both" /> right before the text that should start after the image (see Mediawiki Help: Images - Stopping text flow).