Adding and Editing Images

From Programapedia

Contents 1 Adding an Image Using the Page Editing Toolbar 1.1 Heading 2 Aligning Images 3 Changing Image Width 4 Creating Thumbnail Image with Captions

Adding an Image Using the Page Editing Toolbar

Heading

Using the wikitext editing tools, the picture icon inserts the wikitext code required to reference an image.

The code within the wikitext editor appears as:

[[Image:Example.jpg]]

Then, change the reference to Example.jpg with the name of the file that will be inserted into the wiki.

As with all web-based image files, the recommendation is to avoid spaces within the file name. Either use what is know as camel-case (a combination of upper and lower case letters), or replace spaces with an underscore. To insert an image for the Prairie Area Library System, replace the reference to Example.jpg with PrairieAreaLibrarySystem.jpg (camel-case) or Prairie_Area_Library_System.jpg (replacement with underscore).

Before the image is uploaded to the wiki, a red link shows the file name. Following the link, loads the wiki image upload page.

The help file, Adding Documents and Images, illustrates the steps to add an image to the wiki.

Example - Basic Image File:

Syntax -

[[Image:PALS_Shorewood.jpg]]

Display -

Aligning Images

Images can be aligned to the left of the wiki page.

To align an image to the left and allow text to flow around the image, add the |left directive to the image wikitext.

Example - Image Alignment Left:

Syntax -

[[Image:PALS_Shorewood.jpg|left]]

Images can also be aligned to the right of the wiki page.

To align an image to the right and allow text to flow around the image, add the |right directive to the image wikitext.

Example - Image Alignment Right:

Syntax -

[[Image:PALS_Shorewood.jpg|right]]

To force the text to jump past the end of an image, insert an HTML break tag with the clear attribute.

<br clear="all" />

Changing Image Width

The maximum width of the image can be modified using a parameter within the image wikitext. This allows resizing of an image to a size that fits the text contained on the page.

Example - Image Resizing:

Syntax -

[[Image:filename|width-px]]

[[Image:PALS_Shorewood.jpg|100px]]

The example syntax resizes the image to 100 pixels in width.

Using just one pixel measurement resizes the height in proportion to the original image properties. For images (usually photos) 250px works best for Programapedia.

[[image:filename|250px]]

Creating Thumbnail Image with Captions

Image captions can be included in the wikitext and will appear underneath the image.

Example - Image Thumbnail with Caption/Link to Full Image:

Syntax -

[[Image:filename|width-px|thumb|alignment|caption]]

[[Image:PALS_Shorewood.jpg|200px|thumb|left|PALS Shorewood Office]]

Comments on this page? Let us know.