Plantilla:Img float/doc

De Wikisource, la biblioteca libre.


Uso[editar]

Crea una imagen "flotante" con su leyenda opcional

{{Img float
 | archivo     = 
 | ancho       = 
 | alinear     = 
 | arriba      =
 | leyenda     =  
 | alinearley  =  
 | alt         =  
 | polígono    =
 | estilo      =
}}

Parámetros[editar]

  • |archivo=file: El nombre del archivo (sin el prefijo "Archivo:") (obligatorio)
  • |ancho=width: El ancho de la imagen (opcional, por defecto 150px)
  • |alinear=align: La alineación de la imagen en la página, ("left", "right" o "center"; por defecto "right")
  • |arriba=above: Agrega texto arriba de la imagen
  • |leyenda=cap: La leyenda de la imagen (opcional). No usar ninguna etiqueta <div> o alguna plantilla de bloques basada en div, como {{bloque menor}}: si la plantilla se ubica al medio de un párrafo el software agregará un salto de párrafo.
  • |alinearley=: La alineación del texto de la leyenda ("left", "right" o "center"; por defecto "center")
  • |alt=: Texto alternativo a la imagen que aparece al pasar el mouse por arriba o al usar un lector de pantalla para personas con discapacidad visual (necesario para tener una buena accesibilidad)
  • |polígono=: polígono permite usar una forma diferente al rectángulo para que el texto se adapte a ella (opcional, se usan coordenadas en pares separadas con una coma)
  • |estilo=style: agregar estilos de texto adicional. Si cambias el tamaño del texto también deberías cambiar la altura de la línea. Por ejemplo: | estilo = font-size: 80%; line-height: 80%;
 

Como esta plantilla está basada en una etiqueta <span> (lo que le permite "flotar" sin romper un párrafo), no se permite usar plantillas de bloque (como {{centrar}}, {{derecha}} o {{bloque menor}}) dentro.

Ejemplos[editar]

Imagen a la derecha[editar]

{{Img float
 | archivo     = The Kinematics of Machinery Fig 2.jpg
 | ancho    = 250px
 | alinear    = right
 | leyenda      = Fig. 2.
}}


Fig. 2.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 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.

Imagen a la izquierda[editar]

{{Img float
 | archivo     = The Kinematics of Machinery Fig 2.jpg
 | ancho    = 250px
 | alinear    = left
 | leyenda      = Fig. 2.
}}


Fig. 2.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 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.

Leyenda alineada a la izquierda[editar]

{{Img float
 | archivo     = The Kinematics of Machinery Fig 2.jpg
 | ancho    = 250px
 | alinear    = right
 | leyenda      = Fig. 2.
 | alinearley = left
}}


Fig. 2. A la izquierda.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 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.

Imagen a la derecha, con texto por arriba[editar]

{{Img float
 | estilo = 
 | arriba = Fig. 2
 | archivo     = The Kinematics of Machinery Fig 1.png
 | ancho    = 250px
 | alinear    = right
 | leyenda      = Esta es realmente la figura 1.
}}

Fig. 2

Esta es realmente la figura 1.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 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.

Imagen al centro[editar]

{{Img float
 | archivo     = The Kinematics of Machinery Fig 2.jpg
 | ancho    = 250px
 | alinear    = center
 | leyenda      = Fig. 2.
}}

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 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.
Fig. 2.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 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.

Contorno distinto de un rectángulo con |polígono=[editar]

Si la imagen no es rectangular, y quieres hacer que el texto fluya más cerca de la imagen, usa el parámetro |polígono=. Este parámetro usa sintáxis CSS: pares de coordenadas separadas por una coma, ambas expresadas como un porcentaje (e.g. 20%, 50%).

Nota: Valores absoluteos (e.g. 10px, 25px) pueden funcionar al inicio pero terminará funcionando mal en pantallas más pequeñas. Por eso es necesario usar porcentajes.

Nota: Esto usa el estilo CSS shape-outside, lo que sobreescribe cualquier margen. Esto significa que si se establecen "margin" en el parámetro |estilo=, serán ignorados si ademas se usó |polígono=.

{{img float
|archivo=Select Popular Tales from the German of Musaeus (drop leyenda, page 1).jpg
|alinear=left
|ancho=300px
|polígono=0 0, 100% 0, 100% 34%, 60% 34%, 60% 58%, 36% 58%, 36% 100%, 0 100%
}}
{{lorem ipsum}}

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 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.

Ver también[editar]

permite generar recuadros con imágenes y sus leyendas

Parámetros de la plantilla

Se prefiere introducir los parámetros de esta plantilla en el formato de bloque.

ParámetroDescripciónTipoEstado
Archivoarchivo file

El nombre del archivo (sin el prefijo "Archivo:")

Cadenaobligatorio
Alineaciónalinear align

alineación del recuadro. puede tomar los valores "left", "center", "right" (izquierda, centro y derecha)

Valores sugeridos
left center right
Cadenasugerido
Leyendaleyenda cap

La leyenda de la imagen (opcional). No usar ninguna etiqueta <div> o alguna plantilla de bloques basada en div, como {{bloque menor}}: si la plantilla se ubica al medio de un párrafo el software agregará un salto de párrafo.

Desconocidosugerido
Alineación de la leyendaalinearley capalign

alineación del texto de la leyenda. puede tomar los valores "left", "center", "right" (izquierda, centro y derecha)

Valores sugeridos
left center right
Cadenasugerido
Anchoancho width

ancho del recuadro, con unidades

Ejemplo
15em
Cadenaopcional
Texto superiorarriba above

agrega texto arriba de la imagen

Cadenaopcional
Texto alternativoalt

texto alternativo a la imagen que aparece al pasar el mouse por arriba o al usar un lector de pantalla para personas con discapacidad visual (necesario para tener una buena accesibilidad)

Cadenasugerido
Estiloestilo style

agregar estilos de texto CSS adicional. Si cambias el tamaño del texto también deberías cambiar la altura de la línea.

Ejemplo
font-size: 80%; line-height: 80%;
Cadenaopcional
Polígonopolígono polygon

permite usar una forma diferente al rectángulo para que el texto se adapte a ella (opcional, se usan coordenadas en pares separadas con una coma)

Cadenaopcional