CentraleSupélecDépartement informatique
Plateau de Moulon
3 rue Joliot-Curie
F-91192 Gif-sur-Yvette cedex
Billeder

For at placere et billede i en side, indtast billedets adresse (URL) i opmærkningsteksten. En alternativ tekst (brugt til værktøjstip og til browsere der ikke viser billeder), placeres i dobbelte anførselstegn umiddelbart efter billedURLen. En billedtekst kan følge efter, adskilt af en lodret streg (|), og kan indeholde enkel formatering

http://pmichaud.com/img/misc/pc.jpg"Paper clips" | [- %newwin% [[ Wikipedia:Paper_clips | Papirklips ]] er ''sjove'' at arbejde med. -]
Paper clips
Papirklips er sjove at arbejde med.

Billeder kan også angives som uploadede filer (dvs. Attach:billede.jpeg og ved at bruge InterMap-links. Som standard understøtter PmWiki følgende billedtyper:

gif jpg jpeg png

(Se også Uploads og Bemærkninger herunder, for billedfiler der mangler endelser.)

For at oprette et link til et billede (som http://pmichaud.com/img/misc/pc.jpg, i modsætning til at vise selve billedet), brug dobbelte firkantede paranteser til at opmærke linket, som i [[http://pmichaud.com/img/misc/pc.jpg]] eller [[Attach:billede.jpeg]].

For at få et billede til at linke til et andet sted, brug billedet som linktekst, som i

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

eller [[http://example.com|Attach:Gruppenavn./billede.jpeg]].

Værktøjstips eller altenativ tekst

Et værktøjstip, eller en alternativ tekst, kan blive vist når musemarkøren hænger over billedet, ved at placere beskrivelsen i dobbelte anførselstegn umiddelbart efter billedets URL. Beskrivelsen kan ikke indeholde nogen formatering.

http://pmichaud.com/img/misc/pc.jpg"Farvede papirklips"
Farvede papirklips

Billedtekster

En billedtekst kan tilføjes til et billede ved at bruge en lodret streg og billedteksten.

http://pmichaud.com/img/misc/pc.jpg | '''Figur 1'''

Figur 1

Billedjustering

Normalt vises billeder "på linjen" med den omgivende tekst.

Brug %center% for at centrere et billede.

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"Papirklips"%%

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

Brug %right% til at højrejustere et billede.

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

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.

Flydende billeder

For at venstre- eller højrejustere et billede med tekst flydende omkring det, brug wikitypografierne %lfloat% eller %rfloat%.

%lfloat text-align=center margin-top=5px margin-right=25px margin-bottom=5px margin-left=25px% http://pmichaud.com/img/misc/gem.jpg | '''Rock on!'''
'''Billedet er venstrejusteret, med marginer indstillet; billedteksten er centreret; teksten flyder omkring billedet på højre side'''

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. 

Rock on!

Billedet er venstrejusteret, med marginer indstillet; billedteksten er centreret; teksten flyder omkring billedet på højre side

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.

Opmærkningen [[<<]] bryder flydende tekst, og teksten fortsætter ved bunden af billedet.

%lfloat% http://pmichaud.com/img/misc/gem.jpg
'''Billedet er ventrejusteret, og teksten flyder omkring højre side af billedet. Teksten efter opmærkningen ''[@[[<<]]@]'' fortsætter under billedet.'''
[[<<]]
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. 

Billedet er ventrejusteret, og teksten flyder omkring højre side af billedet. Teksten efter opmærkningen [[<<]] fortsætter under billedet.
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.

Brug typografierne %lframe% eller %rframe% til at få et bilede til at flyde og placere en ramme omkring billedet og dets billedtekst. Rammen kan formateres med wikitypografier.

%rframe% http://pmichaud.com/img/misc/gem.jpg | '''Rock on!'''
'''Billedet er højrejusteret, og teksten flyder omkring billedets venstre side.'''

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.

Rock on!

Billedet er højrejusteret, og teksten flyder omkring billedets venstre side.

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.

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

Eksempel der viser mangel på fuld breddeindstilling:-

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

Brug %block rframe% til at sætte flere billeder og billedtekster til at blive stablet lodret i en højreflydende ramme.

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

Tekst der følger efter den definerede blok flyder omkring rammens venstre side. 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.


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

Tekst der følger efter den definerede blok flyder omkring rammens venstre side. 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.

Ændring af billeders størrelse

For at ændre et billedes størrelse via wikitypografier, brug %width=50px% eller %height=50px% foran billedet. wikitypografien %thumb% er en anvendelig genvej til %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

Bemærk: At ændre størrelsen på et billede via wikitypografier ændrer kun hvordan billedet vises i en browser; det reducerer ikke overførelsesstørrelsen af selve billedet - så at ændre størrelsen via wikitypografier er ikke en acceptabel måde at generere en side fuld af billeder, eller 'gallery'.

Hvis du vil have et billede med ændret størrelse inden i et link, er du nødt til at angive størrelsen før linket, og lukke det af med en %%.

%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"]]%% \
PmWiki PmWiki

For at åbne linket i et nyt vindue, skal du placere %newwin% før størrelsesangivelsen.

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

Billeder der har fået ændret deres størrelse ved brug af %thumb% kan også gøres flydende med rammer, og gøres til links.

%lframe thumb% [[http://pmichaud.com/img/misc/bubble.jpg | http://pmichaud.com/img/misc/bubble.jpg"Spræng boblen"]] | [-Boble-]
%lframe thumb% http://pmichaud.com/img/misc/pc.jpg"Klips billetten" | [-Papirklips-]
%lframe thumb% [[DocumentationIndex | http://pmichaud.com/img/misc/gem.jpg"Besøg dokumentationsindekset"]] | [[DocumentationIndex | [-Rock On-]]]
Spræng boblen
Boble
Klips billetten
Papirklips

Billeder som links

For at bruge et billede som link, angiv et billede i stedet for tekst i links-opmærkningen.

[[Links | http://pmichaud.com/img/2003/atc-1.gif"Information om wikilinks"]]
Information om wikilinks

Bemærkninger

  • En billedfil der mangler en korrekt endelse kan vises ved at tilføje en "falsk" endelse til URLen. For eksempel, hvis URLen er http://example.com/script/tux, tilføj en falsk forespørgselsstreng i enden med den ønskede endelse (fx http://example.com/script/tux?format=.png). Hvis forespørgselsstrenge er upassende, bør en fragmentidentifikator virke, fx http://example.com/script/tux#file.png.
  • Relativ bredde er mulig ved at bruge procenter.
%width=10pct% http://pmichaud.com/img/misc/bubble.jpg \
%height=30pct% http://pmichaud.com/img/misc/bubble.jpg 
  • Flydende tekst er mulig, ligesom billedtekster, inden for en ramme
>>lframe width=130px<<
%thumb width=130% [[http://pmichaud.com/img/misc/bubble.jpg | http://pmichaud.com/img/misc/bubble.jpg"Spræng boblen"]] | [--Lang billedtekst til et billede som [[http://pmichaud.com/img/misc/bubble.jpg | boblen]]. Dette er bot for at vise noget tekst som flyder inden for rammen--]
>><<
Spræng boblen
Lang billedtekst til et billede som boblen. Dette er bot for at vise noget tekst som flyder inden for rammen

Se også

  • Cookbook:Images - tilføjelse af billedgallerier, automatiske miniturebilleder, baggrundsbilleder, og mere.

Anerkendelse

Billederne på denne side blev fundet på http://flickr.com og er videregivet under en licens i licensfamilien Creative Commons License.

Er det muligt at linke et billede på PmWiki uden at bruge en fuldt kvalificeret URL?

Ja. For billeder som er vedhæftninger, er det generelle format Attach:Gruppenavn./billede.gif. For at linke til et billede på samme server, brug Path:/sti/til/billede.gif.

Kan jeg vedhæfte en klientbilledfil på PmWiki?

Ja, se Uploads.

Hvordan kan jeg inkludere en side fra en anden gruppe som indeholder et vedhæftet billede?

Inkluder siden som normalt, dvs. (:include Gruppenavn.Sidenavn:). I siden der skal inkluderes (som indeholder billedet) udskift Attach:filnavn.end med Attach:{$Group}./filnavn.end.

Hvorfor, når jeg sætter et billede med rframe eller rfloat og umiddelbart derefter åbner en ny sidesektion med ! er sektionstitelrækken under billedet i stedet for på venstre side?

Fordi CSS for overskrifter som ! indeholder et element clear:both som fremtvinger denne opførsel. Gendefiner CSSen lokalt hvis du vil have det til at stoppe, men jeg tror at bundrammen (som løber under overskriften) har brug for yderligere gendefinition. Jeg bruger blot fed til titlen, og 4 bindestreger under ---- for at adskille en ny sektion, og det sparer mig for besværet med at rumstere med kernedefinitionerne.

I modsætning til direktiverne lframe og rframe overholder cframe ikke helt breddeindstillingen. Selvom rammen selv ændrer størrelse til at passe til forespørgslen, gør billedet ikke, og beholder sin originale størrelse. Virkningen er den samme i IE og Fx. Jeg har tilføjet et eksempel under standardeksemplet ovenover.

Er det muligt at forbyde alle billeder? Jeg har allerede deaktiveret uploads men jeg vil også forbyde visning af eksterne billeder på mine wikisider.

Ja, tilføj til config.php:

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

Hvad kan jeg gøre, så når jeg placerer et billede i en side, så kommer tekstblokken i en <p> (paragraph = afsnit), i stedet for en <div> (division)?

Hvis du blot vil have det til at ske for et enkelt billede (i stedet for alle), så prøv at sætte [==] i begyndelsen af linjen, som i:

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

[==] i begyndelsen af en linje tvinger alt der følger efter til at være en del af et afsnit.

Er der en måde at bruge relative stier til billeder?

Se Cookbook:RelativeLinks og $EnableLinkPageRelative.

Er der en måde at vedhæfte en BMP og få den vist, i stedet for at linke?

Tilføj følgende linje til config.php:
$ImgExtPattern = "\\.(?:gif|jpg|jpeg|png|bmp|GIF|JPG|JPEG|PNG|BMP)";
Bemærk at BMP-billeder er ukomprimerede og ret tunge. Det kan være at du vil konvertere dem til et af formaterne PNG (tabsfri) eller JPG (tabsgivende), og på den måde reducere deres filstørrelser 5-20 gange.

Er der en måde at få en tabel til venstre eller højre for et billede?

Ja, se TableAndImage.


Oversættelse af PmWiki.Images - Original side på PmWikiDa.Images - Référencé par
Sidste ændringer:
PmWikiDa.Images: 2015-01-20 17:30
PmWiki.Images: 2022-11-27 19:22