Plantilla:Img float/ús
Aquesta plantilla utilitza un o més estils de TemplateStyles. styles.css |
Descripció
[modifica]Crea 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
[modifica]Imatge 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=
[modifica]Si 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.