Diferencia entre revisiones de «Ayuda:Galería de fotos»
(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...») |
(→Uso) |
||
| (No se muestran 5 ediciones intermedias del mismo usuario) | |||
| 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í]] | 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 == | == Uso == | ||
| − | <span class="galeria">al clicar sobre este icono</span> | + | <span class="galeria">al clicar sobre este icono</span> en la zona del artículo donde esté el cursor, aparecerá esto: |
| − | < | + | <syntaxhighlight> |
<gallery> | <gallery> | ||
Ejemplo.jpg|Descripción1 | Ejemplo.jpg|Descripción1 | ||
Ejemplo.jpg|Descripción2 | Ejemplo.jpg|Descripción2 | ||
</gallery> | </gallery> | ||
| − | </ | + | </syntaxhighlight> |
Y el resultado del ejemplo anterior sería éste: | Y el resultado del ejemplo anterior sería éste: | ||
<gallery> | <gallery> | ||
| Línea 16: | Línea 16: | ||
=== Alineación === | === 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: | 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: | ||
| − | < | + | <syntaxhighlight> |
<div style="text-align:center;"><gallery> | <div style="text-align:center;"><gallery> | ||
<gallery> | <gallery> | ||
| Línea 23: | Línea 23: | ||
</gallery> | </gallery> | ||
</div> | </div> | ||
| − | </ | + | </syntaxhighlight> |
y obtendrías este resultado: | y obtendrías este resultado: | ||
<div style="text-align:center;"><gallery> | <div style="text-align:center;"><gallery> | ||
| Línea 34: | Línea 34: | ||
=== Tamaño de las imágenes === | === 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: | 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: | ||
| − | < | + | <syntaxhighlight> |
<gallery widths=100px heights=50px> | <gallery widths=100px heights=50px> | ||
Ejemplo.jpg|Descripción1 | Ejemplo.jpg|Descripción1 | ||
Ejemplo.jpg|Descripción2 | Ejemplo.jpg|Descripción2 | ||
</gallery> | </gallery> | ||
| − | </ | + | </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 /> | '''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: | 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: | A continuación te mostraremos el código de un ejemplo en el que usaremos uno de los modos descritos con alfunas variantes: | ||
| − | < | + | <syntaxhighlight><gallery mode="packed-hover"> |
Image:Astronotus_ocellatus.jpg|''Pececillo'' | Image:Astronotus_ocellatus.jpg|''Pececillo'' | ||
Image:Salmonlarvakils.jpg|''[[commons:Salmo salar|Salmo salar]]'' (ejemplo con enlace) | 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:Pterois volitans Manado-e.jpg|<small>Texto reducido</small> | ||
Image:Macropodus opercularis - front (aka).jpg|<big>Texto aumentado</big> | Image:Macropodus opercularis - front (aka).jpg|<big>Texto aumentado</big> | ||
| − | </gallery></ | + | </gallery></syntaxhighlight> |
'''Nota:''' El uso de la etiqueta '''Image''' es opcional.<br /><br /> | '''Nota:''' El uso de la etiqueta '''Image''' es opcional.<br /><br /> | ||
El resultado es éste: | El resultado es éste: | ||
Revisión actual del 02:16 10 ene 2020
Una de las utilidades más simples pero a la vez interesantes del sistema 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.
En realidad, cualquier imagen que utilices en tus artículos, dispondrá de ese tipo de información. tienes un ejemplo:aquí
Sumario
Uso
al clicar sobre este icono en la zona del artículo donde esté el cursor, aparecerá esto:
<gallery>
Ejemplo.jpg|Descripción1
Ejemplo.jpg|Descripción2
</gallery>Y el resultado del ejemplo anterior sería éste:
Descripción1
Descripción2
Puedes agregarle tantos elementos como quieras con sus correspondientes decripciones que por supuesto son opcionales.
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 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:
<div style="text-align:center;"><gallery>
<gallery>
Ejemplo.jpg|Descripción1
Ejemplo.jpg|Descripción2
</gallery>
</div>y obtendrías este resultado:
Descripción1
Descripción2
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:
<gallery widths=100px heights=50px>
Ejemplo.jpg|Descripción1
Ejemplo.jpg|Descripción2
</gallery>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.
El resultado obtenido será el siguiente:
Descripción1
Descripción2
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).
A continuación te mostraremos el código de un ejemplo en el que usaremos uno de los modos descritos con alfunas variantes:
<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>Nota: El uso de la etiqueta Image es opcional.
El resultado es éste:
Pececillo
Salmo salar (ejemplo con enlace)
Texto normal
Texto reducido
Texto aumentado
.jpg)
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 MediaWiki. Puedes obtener más información sobre las galerías consultando el artículo original, clicando en el siguiente enlace: Rendering a gallery of images
