Plantilla:Img float
Documentación de la plantilla
Uso
Crea una imagen "flotante" con su leyenda opcional
{{Img float
| archivo =
| ancho =
| alinear =
| arriba =
| leyenda =
| alinearley =
| alt =
| polígono =
| estilo =
| anclaje =
}}
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%;
|anclaje=id: agrega una ID para referencia
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}}
.jpg)
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
permite generar recuadros con imágenes y sus leyendas
| 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)
| 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)
| Cadena | sugerido |
| Ancho | ancho width | ancho del recuadro, con unidades
| 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.
| 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 |
Los editores pueden experimentar en la zona de pruebas
Por favor, añade las categorías a la subpágina de documentación.
(subpáginas - enlaces)