Plantilla:Img float

De Wikisource, la biblioteca libre.
Ir a la navegación Ir a la búsqueda
Template-info.svg 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      =
}}

Parámetros

  • archivo: El nombre del archivo (sin el prefijo "Archivo:") (obligatorio)
  • ancho: El ancho de la imagen (opcional, por defecto 150px)
  • alinear: La alineación de la imagen en la página, ("left", "right" o "center"; por defecto "right")
  • arriba: Agrega texto arriba de la imagen
  • leyenda: 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: 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

Esta documentación está transcluida desde Plantilla:Img float/doc.
Los editores pueden experimentar en la zona de pruebas de esta plantilla.
Por favor, añade las categorías e interwikis a la subpágina de documentación. Subpáginas de esta plantilla.