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...
| Opmaakcode | Betekenis | Illustratie | Portfolio |
|---|---|---|---|
<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
article 5631
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>
code <doc94>
code <emb94>
2: Portfolio
De opmaakcodes <img>, <emb> en <doc> «halen» een afbeelding uit de portfolio om deze vervolgens in de tekst op te nemen.
| Opmaakcode | Opmerking |
|---|---|
<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>
code <doc95>
code <emb95>
De alineëring begrijpen: left, right, center
Afbeelding worden in de tekst opgenomen volgens de logica van HTML
| Positionering | Grafisch resultaat | code | Resultaat |
|---|---|---|---|
| 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
<imgXX|right>Lorem ipsum dolor sit amet consectetuer consequat et Donec lacinia id. Lorem pretium Curabitur lacus Pellentesque leo id volutpat Donec ....
en niet
Lorem ipsum dolor sit amet consectetuer consequat et Donec lacinia id. Lorem pretium Curabitur lacus Pellentesque leo id volutpat Donec ....
<imgXX|right>
Om afbeeldingen naast elkaar op te nemen:
<img50|left><img57|left><img58|left> ...
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>
