Imatges

< Enllaços | Índex de la documentació | Regles de formatatge de text >

Per a col·locar una imatge a una pàgina, introduïu l'adreça (URL) de la imatge al text de la pàgina. El text alternatiu (usat per a les etiquetes emergents i pels navegadors de text) es fica entre cometes dobles immediatament deprès de l'URL de la imatge. Tot seguit pot anar un text per al peu de la imatge separant-lo amb una barra vertical (|), aquest text pot incloure etiquetes de format simples.

http://pmichaud.com/img/misc/pc.jpg"Paper clips" | [- %newwin% És ''divertit'' treballar amb [[ Wikipedia:Paper_clips | clips ]]. -]

És divertit treballar amb clips.

També podeu usar fitxers adjunts per a definir imatges (i.e., Attach:imatge.jpeg) i usar enllaços InterMapes. PmWiki suporta per defecte els següents tipus d'imatges:

  gif jpg jpeg png

(Vegeu també Adjunts i les Notes a baix per a imatges que no tenen extensió.)

Per a crear un enllaç sobre una imatge (com http://pmichaud.com/img/misc/pc.jpg i no pas mostrar la imatge en sí), feu servir els claudàtors dobles per a marcar l'enllaç, com a [[http://pmichaud.com/img/misc/pc.jpg]] o [[Attach:image.jpeg]].

Per a que una imatge enllaci a un altre lloc, useu la imatge com a text de l'enllaç:

[[http://pmwiki.org/ | http://pmichaud.com/img/misc/pc.jpg"PmWiki"]]

o [[http://example.com|Attach:Groupname./image.jpeg]].

Peus d'imatge

Es pot afegir un peu d'imatge usant una barra vertical seguit del text del peu.

http://pmichaud.com/img/misc/pc.jpg"Paper clips" | '''Figura 1'''

Figura 1

Habitualment, les imatges es mostren "en línia" amb el text que l'envolta. Feu servir %center% per a centrar una imatge. Useu %right% per a alinear una imatge a la dreta.

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. %center%http://pmichaud.com/img/misc/pc.jpg"Paper clips"%%

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. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. %right% http://pmichaud.com/img/misc/gem.jpg%%

Imatges flotants

Per a alinear una imatge a dreta o esquerra amb el text envoltant-la, useu els estils %lfloat% o %rfloat%.

%lfloat text-align=center margin-top=5px margin-right=25px margin-bottom=5px margin-left=25px% http://pmichaud.com/img/misc/gem.jpg | '''Endavant!'''
'''La imatge està alineada a la esquerra, amb els marges definits; el peu està centrat; el text es talla al voltant del costat dret de la imatge.'''

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

Endavant!

La imatge està alineada a la esquerra, amb els marges definits; el peu està centrat; el text es talla al voltant del costat dret de la imatge.

La marca [[<<]] trenca el text flotant, i el text continua a baix de la imatge.

%lfloat% http://pmichaud.com/img/misc/gem.jpg
'''La imatge està alineada a l'esquerra, i el text es talla al voltant del costat dret de la imatge. El text que hi ha darrere de la marca ''[@[[<<]]@]'' continua baix de la imatge.'''
[[<<]]
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.

La imatge està alineada a l'esquerra, i el text es talla al voltant del costat dret de la imatge. El text que hi ha darrere de la marca [[<<]] continua baix de la imatge.
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.

Useu els estils %lframe% o %rframe% per a col·locar un marc al voltant de la imatge flotant i el peu de la imatge. Es pot donar format al marc mitjançant els estils wiki:

%rframe% http://pmichaud.com/img/misc/gem.jpg | '''Rock on!'''
'''La imatge està alineada a la dreta, i el text es talla al voltant del costat esquerre de la imatge.'''

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. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 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. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

%cframe width=100px bgcolor=lightblue border='3px solid red' padding=20px% http://pmichaud.com/img/misc/gem.jpg

Un exemple per a mostrar un intent infructuós d'establir el paràmetre ''width'' (amplada):-
%cframe width=50px bgcolor=lightblue border='3px solid red' padding=20px% http://pmichaud.com/img/misc/gem.jpg

Rock on!

La imatge està alineada a la dreta, i el text es talla al voltant del costat esquerre de la imatge.

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. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 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. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Un exemple per a mostrar un intent infructuós d'establir el paràmetre width (amplada):-

Useu %block rframe% per ficar múltiples imatges i el peu, apilades verticalment a un marc flotant a la dreta.

%block rframe width=300px%http://pmichaud.com/img/misc/gem.jpg\\
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\\\
http://pmichaud.com/img/misc/bubble.jpg\\
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.%%

El subsegüent text al bloc es talla al voltant del costat esquerre del marc. 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. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

El subsegüent text al bloc es talla al voltant del costat esquerre del marc. 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. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Canvi de la mida de les imatges

Per a canviar la mida d'una imatge mitjançant estils wiki, useu %width=50px% o %height=50px% al davant d'una imatge. L'estil %thumb% és una drecera fàcil per a %width=100px%.

%width=50px% http://pmichaud.com/img/misc/bubble.jpg \
%height=50px% http://pmichaud.com/img/misc/bubble.jpg \
%thumb% http://pmichaud.com/img/misc/bubble.jpg

Nota: El canvi de mida de les imatges mitjançant els estils només afecta a com es mostra al navegador; no redueix el pes de la imatge en si - per tant, canviar la mida de les imatges amb aquest mètode no és acceptable per a una pàgina plena d'imatges, o 'galeria'.

Si voleu canviar la mida d'una imatge dintre d'un enllaç, heu d'especificar la mida abans de l'enllaç a més a més de finalitzar-la amb %%.

%width=60%[[http://pmwiki.org/ | http://pmichaud.com/img/misc/pc.jpg"PmWiki"]]%% \
%height=60%[[http://pmwiki.org/ | http://pmichaud.com/img/misc/pc.jpg"PmWiki"]]%% \

Per a que l'enllaç s'obri a una finestra nova, heu de ficar %newwin% abans d'especificar la mida.

%newwin%[[http://pmwiki.org/ | http://pmichaud.com/img/misc/pc.jpg"PmWiki"]]%%

Les imatges a les que es canvia la mida amb %thumb% també es poden ficar a un marc flotant, així com ficar-les en enllaços.

%lframe thumb% [[http://pmichaud.com/img/misc/bubble.jpg | http://pmichaud.com/img/misc/bubble.jpg"Rebenta la bombolla"]] | [-Bombolla-]
%lframe thumb% http://pmichaud.com/img/misc/pc.jpg"Enganxa el clip" | [-Clips de paper-]
%lframe thumb% [[DocumentationIndex | http://pmichaud.com/img/misc/gem.jpg"Visiteu l'index de la documentació"]] | [[DocumentationIndex | [-Endavant!-]]]

Bombolla

Clips de paper

Endavant!

Imatges com a enllaços

Per a usar una imatge com un enllaç heu d'especificar una imatge en lloc del text a la marca de l' enllaç.

[[PmWikiCa/Links | http://pmichaud.com/img/2003/atc-1.gif"Informació sobre els enllaços wiki"]]

Notes

Les imatges que no tenen una extensió correcta es poden mostrar afegint una extensió "falsa" al URL. Per exemple, si l'URL és http://example.com/script/tux, afegiu al final una cadena de consulta falsa amb l'extensió que vulgueu (p.ex., http://example.com/script/tux?format=.png). Si no es poden usar cadenes de consulta, amb un fragment identificador hi hauria d'haver suficient, p.ex. http://example.com/script/tux#file.png.
Es poden usar amplades relatives usant percentatges.

%width=10pct% http://pmichaud.com/img/misc/bubble.jpg \
%height=30pct% http://pmichaud.com/img/misc/bubble.jpg

És possible que el text flueixi a dintre dels marcs del mateix mode que ho fa al peu de les imatges

>>lframe width=130px<<
%thumb width=130% [[http://pmichaud.com/img/misc/bubble.jpg | http://pmichaud.com/img/misc/bubble.jpg"Rebenta la bombolla"]] | [--Un peu llarg per a una imatge com la de [[http://pmichaud.com/img/misc/bubble.jpg | la bombolla]]. Aquest text només és per a mostrar com el text flueix dintre del marc.--]
>><<

Un peu llarg per a una imatge com la de la bombolla. Aquest text només és per a mostrar com el text flueix dintre del marc.

Vegeu també

Cookbook:Images - per afegir galeries d'imatges, generació de miniatures automàtica, imatges de fons, i més.

Crèdits

Les imatges d'aquesta pàgina s'ha obtés de http://flickr.com i es distribueixen sota una llicència Creative Commons.

És possible enllaçar una imatge des de PmWiki sense haver d'especificar un URL complet?

Sí. Per a aquelles imatges adjuntes, el format habitual és Attach:NomGrup./imatge.gif. Per a enllaçar una imatge que està al mateix servidor, useu Path:/cami/a/la/imatge.gif.

Puc adjuntar un fitxer d'imatge d'un client amb PmWiki?

Sí, vegeu Uploads .

Com puc incloure una pàgina d'un altre grup que conté una imatge adjunta?

Incloeu la pàgina com es fa habitualment, i.e. (:include NomGrup.NomPagina:). A la pàgina que s'ha d'incloure (la que conté la imatge) cal que canvieu les formes Attach:nomdelfitxer.ext per Attach:{$Group}./nomdelfitxer.ext.

Perquè, si col·loque una imatge amb un rframe o un rfloat i immediatament després obri una nova secció amb la marca !, el títol de la secció se'n va abaix de la imatge en lloc d'estar a un dels costats?

Perquè el CSS per als titulars com ara ! conté un element clear:both que força aquest comportament. Si voleu que no es comporte així, definiu localment l'estil CSS, però crec que la vora inferior (que subratlla el títol) necessitaria definir-se més concretament. En el meu cas , per a separar una nova secció use la negreta per al títol, amb 4 guions a sota ----, i això m'estalvia haver de canviar aquestes definicions tan bàsiques.

A diferència dels estils lframe i rframe, l'estil cframe no es comporta tant bé amb el paràmetre width (amplada). Tot i que el marc en si canvia de mida, la imatge no ho fa, i manté la mida original. L'efecte és el mateix amb IE i Firefox. A més a més de l'exemple estàndard de dalt, he afegit un altre exemple que ho il·lustra.

És possible deshabilitar totes les imatges? Ja he deshabilitat la capacitat d'ajuntar fitxers però també vull deshabilitar la capacitat de mostrar imatges externes a les pàgines del meu wiki.

Sí, afegiu al fitxer config.php:

DisableMarkup('img');
$ImgExtPattern = "$^";

Com puc fer-ho per a que quan col·loque una imatge a una pàgina, el bloc de text a dintre del qual hi és sigui un paràgraf (<p>) i no pas una divisió (<div>)?

Si només voleu reproduir aquest comportament per a una imatge (no per a totes), aleshores proveu de ficar la marca [==] al principi de la línia, per exemple:

[==] http://www.pmwiki.org/pub/pmwiki/pmwiki-32.gif

Tenir [==] al principi de la línia obliga a que qualsevol cosa que vagi darrere sigui part d'un paràgraf.

Hi ha algun mode d'usar camins relatius per a les imatges?

Vegeu Cookbook:RelativeLinks i $EnableLinkPageRelative.

Hi ha alguna manera d'adjuntar una imatge BMP i fer que es mostri en lloc d'enllaçar-la?

Afegiu la següent línia al fitxer config.php:
$ImgExtPattern = "\\.(?:gif|jpg|jpeg|png|bmp|GIF|JPG|JPEG|PNG|BMP)";
Noteu que les imatges BMP no tenen compressió i són prou pesades. Tal volta preferiu convertir-la als formats PNG (sense pèrdua) o JPG (amb pèrdua), i així reduir de 5 a 20 vegades la seua mida.

Hi ha algun mode de tenir una taula a l'esquerra o dreta d'una imatge?

Sí, vegeu TableAndImage.