2. XWiki Platform
3. XWiki.XWikiSyntaxImages

= Editing =

== Images ==

=== 1.0 Images ===

|=Feature|=XWiki Syntax 1.0|=Result
|Image from attachment on current page|(((
{{info}}See [[Image Macro>>http://extensions.xwiki.org/xwiki/bin/view/Extension/Image+Macro+%28Radeox%29]] for details{{/info}}
{{{{image:img.png}}}}
)))|image:XWiki.XWikiSyntaxImages@img.png
|Image from attachment on another page|{{{{image:img.png|document=Space.Page}}}}|image:XWiki.XWikiSyntaxImages@img.png
|Image with parameters|{{{{image:img.png|width=25|height=25}}}}|[[image:XWiki.XWikiSyntaxImages@img.png||width="25" height="25"]]
|Images located at URL|{{{http://some/url/img.png}}}|image:XWiki.XWikiSyntaxImages@img.png

=== 2.0 Images ===

|=Feature|=XWiki Syntax 2.0|=Result
|Image from attachment on current page|{{{image:img.png}}}|image:XWiki.XWikiSyntaxImages@img.png
|Image from attachment on another page|{{{image:Space.Page@img.png}}}|image:XWiki.XWikiSyntaxImages@img.png
|Image with parameters|{{{[[image:img.png||width="25" height="25"]]}}}|[[image:XWiki.XWikiSyntaxImages@img.png||width="25" height="25"]]
|Images located at URL|{{{image:http://some/url/img.png}}}|image:XWiki.XWikiSyntaxImages@img.png

{{velocity}}$subHeading XWiki Syntax 2.0 Image Specification $subHeading{{/velocity}}

{{info}}
The part in ##( )## is required, while the parts in ##{ }## are optional.
{{/info}}

The full format of an image is either **##image~: (reference)##** or **##~[~[image~: (reference) {||parameters}]]##**

* **##image~:##** A required string identifying the resource as image.
* **##reference##**: The reference to the image that shall be displayed in one of the following forms:
** **URL**: Any URL to an image in the form of **##http:~/~/path/imageName##**. Example: ##http:~/~/domain.org/path/img.png##
** **Attachment** reference in the form **##~{~{~{wikiName:} space.} page@} (imageName)##**
*** **##wikiName##**: An optional string containing the name of a virtual wiki. The image reference will point to an image attached to a page inside that virtual wiki. Example: mywiki
*** **##space##**: An optional wiki Space name. If no space is specified the current space is used. Example: Main
*** **##page##**: An optional string containing the name of the wiki page to which the referenced image is attached. Example: WebHome
*** **##imageName##**: A required string containing the name of the image attached to a page as it is stored in the wiki.
* **##parameters##**: An optional list of space-separated parameters passed to the image. Example: ##width="800" height="600" alt="img.png" title="My nice image"##
** **HTML attributes**: All attributes defined by the HTML standard will be added to the rendered HTML ##<img>## tag.
*** **##style##**: CSS style information that should be applied to the image. Examples: ##style="float:right;height:50"## (image on right side, height 50 px), ##style="display:block;margin-left:auto;margin-right:auto;width:80%"## (image centered, width 80% of block width), ##style="vertical-align:bottom"## (text starts at bottom of picture)
*** **##height##**: A parameter that defines the height of the displayed image. The value should be presented either in pixel (example: ##height="80"##) or in pixel related to the height of the block containing the image (example: ##height="40%"##).
*** **##width##**: A parameter that defines the width of the displayed image. The value should be presented either in pixel (example: ##width="80"##) or in pixel related to the width of the block containing the image (example: ##width="40%"##).
*** **##title##**: A parameter that defines the title the displayed image which will be visible when hovering the mouse trigger over the image, for instance. Example: ##title="My nice image"##
*** **##alt##**: A parameter that defines which text should be displayed if the browser is not able to display the image. Since this is a required HTML attribute XWiki will use the file name instead if the ##alt## parameter is not defined. Example: ##alt="img.png"##
*** **More**: A more in depth explanation on the HTML ##<img>## tag including more attributes can be reviewed [[on w3.org>>http://www.w3.org/TR/html4/struct/objects.html#h-13.2]].

=== 2.1 Images ===

|=Feature|=XWiki Syntax 2.1|=Result
|Image from attachment on current page|{{{image:img.png}}}|image:XWiki.XWikiSyntaxImages@img.png
|Image from attachment on another page|{{{image:PageA.PageB@img.png}}}|image:XWiki.XWikiSyntaxImages@img.png
|Image with parameters|{{{[[image:img.png||width="25" height="25"]]}}}|[[image:XWiki.XWikiSyntaxImages@img.png||width="25" height="25"]]
|Images located at URL|{{{image:http://some/url/img.png}}}|image:XWiki.XWikiSyntaxImages@img.png
|Prepackaged Icons|{{{image:icon:accept}}}|image:icon:accept

{{velocity}}$subHeading XWiki Syntax 2.1 Image Specification $subHeading{{/velocity}}

{{info}}
The part in ##( )## is required, while the parts in ##{ }## are optional.
{{/info}}

The full format of an image is either **##image~: (reference)##** or **##~[~[image~: (reference) {||parameters}]]##**

* **##image~:##** A required string identifying the resource as image.
* **##reference##**: The reference to the image that shall be displayed in one of the following forms:
** **URL**: Any URL to an image in the form of **##protocol:~/~/path/imageName##**. Example: ##http:~/~/domain.org/path/img.png##
** **Attachment** reference in the form **##~{~{~{wikiName:} spaceNameList.} pageName@} (imageName)##**
*** **##wikiName##**: An optional string containing the name of a virtual wiki. The image reference will point to an image attached to a page inside that virtual wiki. If no wiki is specified, the current wiki is used. Example: ##mywiki##.
*** **##spaceNameList##**: An optional dot-separated list of wiki Space names. If no space is specified the current space is used. Examples: ##Main##, ##A.B##, ##A.B.C##
*** **##pageName##**: An optional string containing the name of the wiki page to which the referenced image is attached. Example: ##Welcome##
*** **##imageName##**: A required string containing the name of the image attached to a page as it is stored in the wiki. Example: ##myImage.png##
** **Icon** reference in the form **##{{{(icon:)}}} (iconName)##**. Example: **##icon:accept##**
*** **##icon:##** A required string identifying the image reference as an icon from the [[XWiki Icon Set>>http://www.famfamfam.com/lab/icons/silk/previews/index_abc.png]].
*** **##iconName##**: A required string identifying the icon referenced. Example: ##accept##
** **Data URI** in the form **##{{{(data:)}}} (content)##**. Example: **##{{{data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==}}}##**
*** **##data:##** A required string identifying the image as being specified inline using the [[Data URI scheme>>http://en.wikipedia.org/wiki/Data_URI_scheme]].
*** **##content##**: The encoded image. Example: ##{{{image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==}}}##
* **##parameters##**: An optional list of space-separated parameters passed to the image. Example: ##width="800" height="600" alt="img.png" title="My nice image"##
** **HTML attributes**: All attributes defined by the HTML standard will be added to the rendered HTML ##<img>## tag.
*** **##style##**: CSS style information that should be applied to the image. Examples: ##style="float:right;height:50"## (image on right side, height 50 px), ##style="display:block;margin-left:auto;margin-right:auto;width:80%"## (image centered, width 80% of block width), ##style="vertical-align:bottom"## (text starts at bottom of picture)
*** **##height##**: A parameter that defines the height of the displayed image. The value should be presented either in pixel (example: ##height="80"##) or in pixel related to the height of the block containing the image (example: ##height="40%"##).
*** **##width##**: A parameter that defines the width of the displayed image. The value should be presented either in pixel (example: ##width="80"##) or in pixel related to the width of the block containing the image (example: ##width="40%"##).
*** **##title##**: A parameter that defines the title the displayed image which will be visible when hovering the mouse trigger over the image, for instance. Example: ##title="My nice image"##
*** **##alt##**: A parameter that defines which text should be displayed if the browser is not able to display the image. Since this is a required HTML attribute XWiki will use the file name instead if the ##alt## parameter is not defined. Example: ##alt="img.png"##
*** **More**: A more in depth explanation on the HTML ##<img>## tag including more attributes can be reviewed [[on w3.org>>http://www.w3.org/TR/html4/struct/objects.html#h-13.2]].
** **##queryString##**: Allows queries to be passed to the server when creating the download link for the referenced image. Example: ##queryString="width=100&height=800&keepAspectRatio=true"## (**##keepAspectRatio=true## will fail if the ##width## and ##height## parameters are specified in addition to ##queryString##!**)

== Edición =

== Imágenes ==

=== 1.0 Images ===

|=Funcionalidad|=Sintaxis XWiki 1.0|=Resultado
|Imagen de un adjunto en la página actual|(((
{{info}}Ver [[Macro Image>>http://extensions.xwiki.org/xwiki/bin/view/Extension/Image+Macro+%28Radeox%29]] para más detalle{{/info}}
{{{{image:img.png}}}}
)))|image:XWiki.XWikiSyntaxImages@img.png
|Imagen de un adjunto en otra página|{{{{image:img.png|document=Espacio.Página}}}}|image:XWiki.XWikiSyntaxImages@img.png
|Imagen con parámetros|{{{{image:img.png|width=25|height=25}}}}|[[image:XWiki.XWikiSyntaxImages@img.png||width="25" height="25"]]
|Imágenes a través de una URL|{{{http://alguna/url/img.png}}}|image:XWiki.XWikiSyntaxImages@img.png

=== 2.0 Images ===

|=Funcionalidad|=Sintaxis XWiki 2.0|=Resultado
|Imagen de un adjunto en la página actual|{{{image:img.png}}}|image:XWiki.XWikiSyntaxImages@img.png
|Imagen de un adjunto en otra página|{{{image:Espacio.Página@img.png}}}|image:XWiki.XWikiSyntaxImages@img.png
|Imagen con parámetros|{{{[[image:img.png||width="25" height="25"]]}}}|[[image:XWiki.XWikiSyntaxImages@img.png||width="25" height="25"]]
|Imágenes a través de una URL|{{{image:http://alguna/url/img.png}}}|image:XWiki.XWikiSyntaxImages@img.png

{{velocity}}$subHeading Especificación de la Sintaxis XWiki 2.0 para imágenes$subHeading{{/velocity}}

{{info}}
La parte entre ##( )## es obligatoria, mientras que las partes entre ##{ }## son opcionales.
{{/info}}

El formato completo para una imagen es **##image~: (referencia)##** o **##~[~[image~: (referencia) {||parámetros}]]##**

* **##image~:##** Una cadena de texto obligatoria que identifica el recurso como una imagen.
* **##referencia##**: La referencia de la imagen que se tiene que mostrar de una de las formas siguientes:
** **URL**: Cualquier URL a una imagen con la forma **##http:~/~/ruta/nombreDeImagen##**. Ejemplo: ##http:~/~/dominio.org/ruta/img.png##
** Referencia a un **adjunto** con la forma **##~{~{~{nombreDeWiki:} espacio.} página@} (nombreDeImagen)##**
*** **##nombreDeWiki##**: Una cadena de texto opcional que contiene el nombre de una wiki virtual. La referencia a la imagen apuntará a una imagen adjuntada a una página dentro de esa wiki virtual. Ejemplo: miwiki
*** **##espacio##**: Un nombre de espacio wiki opcional. Si no se especifica un nombre de espacio, se utiliza el espacio en curso. Ejemplo: Inicio
*** **##página##**: Una cadena de texto opcional que contiene el nombre la página wiki a la que está adjuntada la imagen referenciada. Ejemplo: WebHome
*** **##nombreDeImagen##**: Una cadena de texto obligatoria que contiene el nombre de la imagen adjuntada a una página como se almacena en la wiki.
* **##parámetros##**: Una lista opcional de parámetros separados por espacios que se pasa a la imagen. Ejemplo: ##width="800" height="600" alt="img.png" title="Mi preciosa imagen"##
** **Atributos HTML**: Todos los atributos definidos en el estándar HTML se añadirán a la etiqueta HTML ##<img>## renderizada.
*** **##estilo##**: Información de estilo CSS que se debería aplicar a la imagen. Ejemplos: ##style="float:right;height:50"## (imagen en el lado derecho, altura 50 pixeles), ##style="display:block;margin-left:auto;margin-right:auto;width:80%"## (imagen centrada, anchura 80% de la anchura del bloque), ##style="vertical-align:bottom"## (el texto comienza en la parte inferior de la imagen)
*** **##height##**: Un parámetro que define la altura de la imagen visualizada. El valor debe estar en pixeles (ejemplo: ##height="80"##) o en pixeles relativos a la altura del bloque que contiene la imagen (ejemplo: ##height="40%"##).
*** **##width##**: Un parámetro que define la anchura de la imagen visualizada. El valor debe estar en pixeles (ejemplo: ##width="80"##) o en pixeles relativos a la anchura del bloque que contiene la imagen (ejemplo: ##width="40%"##).
*** **##title##**: Un parámetro que define el título de la imagen visualizada que será visible al pasar el puntero del ratón sobre la imagen, por ejemplo. Ejemplo: ##title="Mi preciosa imagen"##
*** **##alt##**: Un parámetro que define el texto que se debería visualizar si el navegador no puede visualizar la imagen. Como este es un atributo HTML obligatorio XWiki empleará el nombre de fichero en lugar del parámetro ##alt## si no se define. Ejemplo: ##alt="img.png"##
*** **Más**: Una explicación en mayor profundidad de la etiqueta HTML ##<img>## que incluye más atributos se puede revisar [[en w3.org>>http://www.w3.org/TR/html4/struct/objects.html#h-13.2]].

=== 2.1 Images ===

|=Funcionalidad|=Sintaxis XWiki 2.1|=Resultado
|Imagen de un adjunto en la página actual|{{{image:img.png}}}|image:XWiki.XWikiSyntaxImages@img.png
|Imagen de un adjunto en otra página|{{{image:PageA.PageB@img.png}}}|image:XWiki.XWikiSyntaxImages@img.png
|Imagen con parámetros|{{{[[image:img.png||width="25" height="25"]]}}}|[[image:XWiki.XWikiSyntaxImages@img.png||width="25" height="25"]]
|Imágenes a través de una URL|{{{image:http://alguna/url/img.png}}}|image:XWiki.XWikiSyntaxImages@img.png
|Iconos pre-empaquetados|{{{image:icon:accept}}}|image:icon:accept

{{velocity}}$subHeading Especificación de la Sintaxis XWiki 2.1 para imágenes$subHeading{{/velocity}}

{{info}}
La parte entre ##( )## es obligatoria, mientras que las partes entre ##{ }## son opcionales.
{{/info}}

El formato completo para una imagen es **##image~: (referencia)##** o **##~[~[image~: (referencia) {||parámetros}]]##**

* **##image~:##** Una cadena de texto obligatoria que identifica el recurso como una imagen.
* **##referencia##**: La referencia de la imagen que se tiene que mostrar de una de las formas siguientes:
** **URL**: Cualquier URL a una imagen con la forma **##protocolo:~/~/ruta/nombreDeImagen##**. Ejemplo: ##http:~/~/dominio.org/ruta/img.png##
** Referencia a un **adjunto** con la forma **##~{~{~{nombreDeWiki:} listaDeNombresDeEspacio.} nombreDePágina@} (nombreDeImagen)##**
*** **##nombreDeWiki##**: Una cadena de texto opcional que contiene el nombre de una wiki virtual. La referencia a la imagen apuntará a una imagen adjuntada a una página dentro de esa wiki virtual. Si no se especifica ninguna wiki, se utilizará la wiki actual. Ejemplo: miwiki
*** **##espacio##**: Un nombre de espacio wiki opcional. Si no se especifica un nombre de espacio, se utiliza el espacio en curso. Ejemplo: Inicio
*** **##listaDeNombresDeEspacio##**: Una lista opcional de nombres de espacio wiki separada por puntos. Si no se especifica ningún espacio, se utiliza el espacio en curso. Ejemplos: ##Inicio##, ##A.B##, ##A.B.C##
*** **##nombreDePágina##**: Una cadena de texto opcional que contiene el nombre la página wiki a la que está adjuntada la imagen referenciada. Ejemplo: ##Bienvenido##
*** **##nombreDeImagen##**: Una cadena de texto obligatoria que contiene el nombre e la imagen adjuntada a una página como se almacena en la wiki. Ejemplo: ##miImagen.png##
** Referencia a un **Icono** con la forma **##{{{(icon:)}}} (nombreDeIcono)##**. Ejemplo: **##icon:accept##**
*** **##icon:##** Una cadena de texto obligatoria que identifica la referencia de imagen como un icono del [[Conjunto de iconos de XWiki>>http://www.famfamfam.com/lab/icons/silk/previews/index_abc.png]].
*** **##nombreDeIcono##**: Una cadena de texto que identifica el icono referenciado. Ejemplo: ##accept##
** **URI Data** con la forma **##{{{(data:)}}} (contenido)##**. Ejemplo: **##{{{data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==}}}##**
*** **##data:##** Una cadena de obligatoria que identifica la imagen con una especificación en línea que emplea el [[esquema URI Data>>http://en.wikipedia.org/wiki/Data_URI_scheme]].
*** **##contenido##**: La imagen codificada. Ejemplo: ##{{{image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==}}}##
* **##parámetros##**: Una lista opcional de parámetros separados por espacios que se pasa a la imagen. Ejemplo: ##width="800" height="600" alt="img.png" title="Mi preciosa imagen"##
** **Atributos HTML**: Todos los atributos definidos en el estándar HTML se añadirán a la etiqueta HTML ##<img>## renderizada.
*** **##style##**: Información de estilo CSS que se debería aplicar a la imagen. Ejemplos: ##style="float:right;height:50"## (imagen en el lado derecho, altura 50 pixeles), ##style="display:block;margin-left:auto;margin-right:auto;width:80%"## (imagen centrada, anchura 80% de la anchura del bloque), ##style="vertical-align:bottom"## (el texto comienza en la parte inferior de la imagen)
*** **##height##**: Un parámetro que define la altura de la imagen visualizada. El valor debe estar en pixeles (ejemplo: ##height="80"##) o en pixeles relativos a la altura del bloque que contiene la imagen (ejemplo: ##height="40%"##).
*** **##width##**: Un parámetro que define la anchura de la imagen visualizada. El valor debe estar en pixeles (ejemplo: ##width="80"##) o en pixeles relativos a la anchura del bloque que contiene la imagen (ejemplo: ##width="40%"##).
*** **##title##**: Un parámetro que define el título de la imagen visualizada que será visible al pasar el puntero del ratón sobre la imagen, por ejemplo. Ejemplo: ##title="Mi preciosa imagen"##
*** **##alt##**: Un parámetro que define el texto que se debería visualizar si el navegador no puede visualizar la imagen. Como este es un atributo HTML obligatorio XWiki empleará el nombre de fichero en lugar del parámetro ##alt## si no se define. Ejemplo: ##alt="img.png"##
*** **Más**: Una explicación en mayor profundidad de la etiqueta HTML ##<img>## que incluye más atributos se puede revisar [[en w3.org>>http://www.w3.org/TR/html4/struct/objects.html#h-13.2]].
** **##queryString##**: Permite pasar consultas al servidor al crear el enlace de descarga de la imagen referenciada. Ejemplo: ##queryString="width=100&height=800&keepAspectRatio=true"## (**¡##keepAspectRatio=true## fallará si se especifican los parámetros ##width## y ##height## además de ##queryString##!**)