Opmaakcodes voor afbeeldingen in SPIP

SPIP bevat een uitgebreide syntax om afbeeldingen in artikelen op te nemen.
  • Apparu en : SPIP 3.0

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

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>

Des chaussures bleues

code <doc94>

Des chaussures bleues

code <emb94>

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

code <doc95>

Des méduses qui flottent ....

code <emb95>

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

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

Portfolio

Auteur Hanjo Gepubliceerd op: Aangepast: 21/03/23

Vertalingen: عربي, English, français, Nederlands