How to add Photo

From MusicWiki Detroit
Jump to: navigation, search

Add Photo

To add a Photo enter the edit mode and click on the Photo-Icon.png Icon in the toolbar.
The Insert File box will pop-up

Insert-File.jpg

Choose the Align: & Format: dropdowns then click Upload and follow prompts.



Upload filesize can be up to 50 MB
but please limit size on page to 275 px so image will not be over-sized on Phones


 Code to display the image on page [[File:Insert-File.jpg|275px|thumb|left]]


You also have the option of going directly to the Upload File page
This page also shows formatting options for the photos.
Tip.png Open the upload file page in a separate window or tab. You don't have to leave the first page and can jump between the two copying the name of the uploaded file to paste in the page your editing (saves typing).

To view or search previously uploaded files go to ListFiles list of uploaded files.

Supported media types for images

The following file formats are supported by default:

  • .jpg or .jpeg : bitmap image compressed in the standard JPEG format (this lossy format is most suitable for photographs)
  • .png : bitmap image in the Portable Network Graphics format (specified by the W3 Consortium).
  • .gif : bitmap image in the legacy Graphics Interchange Format.


Syntax

The full syntax for displaying an image is:

[[File:filename.extension|options|caption]]

where options can be zero or more of the following, separated by pipes (|):


  • Format option: one of border and/or frameless, frame, thumb (or thumbnail);
    Controls how the rendered image is formatted and embedded in the rest of the page.
  • Size and frame|Resizing]] option: one of
    • {width}px — Resizes the image to fit within the given maximum width in pixels, without restricting its height;
    • x{height}px — Resizes the image to fit within the given maximum height in pixels, without restricting its width;
    • {width}x{height}px — Resizes the image to fit within the given width and height in pixels;
    • upright — Resizes an image to fit within reasonable dimensions, according to user preferences (suitable for images whose height is larger than width).

Note that the image will always retain its aspect ratio, and can only be reduced (not increased) in size unless it's in a scalable media type (bitmap images cannot be scaled up).

  • The default maximum size depends on the format and the internal image dimensions (according to its media type).
  • Horizontal alignment' option: one of left, right, center, none;
    Controls the horizontal alignment (and inline/block or floating styles) of the image within a text (no default value).
  • Vertical alignment option:: one of baseline, sub, super, top, text-top, middle, bottom, text-bottom;
    Controls the vertical alignment of a non-floating inline image with the text before or after the image, and in the same block (the default vertical alignment is middle).


Horizontal alignment

Description You type You get

Image Formatting Samples – applies anywhere

No alignment specified, or default alignment


[[File:Example1.jpg]]

Example1.jpg

Left alignment
Thumbnail Image
size 250 pixels
caption enabled

[[File:Example1.jpg|thumb|left|250px|caption]]
caption

Right alignment
Thumbnail Image
size 150 pixels
No caption

[[File:Example1.jpg|thumb|right|150px]].
Example1.jpg

Center alignment
Thumbnail Image
size 300 pixels
Caption

[[File:Example1.jpg|thumb|center|caption Text Here|300px]]
caption Text Here

Image with Frame and Caption Text
Centered
Size 50 and 200 Pixels
A Frame cannot be Resized I retains it's Original size


[[File:Example1.jpg|center|Frame|caption Text Here|50px]]
[[File:Example1.jpg|center|frame|caption_Text_Here|200px]]
caption_Text_Here

caption_Text_Here



Vertical alignment

To show the alignment result more clearly, the text spans are overlined and underlined, the font-size is increased to 200%, and the paragraph block is outlined with a thin border; additionally images of different sizes are aligned: To show the alignment result more clearly, the the font-size is increased to 200%, and the paragraph block is outlined with a thin border:

Text alignment is top: [[File:Example1.jpg|100px|top]]

text text Example1.jpg text text


Text is text-top: [[File:Example1.jpg|100px|text-top]]

text text Example1.jpg text text


Text alignment is super: [[File:Example1.jpg|100px|super]]

text text Example1.jpg text text


Text alignment is baseline: [[File:Example1.jpg|100px|baseline]]

text text Example1.jpg text text


Text alignment is sub: [[File:Example1.jpg|100px|sub]]

text text Example1.jpg text text


Text alignment is default: [[File:Example1.jpg|100px]]

text text Example1.jpg text text


Text alignment is middle: [[File:Example1.jpg|100px|middle]]

text text Example1.jpg text text


Text alignment is bottom: [[File:Example1.jpg|100px|bottom]

text text Example1.jpg text text


Text alignment is text-bottom: [[File:Example1.jpg|100px|text-bottom]

text text Example1.jpg text text


Notes

  1. The "middle" vertical alignment position of the image (which is also the default) usually refers to the middle between the x-height and the baseline of the text (on which the vertical middle of the image will be aligned, and on which usually the text may be overstroke), but not to the middle of the line-height of the font-height that refers to the space between the "text-top" and "text-bottom" positions ; the font-height excludes:</translate>
    • the additional line separation spacing normally divided equally into two line-margins (here 0.5em, according to line-height set to 200%) above and below the font-height).
    • the additional line spacing which may be added by superscripts and subscripts.
  1. However, if the image height causes its top or bottom position to go above or below the normal full line-height of text, the middle position will be adjusted after the increasing the top and/or bottom line-margins so that the image can fit and align properly, and all images (including those with smaller heights) will be vertically centered on the adjusted middle position (for computing the effective line-height, the text of each rendered row with the larger font-height will be considered).
  1. The "text-top" and "text-bottom" alignment positions also excludes the extra line spacing added by superscripts and subscripts, but not the additional line-spacing defined by the line-height.</translate>
  1. The "top" and "bottom" alignment positions take into account all these extra line spacings (including superscripts and subscripts, if they are present in a rendered line span).</translate> <translate>

When the image alignment constrains the image to grow above or below the normal line-spacing, and the image is not absolutely positioned, the image will cause the "top" and "bottom" positions to be adjusted (just like superscripts and subscripts), so the effective line-height between rendered lines of text will be higher.

  1. The "underline", "overline" and "overstrike" text-decoration positions should be somewhere within these two limits and may depend on the type and height of fonts used (the superscript and subscript styles may be taken into account in some browsers, but usually these styles are ignored and the position of these decorations may not be adjusted); so these decorations normally don't affect the vertical position of images, relatively to the text.

Stopping the text flow

On occasion it is desirable to stop text (or other inline non-floating images) from flowing around a floating 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 clear=all></> (or if you prefer, <div style="clear: both"></div></>) before the text that should start below the floating image.

(This may also be done without an empty line by wrapping the section with the floating images with <div style="overflow: hidden">…</div></>, which clears all floats inside the div element.)

All images rendered as blocks (including non-floating centered images, left- or right-floating images, as well as framed or thumbnailed floating images) are implicitly breaking the surrounding lines of text (terminating the current block of text before the image, and creating a new paragraph for the text after them).</translate>

They will then stack vertically along their left or right alignment margin (or along the center line between these margins for centered images).


Link behavior

By default an image links to its file description page.

The "link=" option modifies this behavior to link to another page or website, or to turn off the image's linking behavior.

Alternatively, you can create a text link to a file description page or to the file itself.


Display image, link it to another page or website

Clicking on the below image will take you to Detroit_Jazz_History:


[[File:Example.jpg|50px|link=Detroit_Jazz_History]]

Example.jpg


Clicking on the below image will take you to example.com:

[[File:Example.jpg|75px|link=http://example.com]]

Example.jpg

Use "link=" option to link image to another page or website:


Display image, turn off link

Sample layout

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
left, size 150px
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
Right, size 150px
consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
centered, size 200px

Add a Photo Gallery

Add a Photo Gallery