m (Revertida a la última edición por Rick Starkiller) |
|||
(No se muestran 19 ediciones intermedias del mismo usuario) | |||
Línea 51: | Línea 51: | ||
For users who allow '''non-image uploads''', e.g. office files, the keyword 'media' is misleading because office documents are not typically classed as media, in the context of audio/video etc. But it is the correct syntax to use when linking to a non-image file. | For users who allow '''non-image uploads''', e.g. office files, the keyword 'media' is misleading because office documents are not typically classed as media, in the context of audio/video etc. But it is the correct syntax to use when linking to a non-image file. | ||
=== | ===Incrustando imágenes internas=== | ||
“Interna” se refiere a que dicha imagen existe en el proyecto de Karmawiki. | |||
Solamente las imágenes pueden ser automáticamente presentadas, los sonidos no se reproducen automáticamente. | |||
Una imagen incrustada interna automáticamente enlaza a la [[Ayuda:Pagina de imagen|Pagina de imagen]], la cual muestra la imagen completa, o, dependiendo de las preferencias, una versión reducida con un enlace a la versión completa. La pagina también muestra información acerca de la imagen. | |||
Para agregar la imagen subida a un articulo como un thumbnail, puedes usar <nowiki>[[Imagen:</nowiki> ''nombre de la imagen incluyendo extensión'' |thumb|''texto descriptivo''<nowiki>]]</nowiki> o | |||
<nowiki>[[Imagen:</nowiki> ''''nombre de la imagen incluyendo extensión'' |thumb|''anchura en píxeles'' px|''texto descriptivo''<nowiki>]]</nowiki>. | |||
[[ | [[Imagen:tst.jpg|thumb|50px|[[Media:tst.jpg|Tamaño real]]]] | ||
El tamaño por defecto del ancho del thumbnail puede ser especificado en las preferencias, así que regularmente en mejor “no” especificar “px”, para respetar las preferencias de los usuarios (a menos que por alguna razón especial, un tamaño especifico sea requerido sin tener en cuenta las preferencias, o si el tamaño especificado esta fuera del rango de los 120-300 que pueden especificarse en las preferencias). | |||
El texto descriptivo puede contener enlaces. Este formato permite reducción y ampliación. Ambos, la imagen misma y el icono enlazan a la página de imagen. El icono tiene el texto “Ampliar” en su mouseover, aún en casos donde la imagen en la página de imagen sea menor. Dependiendo en las preferencias, la imagen en la pagina de imagen puede ser más pequeña que el thumbnail, por lo que un enlace podría ser conveniente desde el thumbnail directo de la imagen en su tamaño real. Por ejemplo: <nowiki>[[imagen:tst.png|thumb|50px|[[Media:tst.png|Tamaño real]]]]</nowiki> (ver a la derecha; ve también Imagen Doble) | |||
Es posible colocar enlaces externos en el texto descriptivo, pero solo en la forma sin corchetes, es por ello que mostrara el URL completo; si el URL no entra en el espacio disponible, el resto caerá fuera, sin embargo el enlace funcionara normalmente. Estos enlaces son especialmente útiles para enlazar las versiones completas de un archivo, si estos no pueden ser visualizados en la página de descripción, debido a que sean de un formato no soportado. | |||
[[imagen:KT00106.jpg|thumb|left|Asura; para mayor información ver: http://ka-boom.com.mx/ka-boom.htm]] | |||
Para más posibilidades, ve [[en:Wikipedia:Extended image syntax]]. Tambien, el código fuente de paginas existentes es muy útil como ejemplo. {{Clr}} | |||
===Imagen a la izquierda=== | |||
'''<nowiki>[[imagen:tst.jpg|left|thumb|50px|[[help:contents|demo]]]]</nowiki>''' coloca la imagen a la izquierda; el texto que sigue flota a la derecha; si una segunda imagen es colocada inmediatamente después de la primera, la segunda se coloca adyacente a la primera; si existe texto entre ellas la segunda imagen se coloca en abajo a la derecha de la primera, bajo este texto: | |||
[[imagen:tst.gif|left|thumb|50px|[[help:contents|demo]]]][[imagen:tst.gif|left|thumb|50px|[[ayuda:contenido|demo]]]] [[imagen:tst.gif|left|thumb|50px|[[ayuda:contenido|demo]]]] ''Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.'' between the 3rd and 4th images. [[imagen:tst.gif|left|thumb|50px|[[Ayuda:contenido|demo]]]] ''Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.'' después de la cuarta imagen.{{Clr}} | |||
'''<nowiki>[[ | Con '''<nowiki>[[imagen:tst.gif|none|thumb|50px|[[Ayuda:contenido|demo]]]]</nowiki>''' la imagen se coloca a la izquierda, y el texto que sigue comienza debajo de ella. | ||
[[ | [[imagen:tst.gif|none|thumb|50px|[[ayuda:contenido|demo]]]]''Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent lupta'' | ||
===Imagen a la derecha=== | |||
'''<nowiki>[[imagen:tst.gif|right|thumb|50px|[[help:contents|demo]]]]</nowiki>''' coloca la imagen a la derecha; el texto que sigue flota a la izquierda de ella. La situación no es simétrica al caso anterior: una segunda imagen es colocada al extremo derecho de nueva cuenta, debajo de la primera. | |||
[[imagen:tst.gif|right|thumb|50px|[[ayuda:contenido|demo]]]] ''zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.'' [[imagen:tst.gif|right|thumb|50px|[[ayuda:contenido|demo]]]] '' {{clr}} | |||
===Usando la anchura completa=== | |||
= | [[imagen:tst.gif|left|thumb|50px|[[ayuda:contenido|demo]]]] Usa '''<nowiki><br clear="all" /></nowiki>''', o en este caso <nowiki>{{clr}}</nowiki>. El texto flota alrededor de la imagen hasta que llega a <nowiki>{{clr}}</nowiki> así. {{Clr}} Después de <nowiki>{{clr}}</nowiki>, sin embargo, el texto no puede flotar y reinicia debajo la imagen, usando la anchura completa de nuevo así,… así, así, así, así, así, así, así, así, así, así, así, así, así, así, así, así, así, así, así, así, así, así, así, así, así, así. | ||
===Imagenes en linea=== | |||
Las imagenes en linea no pueden tener descripción, pero pueden tener un [[w:Wikipedia:Alternative text for images|"titulo"-attribute]] (frecuentemente confundido con el atributo “alt”, el cual tiene un propósito diferente), el cual se muestra en el mouseover (en los casos de abajo, para la imagen es la misma que la descripción, y para el icono de ampliar es “Ampliar”). | |||
Es el ultimo elemento del código de imagen, consecuentemente, si solo hay el nombre de la imagen con el prefijo “imagen:” le asigna eso; si existe un elemento vació terminando con el símbolo pipe (“|”) no le asigna nada; de otra manera, le asigna el código de imagen que se encuentre al final, a menos que un texto apropiado sea especificado. | |||
El tamaño de las imágenes puede reducirse pero no puede ampliarse. | |||
Ejemplo (nota el mousehover de la caja tambien): "<nowiki>texto [[imagen:tst.gif]] texto [[imagen:tst.gif|</nowiki>'''5px'''<nowiki>|]] texto [[imagen:tst.gif|</nowiki>'''200px'''<nowiki>|demo]] texto</nowiki>" asigna "texto" {{Clr}} [[imagen:tst.gif]] texto [[imagen:tst.gif|5px|]] texto [[imagen:tst.gif|200px|demo]] texto". | |||
'''''En el ejemplo anterior, en 1.5 la anchura fue especificada, pero la altura es la original. | |||
==Redirection== | ==Redirection== |
Revisión actual del 13:20 6 Abr 2006
Para agregar una imagen, el archivo debe de ser subido al servidor karmaWiki. Tambien otros archivos pueden ser subidos, como se muestra abajo. El sistema usa el termino “imagen” para cualquier archivo subido.
Para empezar, da a tu archivo un nombre adecuado, esto es debido a que no es posible renombrar loa archivos durante o después de que son subidos al servidor. Asegúrate que el archivo tiene la extensión adecuada.
Con el archivo y la pagina de imagen (también llamada "pagina de descripción de imagen") será asociada, con un nombre de pagina consistente del nombre del archivo (incluyendo extención), con el prefijo “Imagen:” (o en general, el valor de la variable {{ns:Image}}). Toma en cuenta que los nombres de archivo son sensibles a mayusculas y minusculas (esto aplica también para la extensión) excepto, en la mayoría de los casos, por el primer carácter.
Nombre de Archivo
Si quieres reemplazar un archivo existente, dale el mismo nombre, o por el contrario dale un nombre que aún no exista.
Cuando reemplazas o borras un archivo, todas las páginas que usen ese archivo se verán afectadas. Es por ello muy importante que revises las conexiones antes de realizar cualquier cambio. Puedes revisar la sección “enlaces a la imagen” en la pagina de imagen para ver que paginas usan dicha imagen.
Escoge tan cuidadosamente el nombre del archivo como el nombre de un nuevo articulo, y usa una redacción adecuada: el nombre tal vez no sea visible en la página que contiene la imagen, sin embargo, si se vera en la pagina de una categoría que contiene el archivo.
Tipos de Archivo Aceptados; misceláneos
Además de texto, MediaWiki acepta los siguientes tipos de archivo en línea:
- sonido -- formato preferido: Ogg
Actualmente los siguientes tipos de archivo pueden ser subidos:
- 'png', 'gif', 'jpg'/'jpeg', 'ogg'.
Enlace
Para enlazar un archivo subido, por ejemplo Karmawiki logo.gif usa [[Media:Karmawiki logo.gif]] en lugar de [[Imagen:Karmawiki logo.gif]], resultando Media:Karmawiki logo.gif; para crear un enlace hacia la pagina de descripción de la imagen, usa [[:Imagen:Karmawiki logo.gif]] para Imagen:Karmawiki logo.gif (los primeros dos puntos no se muestran).
Piped links work as usual.
Interwiki linking style gives a link to the image description page. For embedding (if possible, see below) and linking to the file itself, use external link style.
If interlanguage links would be applicable, use a colon in front of the language code, e,g. [[:de:Bild:Europa-Pos.png]], to avoid the link being put in the margin.
External link syntax is as usual. However, if you want a link to an image proper on a page of a project that allows embedded external images, use a bracketed link syntax and not just the URL, to prevent embedding.
For using an image as a link to another document, see Help:Navigational image.
For users who allow non-image uploads, e.g. office files, the keyword 'media' is misleading because office documents are not typically classed as media, in the context of audio/video etc. But it is the correct syntax to use when linking to a non-image file.
Incrustando imágenes internas
“Interna” se refiere a que dicha imagen existe en el proyecto de Karmawiki.
Solamente las imágenes pueden ser automáticamente presentadas, los sonidos no se reproducen automáticamente.
Una imagen incrustada interna automáticamente enlaza a la Pagina de imagen, la cual muestra la imagen completa, o, dependiendo de las preferencias, una versión reducida con un enlace a la versión completa. La pagina también muestra información acerca de la imagen.
Para agregar la imagen subida a un articulo como un thumbnail, puedes usar [[Imagen: nombre de la imagen incluyendo extensión |thumb|texto descriptivo]] o [[Imagen: ''nombre de la imagen incluyendo extensión |thumb|anchura en píxeles px|texto descriptivo]].
El tamaño por defecto del ancho del thumbnail puede ser especificado en las preferencias, así que regularmente en mejor “no” especificar “px”, para respetar las preferencias de los usuarios (a menos que por alguna razón especial, un tamaño especifico sea requerido sin tener en cuenta las preferencias, o si el tamaño especificado esta fuera del rango de los 120-300 que pueden especificarse en las preferencias).
El texto descriptivo puede contener enlaces. Este formato permite reducción y ampliación. Ambos, la imagen misma y el icono enlazan a la página de imagen. El icono tiene el texto “Ampliar” en su mouseover, aún en casos donde la imagen en la página de imagen sea menor. Dependiendo en las preferencias, la imagen en la pagina de imagen puede ser más pequeña que el thumbnail, por lo que un enlace podría ser conveniente desde el thumbnail directo de la imagen en su tamaño real. Por ejemplo: [[imagen:tst.png|thumb|50px|[[Media:tst.png|Tamaño real]]]] (ver a la derecha; ve también Imagen Doble)
Es posible colocar enlaces externos en el texto descriptivo, pero solo en la forma sin corchetes, es por ello que mostrara el URL completo; si el URL no entra en el espacio disponible, el resto caerá fuera, sin embargo el enlace funcionara normalmente. Estos enlaces son especialmente útiles para enlazar las versiones completas de un archivo, si estos no pueden ser visualizados en la página de descripción, debido a que sean de un formato no soportado.
Para más posibilidades, ve en:Wikipedia:Extended image syntax. Tambien, el código fuente de paginas existentes es muy útil como ejemplo.
Imagen a la izquierda
[[imagen:tst.jpg|left|thumb|50px|[[help:contents|demo]]]] coloca la imagen a la izquierda; el texto que sigue flota a la derecha; si una segunda imagen es colocada inmediatamente después de la primera, la segunda se coloca adyacente a la primera; si existe texto entre ellas la segunda imagen se coloca en abajo a la derecha de la primera, bajo este texto:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. between the 3rd and 4th images.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. después de la cuarta imagen.
Con [[imagen:tst.gif|none|thumb|50px|[[Ayuda:contenido|demo]]]] la imagen se coloca a la izquierda, y el texto que sigue comienza debajo de ella.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent lupta
Imagen a la derecha
[[imagen:tst.gif|right|thumb|50px|[[help:contents|demo]]]] coloca la imagen a la derecha; el texto que sigue flota a la izquierda de ella. La situación no es simétrica al caso anterior: una segunda imagen es colocada al extremo derecho de nueva cuenta, debajo de la primera.
zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Usando la anchura completa
Usa <br clear="all" />, o en este caso {{clr}}. El texto flota alrededor de la imagen hasta que llega a {{clr}} así.
Después de {{clr}}, sin embargo, el texto no puede flotar y reinicia debajo la imagen, usando la anchura completa de nuevo así,… así, así, así, así, así, así, así, así, así, así, así, así, así, así, así, así, así, así, así, así, así, así, así, así, así, así.
Imagenes en linea
Las imagenes en linea no pueden tener descripción, pero pueden tener un "titulo"-attribute (frecuentemente confundido con el atributo “alt”, el cual tiene un propósito diferente), el cual se muestra en el mouseover (en los casos de abajo, para la imagen es la misma que la descripción, y para el icono de ampliar es “Ampliar”). Es el ultimo elemento del código de imagen, consecuentemente, si solo hay el nombre de la imagen con el prefijo “imagen:” le asigna eso; si existe un elemento vació terminando con el símbolo pipe (“|”) no le asigna nada; de otra manera, le asigna el código de imagen que se encuentre al final, a menos que un texto apropiado sea especificado.
El tamaño de las imágenes puede reducirse pero no puede ampliarse.
Ejemplo (nota el mousehover de la caja tambien): "texto [[imagen:tst.gif]] texto [[imagen:tst.gif|5px|]] texto [[imagen:tst.gif|200px|demo]] texto" asigna "texto"
texto texto texto".
En el ejemplo anterior, en 1.5 la anchura fue especificada, pero la altura es la original.
Redirection
An image tag specifying an image can not be made to embed another image through a redirect. There is more flexibility if an image is embedded by calling a template that contains the image, because a template can be redirected to another one. See e.g. Plantilla:Tim.
Putting text in an image, superimposing images, e.g. for locator maps
Texts (also with links) and images can be positioned such that they partly cover an image with code like:
<div style="position: relative">[[Image:Map South Holland.png]] <div style="position: absolute; left: 244px; top: 67px">[[Image:Tst.png]]</div> <div style="position: absolute; left: 249px; top: 72px">[[Image:Tst.png]]</div> <div style="position: absolute; left: 264px; top: 112px">[[Image:Tst.png]]</div> <div style="position: absolute; left: 10px; top: 10px">[[Image:Text North Sea transparent.gif]]</div> <div style="position: absolute; left: 10px; top: 50px"> {| style="background:transparent" |- |[[w:en:South Holland|South Holland]] (Netherlands) |} </div> </div>
giving:
This can be used for locator maps.
As demonstrated, the small images can also cover each other, so the order in which they are listed matters.
Example where all map labels are superimposed:
<div style="position: relative">[[Image:Zeeuws Vlaanderen.png]] <div style="position: absolute; left: 5px; top: 25px"> {| style="background:transparent" |- |[[w:en:Sluis|Sluis]] |} </div> <div style="position: absolute; left: 50px; top: 40px"> {| style="background:transparent" |- |[[w:en:Terneuzen|Terneuzen]] |} </div> <div style="position: absolute; left: 100px; top: 25px"> {| style="background:transparent" |- |[[w:en:Hulst|Hulst]] |} </div> </div>
gives
Thus all labels and all standard symbols (such as a dot for a town) can be superimposed on a map, and the map image itself needs to show only the curves for coasts, rivers, boundaries, roads, railways, etc., possibly with areas filled with colors.
This has the advantage that labels can be linked, and that it is much easier to edit the map with regard to:
- adding, deleting, moving, and changing symbols for e.g. towns
- adding, deleting, moving, and changing texts and changing their fonts
- changing the background map to another version, keeping what is overlaying it
Note that the result also depends on user settings such as:
- character size (as much as possible, avoid overlaps, even if the user uses a large font)
- whether the user uses a background color for links (these may override the background "transparent")
- whether images are shown with an edge, e.g. because of being a link (for a separate image this is a minor thing, for an image inside another image this looks quite different)
Gallery tag, category, table of images
The gallery-tag is a quick way to show thumbnails in four columns. Each entry is of the form "Image:image name or "Image:image name|caption, possibly with links". It also allows text taking the position of an image, but not with links: if a text entry contains a link, the whole entry is ignored; an image tag with square brackets is also ignored.
<gallery> A-L Image:Drenthe-Position.png|[[w:Drenthe|Drenthe]], the least crowded province Image:Flevoland-Position.png Image:Friesland-Position.png [[Friesland]] is beautiful Image:Gelderland-Position.png Image:Groningen-Position.png Image:Limburg-Position.png M-Z Image:Noord_Brabant-Position.png Image:Noord_Holland-Position.png Image:Overijssel-Position.png Image:Zuid_Holland-Position.png|[[w:South Holland|South Holland]], the most crowded province Image:Utrecht-Position.png Image:Zeeland-Position.png </gallery>
gives:
- A-L
Drenthe, the least crowded province
- M-Z
South Holland, the most crowded province
Note that, with the gallery tag, the images have a single fixed width.
Depending on the browser, a long caption may or may not widen a whole column of images:
- even if it does, if necessary to fit the four columns on the screen, captions wrap automatically
- alternatively, a long caption makes the whole row taller, because too long captions wrap to produce multiple lines in their container. See also w:Wikipedia:Gallery.
A gallery of images in a category is automatically shown as the fourth section of the category page. The first 20 characters of the image name are shown, with dots if that is not the full name. Both the image and the name link to the image page. No alternative text or other links are possible. Also the file size is shown.
For a comparison, see commons:Category:William-Adolphe Bouguereau.
Using table syntax, with images in separate cells, and the image syntax explained elsewhere on this page, gives more control over size, layout, captions, etc. than each of these two methods. However, only a category automatically gives file sizes.
Example of an image table:
{| |+'''Provinces of the Netherlands''' |- | valign="top"| [[Image:Drenthe-Position.png|thumb|left|150px|[[w:Drenthe|]], the least crowded province]] | valign="top"| [[Image:Flevoland-Position.png|thumb|left|100px|]] | valign="top"| [[Image:Friesland-Position.png|thumb|left|100px|]] |- | |- | valign="top"| [[Image:Gelderland-Position.png|thumb|left|100px|]] | valign="top"| [[Image:Zuid_Holland-Position.png|thumb|left|100px|[[w:South Holland|]], the most crowded province]] | valign="top"| [[Image:Utrecht-Position.png|thumb|left|50px|]] |}
gives:
Note that, with this method, each image has a width specified by the size option, if any, and a height depending on whether there is caption or not, and how long the caption is. The width of a column is determined by the widest image in it, and the height of the row is determined by the tallest image in it.
Embedding external images
External images can not always be embedded, this depends on the settings of the project: it has been disabled on Meta and many Wikipedias, including the English and German, to prevent vandalism and "bandwidth theft" from other sites, but it is still allowed on some wikis, e.g. on the Dutch Wikipedia.
If enabled ($wgAllowExternalImages = true; in LocalSettings.php) on this project there is an image here, otherwise just a link to an image: http://en.wikipedia.org/upload/b/bc/Wiki.png
The wiki markup text used for this image is simply the raw url of the image, ie http://en.wikipedia.org/upload/b/bc/Wiki.png. It can be shown in actual size only.
If necessary, download an image of a project and upload a copy into the Commons project, you can then use it on all projects.
The examples in what follows are intended for projects in which embedding is enabled.
To use an image as a link to a specified page (either external URL or an internal wiki page) see navigational image.
If enabled, use unbracketed external link style, i.e. just the URL (of the image itself, not of the image description page), e.g. http://en.wikipedia.org/upload/d/d1/Tile_Hill_train_550.jpg. The URL can be found by checking with your browser the properties of the image when it is displayed on a webpage.
Conversely, to go to the image description page of an image referred to with external link style, put the URL in the address bar and replace "upload/alphanumerics/alphanumerics/" with "wiki/image:".
For inline images, put the url, preceded and followed by a space, in the text: a http://upload.wikimedia.org/wikipedia/commons/2/27/Tst.png b gives a http://upload.wikimedia.org/wikipedia/commons/2/27/Tst.png b
Without special formatting, inline images are positioned like this:
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text http://en.wikipedia.org/upload/b/bc/Wiki.png text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
A table may be used to position the image(s) as desired. E.g.
{| | http://en.wikipedia.org/upload/b/bc/Wiki.png | | http://en.wikipedia.org/upload/b/bc/Wiki.png |- | | http://en.wikipedia.org/upload/b/bc/Wiki.png | |}
gives
http://en.wikipedia.org/upload/b/bc/Wiki.png | http://en.wikipedia.org/upload/b/bc/Wiki.png | |
http://en.wikipedia.org/upload/b/bc/Wiki.png |
Similarly
{| | http://upload.wikimedia.org/wikipedia/commons/2/27/Tst.png | | http://upload.wikimedia.org/wikipedia/commons/2/27/Tst.png | | http://upload.wikimedia.org/wikipedia/commons/2/27/Tst.png |- | | http://upload.wikimedia.org/wikipedia/commons/2/27/Tst.png | | http://upload.wikimedia.org/wikipedia/commons/2/27/Tst.png | |- | http://upload.wikimedia.org/wikipedia/commons/2/27/Tst.png | | http://upload.wikimedia.org/wikipedia/commons/2/27/Tst.png | | http://upload.wikimedia.org/wikipedia/commons/2/27/Tst.png |}
gives
Section II
Navigational maps like [1] have map areas linked to pages. The html with <area> tags can not be put in the wikitext. However, there are the following possibilities:
- EasyTimeline allows the creation of an image and a page embedding that image, with rectangular map areas defined by <area> tags in the html. The title of a link to a non-internal page is only the domain name, e.g. "en.wikipedia.org/..". The length and width of the rectangle can not be controlled, except that it depends on the length of the link label and its font size. In case of overlap of rectangles one has to look at the hoverbox or statusbar to avoid following the wrong link. In case of much overlap it may not be possible to use all links.
- One can divide an image in rectangles, like in these chess and go positions, or superimpose an area with images (see above) and link each rectangle/image to the desired target by means of a redirect on the image page (provided that the target is internal).
See also:
Examples using EasyTimeline
Example 1
<timeline> ImageSize = width:400 height:150 PlotArea = width:400 height:150 left:0 bottom:0 TimeAxis = orientation:vertical # dummy, required Period = from:0 till:1 # dummy, required Define $s = fontsize:XL TextData = pos:(50,120) $s text:[http://en.wikipedia.org/wiki/Leiden|o Leiden] pos:(150,110) $s text:[http://en.wikipedia.org/wiki/Alphen%20aan%20den%20Rijn|o Alphen aan den Rijn] pos:(10,80) $s text:[http://en.wikipedia.org/wiki/The%20Hague|o The Hague] pos:(50,40) $s text:[http://en.wikipedia.org/wiki/Rotterdam|o Rotterdam] </timeline>
gives
<timeline>
ImageSize = width:400 height:150
PlotArea = width:400 height:150 left:0 bottom:0
TimeAxis = orientation:vertical # dummy, required
Period = from:0 till:1 # dummy, required
Define $s = fontsize:XL
TextData =
pos:(50,120) $s text:Leiden pos:(150,110) $s text:Alphen aan den Rijn pos:(10,80) $s text:The Hague pos:(50,40) $s text:Rotterdam
</timeline>
Example 2
<timeline> Preset = TimeHorizontal_AutoPlaceBars_UnitYear ImageSize = width:500 barincrement:50 Period = from:0 till:12 BarData= bar:a bar:b bar:c Define $s = fontsize:XL BackgroundColors = canvas:white PlotData= width:20 shift:(45,-5) bar:a from:3 till:4 $s text:[http://en.wikipedia.org/wiki/Leiden|Leiden] bar:a from:6 till:7 $s text:[http://en.wikipedia.org/wiki/Alphen%20aan%20den%20Rijn|Alphen aan den Rijn] bar:b from:1 till:2 $s text:[http://en.wikipedia.org/wiki/The%20Hague|The Hague] bar:c from:3 till:4 $s text:[http://en.wikipedia.org/wiki/Rotterdam|Rotterdam] </timeline>
gives
<timeline>
Preset = TimeHorizontal_AutoPlaceBars_UnitYear
ImageSize = width:500 barincrement:50
Period = from:0 till:12
BarData=
bar:a bar:b bar:c
Define $s = fontsize:XL BackgroundColors = canvas:white PlotData=
width:20 shift:(45,-5) bar:a from:3 till:4 $s text:[2] bar:a from:6 till:7 $s text:aan den Rijn bar:b from:1 till:2 $s text:Hague bar:c from:3 till:4 $s text:[3]
</timeline>
Alternatives
Some attempts for other alternatives (note the hover boxes):
o | ||
o | ||
o |
Ascii art map, with both the city outline and the label clickable:
x xxx Leiden x xx xxxx The Hague xxx xx xxxxx Rotterdam xxxx
When external images can be embedded:
http://upload.wikimedia.org/wikipedia/commons/2/27/Tst.png | ||
http://upload.wikimedia.org/wikipedia/commons/2/27/Tst.png | ||
http://upload.wikimedia.org/wikipedia/commons/2/27/Tst.png |
The html titles are "w: Leiden", etc., the alt attribute is "Tst.png". Opera shows the title in the hoverbox, and also the url, IE only shows the titles.
With labels:
See also m:Maps, m:Maps' clickability.
Uploading
Before uploading please ensure that you have rights to upload and redistribute the image(s) in question, and that they comply with any further licensing requirements of the Wikimedia Commons project and other criteria for inclusion.
In the menu on the left under "toolbox" you will have a link named "Upload file". On the following page on most browsers, you will see a "Browse..." button, which will bring up your operating system's standard file open dialog. Choosing a file will fill the name of that file into the text field next to the button. You must also check the box affirming that you are not violating any copyrights by uploading the file. Press the "Upload file" button to finish the upload. This may take some time if you have a slow internet connection.
The preferred formats are JPEG for photographic images, PNG for drawings and other iconic images, and OGG for sounds. Please name your files descriptively to avoid confusion.
Please note that as with wiki pages, others may edit or delete your uploads if they think it serves the project, and you may be blocked from uploading if you abuse the system.
When a file is uploaded with the same name as an existing one, the old one is replaced. If that is not the intention one has to check in advance that the same name does not exist yet, because currently the system does not warn against overwriting. For example, click on http://meta.wikipedia.org/wiki/Image:A and replace the A in the address bar of the browser with the file name. Alternatively use the search feature in Special:Imagelist.
When a media file is replaced by uploading a new one with the same name (e.g. an image in an article is replaced), this does not show up in the page history of the article, nor in the Related changes of the article, nor in the revision history of the image description page (unless the description section is also changed). However, it is recorded in the Image History section of the image description page, and it changes Meta:Upload log. Therefore, to watch changes in images in an article, it is not sufficient to watch the article itself and the image description pages ("watching" in the sense of putting on the list of "watched pages"), but one should watch the Upload log also.
Special:Imagelist provides the same information as the Upload log, but it uses the user's local time instead of the default time (set to Coordinated Universal Time for Wikimedia projects). In addition it gives the file sizes. Further it allows loading of portions and sorting by size in addition to sorting by date, and it has not only links to the image description pages, but also directly to the images.
- Last 50 uploaded files
- MediaWiki file usage - technical notes
Uploading non-image files
By default, MediaWiki only allows you to upload certain types of files (extensions gif, jpg, jpeg, ogg and png). This is managed by this order in includes/DefaultSettings.php:
- $wgFileExtensions = array( 'png', 'gif', 'jpg', 'jpeg', 'ogg' );
If you want to be able to upload other file types, for instance ZIP files you must add this line to LocalSettings.php:
- $wgFileExtensions = array( 'png', 'gif', 'jpg', 'jpeg', 'ogg', 'zip');
Caution: do not modify the line in DefaultSettings.php because it will break when updating
Also you may find php and apache limit the filesize of uploads too giving spurious messages on the upload page such as "The file you uploaded seems to be empty. This might be due to a typo in the file name. Please check whether you really want to upload this file." See Q: What affects the maximum file size which can be uploaded? on this page for details: http://meta.wikimedia.org/wiki/Uploading_files#Frequently_Asked_Questions. (It might be better to have this information conglomerated more centrally).
Take in account there is a blacklist of file extensions in includes/DefaultSettings.php:
- $wgFileBlacklist = array(
- # HTML may contain cookie-stealing JavaScript and web bugs
- 'html', 'htm',
- # PHP scripts may execute arbitrary code on the server
- 'php', 'phtml', 'php3', 'php4', 'phps',
- # Other types that may be interpreted by some servers
- 'shtml', 'jhtml', 'pl', 'py',
- # May contain harmful executables for Windows victims
- 'exe', 'scr', 'dll', 'msi', 'vbs', 'bat', 'com', 'pif', 'cmd', 'vxd', 'cpl' );
More details and examples on embedding internal images into articles
To include an uploaded image in a page, use a link in the form [[image:filename.jpg]] or [[image:filename.png|alt text]]. For uploaded sound files, you can include the download link in a page with [[media:filename.ogg]].
Example: Using [[Image:Broccoli-thumbnail.png]], the image Broccoli-thumbnail.png is included (broccoli is an edible vegetable):
If the wiki is set to another language than English, the name of the "Image:" namespace might be changed. For German, for example, it's [[Bild:Broccoli-thumbnail.png]]
Alternate Text
By specifying alternate text, you can make the article accessible to the blind, too. You can specify an alternate text after a "|"-sign, e.g. [[Image:Broccoli-thumbnail.png|A cartoon drawing of broccoli]], which will look like this:
Layout and resizing
Several options can be set when including an image. Those affect the placing of the image, its size or the way the image will be presented. The options are right, left, center, none, sizepx, thumbnail (thumb), frame, and alternate (caption) text.
The options can be combined, and vertical bars ("|") are used to separate options from each other. The options can be put in any order. An unknown option is taken as the caption text. If there are two or more unknown options, the last one upstages the rest: [[Image:Broccoli-thumbnail.png|thumb|Canterbury Tales|80px|left|A cartoon drawing of broccoli]]. This is shown on the left; the caption is "A cartoon drawing of broccoli", not "Canterbury Tales".
Here is the description of the options other than the caption text:
- right
- makes the image right-aligned, and text floats to the left: [[Image:Broccoli-thumbnail.png|right|70px|]] (shown on the right).
- left
- The image is left aligned, and text floats to the right of the image: [[Image:Broccoli-thumbnail.png|left|70px|]] (shown on the left).
- center
- The image is centered, and...the following text starts below it: [[Image:Broccoli-thumbnail.png|center|70px|]] (shown above).
- none
- The image is put at the left, and...the following text does not float to the right or (naturally) to the left, and starts below it: [[Image:Broccoli-thumbnail.png|none|70px|]] (shown above).
- Notes:
- The above four options are incompatible. When used combined, the last one overrides the rest: [[Image:Broccoli-thumbnail.png|none|right|center|left|70px|]] (shown on the left).
- What is between the last vertical bar and the closing brackets ("]]"), void or not, is taken as the last option, and works as usual. For instance, when the last option is right, the image is right-aligned, and text floats to the left: [[Image:Broccoli-thumbnail.png|70px|right]] (shown on the right).
- What is between the last vertical bar and the closing brackets ("]]"), void or not, is taken as the last option, and works as usual. For instance, when the last option is right, the image is right-aligned, and text floats to the left: [[Image:Broccoli-thumbnail.png|70px|right]] (shown on the right).
- In particular, if the last option is the void text (that is, if there is nothing between the last vertical bar and the closing brackets), the caption is not displayed: [[Image:Broccoli-thumbnail.png|thumb|This text is not displayed.|70px|left|]] (shown on the left) and [[Image:Broccoli-thumbnail.png|thumb|This text is displayed.|70px|right]] (shown on the right).
- In particular, if the last option is the void text (that is, if there is nothing between the last vertical bar and the closing brackets), the caption is not displayed: [[Image:Broccoli-thumbnail.png|thumb|This text is not displayed.|70px|left|]] (shown on the left) and [[Image:Broccoli-thumbnail.png|thumb|This text is displayed.|70px|right]] (shown on the right).
- sizepx
- renders a version of the image that's [size] pixels wide (e.g. [[Image:Broccoli-thumbnail.png|right|50px|]] shown on the right). Height is computed to keep aspect ratio (i.e. the shape of the image).
- Note: When there are two or more "size" options, only the last one is valid: [[Image:Broccoli-thumbnail.png|right|50px|80px]] (shown on the right).
- Note: When there are two or more "size" options, only the last one is valid: [[Image:Broccoli-thumbnail.png|right|50px|80px]] (shown on the right).
- thumbnail, thumb
- The thumbnail (thumb) option generates a thumbnail image. It is automatically resized when the "size" attribute is not specified. Without the options left, center, and none, the image is normally on the right. If the image has a caption text, it is displayed in the lower margin. E.g. [[Image:Broccoli-thumbnail.png|thumbnail|left|100px|]] (shown on the left) and [[Image:Broccoli-thumbnail.png|thumb|The Palace of Westminster]] (shown on the right).
An "enlarge"-icon is put also in the lower margin of the thumbnail. Both the image itself and the icon link to the image description page with the image in its actual size. The icon shows the link title "Enlarge" in its hoverbox, even in cases where this term does not apply, because it leads from the enlarged image to the one with the actual size. E.g. [[Image:The Earth seen from Apollo 17.png|right|thumb|100px|This is a globe, and take a look at it in [[Media:The Earth seen from Apollo 17.png|the actual size]].]] (shown on the right).
- frame
- With this option, the embedded image is shown with its actual size enclosed by a frame, regardless of the "thumb" or "size" attribute, and the caption, if any, is visible in the frame. Without the options left, center, and none, the image is normally on the right: [[Image:Broccoli-thumbnail.png|frame|thumbnail|50px|A drawing of broccoli]].
With none of the options other than sizepx and alternate (caption) text, an embedded image is rendered inline. Note that the size of the inline images can be reduced but they can not be enlarged.
text text text text text text [[Image:Broccoli-thumbnail.png|150px|A drawing of broccoli]] text text text text text [[Image:The Earth seen from Apollo 17.png|100px|This is a globe.]] text text text text
gives
text text text text text text text text text text text This is a globe. text text text text
Demo
Below one can see the result of the three types of internal link style and external link style on this project. To test this in another project, copy the wikitext there. If applicable, check also the interlanguage links at the margin of the page. Note that some links go to the image description page, others just to the image itself.
- [[Image:Tile Hill train 550.jpg]]
- [[:Image:Tile Hill train 550.jpg]]
- [[Media:Tile Hill train 550.jpg]]
- external, with label: [http://en.wikipedia.org/upload/d/d1/Tile_Hill_train_550.jpg train]
- external, footnote style: [http://en.wikipedia.org/upload/d/d1/Tile_Hill_train_550.jpg]
- external, just the URL: http://en.wikipedia.org/upload/d/d1/Tile_Hill_train_550.jpg http://en.wikipedia.org/upload/d/d1/Tile_Hill_train_550.jpg
Revision history of pages containing images
Pages in the stored page history consist of wikitext with possible references to templates and images. When viewing an old version of a page, these refer to the current versions of the templates and images, if these still exist. Thus the former composite page is not reconstructed.
Default settings
Here is the default settings shown in [5].
# This is the list of preferred extensions for uploading files. Uploading # files with extensions not in this list will trigger a warning. $wgFileExtensions = array( 'png', 'jpg', 'jpeg', 'ogg' ); # Files with these extensions will never be allowed as uploads. $wgFileBlacklist = array( # HTML may contain cookie-stealing JavaScript and web bugs 'html', 'htm', # PHP scripts may execute arbitrary code on the server 'php', 'phtml', 'php3', 'php4', 'phps', # Other types that may be interpreted by some servers 'shtml', 'jhtml', 'pl', 'py', # May contain harmful executables for Windows victims 'exe', 'scr', 'dll', 'msi', 'vbs', 'bat', 'com', 'pif', 'cmd', 'vxd', 'cpl' ); # This is a flag to determine whether or not to check file extensions on # upload. $wgCheckFileExtensions = true; # If this is turned off, users may override the warning for files not # covered by $wgFileExtensions. $wgStrictFileExtensions = true; # Warn if uploaded files are larger than this $wgUploadSizeWarning = 150000;
Linking to an enlarged image
Unfortunately, when linking to an image, no parameters can be specified except the link label, e.g. bullet. Also, when linking to a template instead of embedding it, transfer of parameters is not possible.
Thus one cannot link to an enlarged image unless one has prepared a page containing that enlarged image, e.g. help:tst.png (large). The large image has been put here in the Help namespace, alternatively it could have been in:
- the image description page (in that case some scrolling is required to see the image history and the pages using the image, but this can be made more convenient with a TOC)
- its talk page (ditto, to see the talk)
- a separate page in the image namespace, like Image:Tst.png (large).
Internal images that can not be embedded
Images on MediaWiki:Bad image list can not be embedded, they appear as regular link to the image page. See e.g. w:en:MediaWiki:Bad image list.
Protection
Protection of an image page is automatically also protection of the image itself: i.e. a new image under the name of the existing image can only be uploaded by a sysop.
WikiTeX
WikiTeX ([6]) is a MediaWiki extension that can produce graphs of functions, various diagrams, etc. It is operational at http://wikisophia.org/ , but not yet at Wikimedia projects. Note that one can anyway produce an image on Wikisophia, and subsequently upload it on any MediaWiki project.
See also
- Help:Image page
- w:Wikipedia:Extended_image_syntax
- m:Parser testing#Pictures
- w:Wikipedia:Image use policy
- w:Multimedia
- Help:Editing.
- m:Uploading files (about installation)
- m:Thumbnailed images
- m:SVG image support
- m:Image pages/Data syntax
- m:Image pages
- m:Sample image copyright case
- m:Fixing transparent PNGs
- m:Collaborative images