Ayuda:Galería de fotos - Historial de revisiones

Mermelado: /* Uso */

2020-01-10T01:16:14Z

Uso

Mermelado: /* Uso */

2020-01-10T01:12:38Z

Uso

Mermelado: /* Alineación */

2020-01-10T01:12:08Z

Alineación

Mermelado: /* Tamaño de las imágenes */

2020-01-10T01:11:39Z

Tamaño de las imágenes

Mermelado: /* Modos */

2020-01-10T00:59:20Z

Modos

Mermelado: Protegió «Ayuda:Galería de fotos» ([Editar=Solo permitir administradores] (indefinido) [Pueden trasladar=Solo permitir administradores] (indefinido))

2016-02-29T21:34:34Z

Protegió «Ayuda:Galería de fotos» ([Editar=Solo permitir administradores] (indefinido) [Pueden trasladar=Solo permitir administradores] (indefinido))

Mermelado: Página creada con «Una de las utilidades más simples pero a la vez interesantes del sistema [https://www.mediawiki.org MediaWiki], es la galería multimedia. Su uso es extremadamente sencill...»

2016-02-29T21:34:07Z

Página creada con «Una de las utilidades más simples pero a la vez interesantes del sistema [https://www.mediawiki.org MediaWiki], es la galería multimedia. Su uso es extremadamente sencill...»

Página nueva

Una de las utilidades más simples pero a la vez interesantes del sistema [https://www.mediawiki.org MediaWiki], es la galería multimedia. Su uso es extremadamente sencillo y el objetivo es poder disponer de un grupo de fotos en miniatura o no tan miniatura, juntas. Cada imagen podrá disponer de su propio título y su correspondiente enlace para verse, no sólo a tamaño real, sino con información detallada sobre ella.<br />En realidad, cualquier imagen que utilices en tus artículos, dispondrá de ese tipo de información. tienes un ejemplo:[[:Archivo:JuanDirecto.jpg|aquí]]
== Uso ==
<span class="galeria">al clicar sobre este icono</span> En la zona del artículo donde esté el cursor aparecerá esto:
<code>
<gallery>
Ejemplo.jpg|Descripción1
Ejemplo.jpg|Descripción2
</gallery>
</code>
Y el resultado del ejemplo anterior sería éste:
<gallery>
Ejemplo.jpg|Descripción1
Ejemplo.jpg|Descripción2
</gallery>
Puedes agregarle tantos elementos como quieras con sus correspondientes decripciones que por supuesto son opcionales.<br />
=== Alineación ===
Desafortunadamente los elementos de alineación no son aplicables a las galerías y siempre se alinean a la izquierda, excepto en los modos '''packed''', '''packed-overlay''' y '''packed-hover''' que vermos más adelante en la sección [[Ayuda:Galería_de_fotos#Modos|Modos]] y que en este caso se alinearán al centro, pero puedes usar estilos de alineación de texto CSS para salvar este inconveniente. Así por ejemplo si quisieras alinear la galería al centro, podrías usar un código similar al siguiente:
<code>
<div style="text-align:center;"><gallery>
<gallery>
Ejemplo.jpg|Descripción1
Ejemplo.jpg|Descripción2
</gallery>
</div>
</code>
y obtendrías este resultado:
<div style="text-align:center;"><gallery>
Ejemplo.jpg|Descripción1
Ejemplo.jpg|Descripción2
</gallery>
</div>
Para centrar a la derecha debes usar '''left''' y '''right''' para centrar a la izquierda.

=== Tamaño de las imágenes ===
En principio y sin usar código css auxiliar con etiquetas '''ul''' y '''li''', El tamaño se aplicará de forma general a todas las miniaturas y deberá incluirse en la propia etiqueta '''<gallery>''' y no sobre cada foto. El tamaño por defecto es de 160px, pero nosotros podemos cambiarlo a nuestro gusto, tanto el ancho como el alto. En el siguiente ejemplo le daremos un ancho a la galería de 100px y un alto de 50px:
<code>
<gallery widths=100px heights=50px>
Ejemplo.jpg|Descripción1
Ejemplo.jpg|Descripción2
</gallery>
</code>
'''Nota:''' Nótese el plural en los atributos widths y heights y que estos se aplican a las imágenes y no al total que ocupan con el marco de la galería, éste siempre será proporcionalmente mayor al tamaño de las imágenes.<br />
El resultado obtenido será el siguiente:
<gallery widths=100px heights=50px">
Ejemplo.jpg|Descripción1
Ejemplo.jpg|Descripción2
</gallery>

=== Atributos avanzados ===
* '''perrow''' Establece el número de imágenes por fila.
* '''caption''' Agrega un título a la galería.
* '''mode''' Ver la siguiente sección.
=== Modos ===
Te permite generar ditintos estilos de galería, a continuación describimos los más relevante:
* '''traditional''' Es el modo por defecto, por tanto generalmente no es necesario su uso.
* '''nolines''' Elimina el marco de las imágenes.
* '''packed''' Obliga a las imágenes a tener la misma altura pero distintas anchuras, con poco espacio entre ellas. Las filas en este modo de respuesta se organizan de acuerdo a la anchura de la pantalla.
* '''packed-overlay''' Muestra el título superpuesto en la imagen, en una caja blanca semitransparente
* '''packed-hover''' Exactamente igual que el anterior, pero ólo se mostrará la poner el ratón encima de la imagen (efecto hover).<br />
A continuación te mostraremos el código de un ejemplo en el que usaremos uno de los modos descritos con alfunas variantes:

<code><gallery mode="packed-hover">
Image:Astronotus_ocellatus.jpg|''Pececillo''
Image:Salmonlarvakils.jpg|''[[commons:Salmo salar|Salmo salar]]'' (ejemplo con enlace)
Image:Georgia Aquarium - Giant Grouper.jpg|Texto normal
Image:Pterois volitans Manado-e.jpg|<small>Texto reducido</small>
Image:Macropodus opercularis - front (aka).jpg|<big>Texto aumentado</big>
</gallery></code>
'''Nota:''' El uso de la etiqueta '''Image''' es opcional.<br /><br />
El resultado es éste:
<gallery mode="packed-hover">
Image:Astronotus_ocellatus.jpg|''Pececillo''
Image:Salmonlarvakils.jpg|''[[commons:Salmo salar|Salmo salar]]'' (ejemplo con enlace)
Image:Georgia Aquarium - Giant Grouper.jpg|Texto normal
Image:Pterois volitans Manado-e.jpg|<small>Texto reducido</small>
Image:Macropodus opercularis - front (aka).jpg|<big>Texto aumentado</big>
</gallery>

== Notas finales ==
Parte de este artículo de ayuda ha sido basado en información extraido de la propia web de los creadores de este CMS [https://www.mediawiki.org MediaWiki]. Puedes obtener más información sobre las galerías consultando el artículo original, clicando en el siguiente enlace: [https://www.mediawiki.org/wiki/Help:Images/es#Rendering_a_gallery_of_images Rendering a gallery of images]

== Ver también ==
* [[Ayuda:Publicar_fotos|Publicar fotos]]
* [[Ayuda:Foto de perfil|Foto de perfil]]
* [[Ayuda:Fotos de artículo|Fotos de artículo]]
* [[Ayuda:Subir_archivos_a_commons|Subir archivos a commons]]
[[Categoría:Ayuda]]

@@ Línea 1: / Línea 1: @@
 Una de las utilidades más simples pero a la vez interesantes del sistema [https://www.mediawiki.org MediaWiki], es la galería multimedia. Su uso es extremadamente sencillo y el objetivo es poder disponer de un grupo de fotos en miniatura o no tan miniatura, juntas. Cada imagen podrá disponer de su propio título y su correspondiente enlace para verse, no sólo a tamaño real, sino con información detallada sobre ella.<br />En realidad, cualquier imagen que utilices en tus artículos, dispondrá de ese tipo de información. tienes un ejemplo:[[:Archivo:JuanDirecto.jpg|aquí]]
 == Uso ==
-<span class="galeria">al clicar sobre este icono</span> En la zona del artículo donde esté el cursor aparecerá esto:
+<span class="galeria">al clicar sobre este icono</span> en la zona del artículo donde esté el cursor, aparecerá esto:
 <syntaxhighlight>
 <gallery>

@@ Línea 2: / Línea 2: @@
 == Uso ==
 <span class="galeria">al clicar sobre este icono</span> En la zona del artículo donde esté el cursor aparecerá esto:
-<code>
+<syntaxhighlight>
 <gallery>
 Ejemplo.jpg|Descripción1
 Ejemplo.jpg|Descripción2
 </gallery>
-</code>
+</syntaxhighlight>
 Y el resultado del ejemplo anterior sería éste:
 <gallery>

@@ Línea 16: / Línea 16: @@
 === Alineación ===
 Desafortunadamente los elementos de alineación no son aplicables a las galerías y siempre se alinean a la izquierda, excepto en los modos '''packed''', '''packed-overlay''' y '''packed-hover''' que vermos más adelante en la sección [[Ayuda:Galería_de_fotos#Modos|Modos]] y que en este caso se alinearán al centro, pero puedes usar estilos de alineación de texto CSS para salvar este inconveniente. Así por ejemplo si quisieras alinear la galería al centro, podrías usar un código similar al siguiente:
-<code>
+<syntaxhighlight>
 <div style="text-align:center;"><gallery>
 <gallery>
@@ Línea 23: / Línea 23: @@
 </gallery>
 </div>
-</code>
+</syntaxhighlight>
 y obtendrías este resultado:
 <div style="text-align:center;"><gallery>

@@ Línea 34: / Línea 34: @@
 === Tamaño de las imágenes ===
 En principio y sin usar código css auxiliar con etiquetas '''ul''' y '''li''', El tamaño se aplicará de forma general a todas las miniaturas y deberá incluirse en la propia etiqueta '''&lt;gallery&gt;''' y no sobre cada foto. El tamaño por defecto es de 160px, pero nosotros podemos cambiarlo a nuestro gusto, tanto el ancho como el alto. En el siguiente ejemplo le daremos un ancho a la galería de 100px y un alto de 50px:
-<code>
+<syntaxhighlight>
 <gallery widths=100px heights=50px>
 Ejemplo.jpg|Descripción1
 Ejemplo.jpg|Descripción2
 </gallery>
-</code>
+</syntaxhighlight>
 '''Nota:''' Nótese el plural en los atributos widths y heights y que estos se aplican a las imágenes y no al total que ocupan con el marco de la galería, éste siempre será proporcionalmente mayor al tamaño de las imágenes.<br />
 El resultado obtenido será el siguiente:

@@ Línea 60: / Línea 60: @@
 A continuación te mostraremos el código de un ejemplo en el que usaremos uno de los modos descritos con alfunas variantes:
-<code><gallery mode="packed-hover">
+<syntaxhighlight><gallery mode="packed-hover">
 Image:Astronotus_ocellatus.jpg|''Pececillo''
 Image:Salmonlarvakils.jpg|''[[commons:Salmo salar|Salmo salar]]'' (ejemplo con enlace)
@@ Línea 66: / Línea 66: @@
 Image:Pterois volitans Manado-e.jpg|<small>Texto reducido</small>
 Image:Macropodus opercularis - front (aka).jpg|<big>Texto aumentado</big>
-</gallery></code>
+</gallery></syntaxhighlight>
 '''Nota:''' El uso de la etiqueta '''Image''' es opcional.<br /><br />
 El resultado es éste: