Redirected from Help:Add image tutorial

Help:Images

From Appropedia

This page describes how to add and use images on Appropedia.

Allowed images[edit source]

Make sure that you have permission to post this content under an open license, describe the source and specify the license. Otherwise, the file will be deleted to avoid hosting infringing content on Appropedia.

Original work[edit source]

We encourage you to upload helpful images that help readers and researchers on Appropedia. We've found that many of the academic citations of Appropedia are of technical illustrations. These are some of the works welcomed on Appropedia:

  • Diagrams and mindmaps to summarize topic pages.
  • Technical illustrations to describe how a device looks and functions.
  • Photographies of projects and devices.

Reusing open-licensed work[edit source]

You can use images with licenses that are CC BY-SA or more open (e.g. GPL, CC0 or in the public domain). There are many places to search for open-licensed images such as Creative Commons Search and Wikimedia Commons.

See also Help:Finding open licensed images and Appropedia:Copyrights.

Creating derivative work[edit source]

You can use any of the thousands of open-licensed images to create derivative works, as long as you ensure that the original license is respected in terms of attribution and whether said license allows derivatives. For this reason, closed licenses such as CC BY-ND (Attribution-NoDerivatives) are not compatible with Appropedia.

Some examples of derivative work is: a collage of images, an illustration based on a photography, a word cloud.

Inserting images[edit source]

After uploading an image, insert it by writing a unique name preceded and followed by double square brackets, as an internal link: [[Image:NAME]]. You can format how the image is displayed by using the following syntax: [[File:File.png|type|location|size|caption]]. Most images should use [[Image:NAME | thumb | IMAGE CAPTION ]]. The other details are optional and can be placed in any order.

Unique names should be used for all image and video files. Preferably in the convention of project_name of file_date (File:Project_nameoffile_01012021.png|type|location|size|caption), thus making it easier to trace the origin and revision of the file.

Where File.png is the name of the image (e.g. AEFgreywaterTrapSpr06.jpg), thumb is a parameter for the default formatting of the image, and caption is the short text that describes its content.

The one just described is the typical syntax, to be used in the vast majority of cases, and automatically creates a thumbnail of the image of optimal size, aligned to the right. Usually, nothing else is needed, but in some cases, it may be useful to change some parameters (alignment, size, etc.).

To change the position of the image with respect to the text on the page, you can indicate optional parameters after the file name, separating them with a vertical bar, |. These are some of the possible ways to format an image
Type: If not specified, the size in which the image is presented is the one in which it was loaded; to ensure better accessibility for everyone it is preferable to use the 'thumb' option so that the displayed size is appropriately resized. Each user is free to change their preferences as needed. The 'frame' option allows you to insert an image in its original size and framed.
Location: 'right', 'left', 'center' or 'none' determines placement of the image on the page.
Size: WIDTHpx (e.g. 50px), scales the image to the given width, keeping its aspect ratio. Or thumbnails can use "upright=Factor". This must be used along with the "thumb" parameter E.g. "|thumb|upright=2" makes the image twice the dimensions of a thumbnail. (Default 0.75, and rounds the result to the nearest multiple of 10 pixels.)
Caption: It is recommended to add a caption or alt text to the image. The caption must be inserted after the image name and after any optional parameters, separating it with a vertical bar, |. The alternative text must be the last piece of information before the closing brackets: [[File:File.png | Alternative text]]. Note that for unframed images, text entered this way appears both as alternative text and as a tooltip caption, visible only on hover. To get a caption is necessary to specify the optional thumb or frame parameter that causes the image to be displayed on the right, enclosed in a frame and with the caption at the bottom; the caption, which must be separated from the options with a second vertical bar | replaces the alt text of the image.

Here are some possible ways to format an image:

Description You type You get
Without text scrolling [[Image:File.png|none|thumb]]
HelpImages1.png
Left aligned, with scrolling [[Image:File.png|left|thumb]]
HelpImages2.png
Centered on the page [[Image:File.png|center|thumb]]
HelpImages3.png
Right-aligned, with scrolling [[Image:File.png|right]]
HelpImages4.png
Captioned thumbnail [[Image:AEFprevfilt2.jpg|thumb|Fig 1: Cleaning out the old filter]]
Fig 1: Cleaning out the old filter
Captioned thumbnail with center alignment [[Image:AEFprevfilt2.jpg|thumb|center|Fig 1: Cleaning out the old filter]]
Fig 1: Cleaning out the old filter


Uploading images[edit source]

Using the visual editor[edit source]

With the Visual Editor, you will be able to see the variations you are applying to images in real-time.

1) Click the "Edit" tab on top of an article.

2) Once the visual editor is loaded click on the "Insert" menu and Choose the "Images and media" option. This will open a dialog box.

Insert > Images and media

3) Click on the "Upload" tab, if not already selected and then click on "Select a file" and chose a file from your computer. You can add a description so that whoever wants to use the image can know what it is about.

4) Mark the "This is my own work" checkbox to enable the upload.

5) Click the "Upload" button on the top right.

Select file > Choose file from computer > ✓ This is my own work > Upload

6) Add a "Description" and then click "Save".

Add a description > Save

From the source editor[edit source]

This option will allow you to edit from the source code.

1) Click "Edit source”. Place the cursor in the space where you want the image to appear.

2) In the navigation bar, click on the image icon. In the dialog box, you can name the image, put a caption as well as the size, alignment, and format.

EditSource1.png

3) Now click on "Upload".

EditSource2.png

4) Click "Save".

EditSource4.png

5) Finally, click on "Insert".

EditSource3.png

Using the file uploader[edit source]

1) Scroll to and click "Upload a file" under "tools" on the left side of the page.

UploadAFile1.png

2) Click "Choose file" and select an image from your computer.

UploadAFile2.png
  • Add a more useful file name if necessary.
  • Add a description of the image.
  • Choose the licensing application to the image.
UploadAFile3.png

3) Confirm the information you entered and click "Upload file".

4) Select and copy the file name. (After the ":") Don't forget to copy the file extension.

UploadAFile4.png

5) Click the image icon to insert the appropriate code.

UploadAFile5.png

6) Paste your Filename in place of "thumb".

UploadAFile6.png

Galleries[edit source]

Starting with version 1.22 of MediaWiki, there are new parameters that can be exploited to build more useful galleries. Here are a couple of examples of how we use galleries on Appropedia. Check MediaWiki's image documentation page for more useful information about the parameters that you can use to generate galleries.

<gallery mode=nolines widths=200>
File:DSC 0425.jpg|<big>'''[[AEF food dehydrator]]'''</big><br>A solar dehydrator to help preserve surplus crops
File:AEFcurrentmarsh.jpg|<big>'''[[AEF greywater]]'''</big><br>Greywater system at the CSA, Arcata Educational Farm
File:CurrentWall.JPG|<big>'''[[AEF informational kiosk]]'''</big><br>An earthen informational kiosk
File:Winterbreak 040 -800x600-.jpg|<big>'''[[AEF photovoltaic system]]'''</big><br>Modified off-grid photovoltaic system
File:Aefswh-finished.jpg|<big>'''[[AEF solar water heater]]'''</big><br>Improved solar water heating system
</gallery>

You can also use mode=slideshow to display the same gallery as a slideshow:

See also[edit source]