Plantilla:Img float/ús
Aquesta plantilla utilitza un o més estils de TemplateStyles. styles.css |
Descripció
modificaCrea una imatge "flotant" amb la seva llegenda opcional
{{Img float | arxiu = | ample = | align = | above = | llegenda = | alt = | polígon = | estil = }}
Sintaxi
modifica- arxiu: El nom de l'arxiu (sense el prefix "Fitxer:") (obligatori)
- ample: L'amplada de la imatge (opcional, per defecte 150px)
- align: L'estil d'aliniament de la imatge en la pàgina, ("left", "esquerra" o "e"; "right", "dreta" o "d", o "center", "centre" o "c"; per defecte "right")
- above: Agrega text sobre la imatge.
- llegenda: La llegenda de la imatge (opcional). No feu ervir cap etiqueta <div> o plantilles basades en div, com Plantilla:Ep: si la plantilla es posiciona al mig d'un paràgraf, el programari agregarà un salt de paràgraf.
- alt: Text alternatiu a la imatge que apareix al passar el cursor per sobre o un lector de pantalla per a persones amb discapacitat visual
- polígon: permet usar una forma diferent al rectangle per a que el text s'adapti a ella (opcional, es fan servir coordenades en parells separades amb una coma)
- estil: agregar estils de text addicional. Si es canvia la mida del text, també caldria canviar l'alçada de la línia (per exemple: | estil = font-size: 80%; line-height: 80%;).
Exemples
modificaImatge a la dreta
modifica{{Img float | arxiu = The Kinematics of Machinery Fig 2.jpg | ample = 250px | align = right | llegenda = Fig. 2. }}
Fig. 2.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
Imatge a l'esquerra
modifica{{Img float | arxiu = The Kinematics of Machinery Fig 2.jpg | ample = 250px | align = left | llegenda = Fig. 2. }}
Fig. 2.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
Imatge a la dreta amb text a la part superior
modifica{{Img float | estil = | above = Fig. 2 | arxiu = The Kinematics of Machinery Fig 1.png | ample = 250px | align = right | llegenda = Esta es realmente la figura 1. }}
Fig. 2
Esta es realmente la figura 1.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
Imatge al centre
modifica{{Img float | arxiu = The Kinematics of Machinery Fig 2.jpg | ample = 250px | align = center | llegenda = Fig. 2. }}
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
Fig. 2.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
Contorn diferent d'un rectangle amb |polígon=
modificaSi la imatge no és rectangula i vols fer que el text flueixi més aprop de la imatge, usa el paràmetre polígon. Aquest paràmetre usa sintaxi CSS: parells de coordenades separades per una coma, ambdues expressades com un percentatge (per exemple 20%, 50%
).
Nota: Els valors absoluts (com 10px, 25px
) poden funcionar només en algunes mides de pantalla. Millor fer servir percentatges.
{{img float |arxiu=Select Popular Tales from the German of Musaeus (drop cap, page 1).jpg |align=left |ample=300px |polígon=0 0, 100% 0, 100% 34%, 60% 34%, 60% 58%, 36% 58%, 36% 100%, 0 100% }} {{lorem ipsum}}
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.