Plantilla:Img float/doc

Uso

Crea una imagen "flotante" con su leyenda opcional

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

Parámetros

|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

Imagen a la derecha

{{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

{{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

{{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

{{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

{{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=

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

Plantilla:Imagen con texto

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ámetro		Descripción	Tipo	Estado
Archivo	`archivo` `file`	El nombre del archivo (sin el prefijo "Archivo:")	Cadena	obligatorio
Alineación	`alinear` `align`	alineación del recuadro. puede tomar los valores "left", "center", "right" (izquierda, centro y derecha) Valores sugeridos `left` `center` `right`	Cadena	sugerido
Leyenda	`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.	Desconocido	sugerido
Alineación de la leyenda	`alinearley` `capalign`	alineación del texto de la leyenda. puede tomar los valores "left", "center", "right" (izquierda, centro y derecha) Valores sugeridos `left` `center` `right`	Cadena	sugerido
Ancho	`ancho` `width`	ancho del recuadro, con unidades Ejemplo 15em	Cadena	opcional
Texto superior	`arriba` `above`	agrega texto arriba de la imagen	Cadena	opcional
Texto alternativo	`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)	Cadena	sugerido
Estilo	`estilo` `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%;	Cadena	opcional
Polígono	`polí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)	Cadena	opcional