SPIP

[ar] [ast] [bg] [br] [ca] [co] [cpf] [cs] [da] [de] [en] [eo] [es] [eu] [fa] [fon] [fr] [gl] [id] [it] [ja] [lb] [nl] [oc] [pl] [pt] [ro] [ru] [sk] [sv] [tr] [uk] [vi] [zh] Espace de traduction

Download

Opmaakcodes voor afbeeldingen in SPIP

19 januari — aangepast op : 4 april

Alle versies van dit artikel:


Dit artikel beschrijft de opmaakcodes voor afbeeldingen die standaard zijn opgenomen in SPIP 3.

Algemeen principe

Met behulp van deze opmaakcodes kunnen afbeeldingen worden weergegeven in een SPIP-site. De opmaakcodes worden door SPIP omgezet in een specifieke HTML-code (die mede wordt bepaald door modellen die zijn opgeslagen in de map plugins-dist/medias/modeles/ ). Deze HTML-code wordt vervolgens «aangekleed» door de stylesheets (CSS) om de definitieve presentatie te verkrijgen.

Waarschuwing: Deze weergave kan dus van site tot site verschillen, afhankelijk van de gebruikte stylesheets en/of van door de webmaster aangepaste modellen.
Verkrijg je niet het gewenste resultaat, controleer dan dus de aangemaakte HTML-code en de stylesheets.

Samengevat

Een snel overzicht...

OpmaakcodeBetekenisIllustratiePortfolio
<img> image Afbeelding Ikoon + Link
<doc> document Afbeelding + Titel Ikoon + Titel + Link
<emb> embed Afbeelding + Titel Afbeelding + Titel

De uitleg in meer detail ....

Afbeeldingen toevoegen

Een afbeelding aan een artikel toevoegen in SPIP 2
Een afbeelding aan een artikel toevoegen in SPIP 3

Illustratie of portfolio?

In SPIP kunnen afbeeldingen op twee manieren worden opgenomen:

  • Artikelweergave: bedoeld om de tekst van een artikel te illustreren
  • Portfolio creëert een diaporama, ....

Een afbeelding kan eenvoudig van type weergave worden veranderd

1: Artikelweergave

de opmaakcodes <img>, <emb>, <doc> zijn aan elkaar gelijk.
Ze geven de afbeelding in volledige grootte weer. Daarbij geven de opmaakcodes <emb> en <doc> ook de titel van de afbeelding weer (indien die werd toegewezen).

code <img94>

Des chaussures bleues

code <doc94>

JPEG - 83.5 kB
Des chaussures bleues

code <emb94>

JPEG - 83.5 kB
Des chaussures bleues

2: Portfolio

De opmaakcodes <img>, <emb> en <doc> «halen» een afbeelding uit de portfolio om deze vervolgens in de tekst op te nemen.

OpmaakcodeOpmerking
<img> Geeft een ikoon weer met een hyperlink naar de afbeelding in ware grootte
<doc> Geeft een ikoon met titel en een hyperlink naar de afbeelding in ware grootte
<emb> Geeft de afbeelding in ware grootte weer met een titel, maar zonder hyperlink (embed)

code <img95>

Des méduses qui flottent .... {JPEG}

code <doc95>

JPEG - 70.4 kB
Des méduses qui flottent ....

code <emb95>

JPEG - 70.4 kB
Des méduses qui flottent ....

De alineëring begrijpen: left, right, center

Afbeelding worden in de tekst opgenomen volgens de logica van HTML

PositioneringGrafisch resultaatcodeResultaat
Standaard De afbeelding wordt op de tekstpositie weergegeven <imgXX>
Links De afbeelding wordt vanaf de positie in de tekst links weergegeven en de tekst loopt er rechts van door tot de afbeelding in hoogte is gepasseerd <imgXX|left>
Gecentreeerd De afbeelding wordt in het middel geplaatst en de tekst gaat op de volgende regel verder <imgXX|center>
Rechts De afbeelding wordt op de tekstpositie rechts afgebeeld en de tekst loopt er links van door tot de afbeelding in hoogte is gepasseerd <imgXX|right>

Om bijvoorbeeld een afbeelding rechts van een paragraaf op te nemen, wordt de syntax dus

en niet

Om afbeeldingen naast elkaar op te nemen:

Tip: Op bepaalde sites kan je (afhankelijk van de inhoud van de stylesheet van het skelet) de alineëring van zwevende elementen als <docXX|left>, <imgWW|right> ... herinitialiseren door een horizontale lijn in te voegen: ----. Een andere oplossing is het invoegen van wat HTML-code: <div style="clear:both"></div>


Het skelet van deze bladzijde zien Site gebouwd met SPIP | Vertaalruimte | Privé-site