Afbeeldingen automatisch vergroten/verkleinen

Afbeeldingen vergroten/verkleinen bij uploaden (statisch)

Het cms biedt de mogelijkheid om de afbeeldingen die door een redacteur worden geupload automatisch te vergroten en/of te verkleinen. De gewenste formaten kunnen worden opgegeven bij een website bij Afbeeldingen > Instellingen, zie http://www.site-supply.nl/help/p000505/afbeeldingen/instellingen

Het cms zal vervolgens van elke afbeelding die een redacteur upload het origineel bewaren en een kopie maken voor elk opgegeven formaat. De verschillende afbeeldingen kunnen door de redacteur zelf worden ingevoegd waar nodig of kunnen automatisch worden gebruikt in de template(s) van de vormgeving (zie de imginfo stijl-variabele).

Zoals gezegd: het cms vergroot/verkleind de afbeeldingen bij het uploaden. De afbeeldingen staan dus (statisch) opgeslagen op de hardeschijf van de webserver en zijn direct klaar voor gebruik.

Het nadeel is dat het cms alle afbeeldingen opgeslagen bij de website vergroot/verkleind... ook afbeeldingen waar dat eventueel niet voor nodig is. En als een extra formaat nodig is, dan moet dat eerst ingesteld worden voor het beschikbaar is en zal het cms alsnog alle bestaande afbeeldingen ook in dat formaat klaarzetten (en bij een website met vele afbeeldingen kan dat soms een uur of meer in beslag nemen).

Afbeeldingen dynamisch vergroten/verkleinen

Het cms biedt ook de mogelijkheid om afbeeldingen dynamisch te vergroten of te verkleinen. Het voordeel van deze aanpak is dat elk gewenst formaat direct beschikbaar is en alleen van toepassing is op daadwerkelijk gebruikte afbeeldingen. Het downloaden van een dynamisch vergrote/verkleinde afbeelding kost slechts enkele milliseconden meer ten opzichte van een statische afbeelding. (En eenmaal in de cache van de webserver of browser is er helemaal geen verschil meer in downloadsnelheid.)

Om een afbeelding dynamisch te vergroten/verkleinen kan eenvoudig het gewenste formaat vóór de url naar de afbeelding worden opgenomen. Voorbeeld:

Om de afbeelding

/vormgeving/images/voorbeelden/blauwe-heuvels.jpg
(origineel 800x600, klik op hyperlink voor voorbeeld)

in het formaat 200x150 weer te geven gebruiken we de url

/200x150/vormgeving/images/voorbeelden/blauwe-heuvels.jpg
(klik voor voorbeeld)

Deze aanpak kan gebruikt worden voor alle mogelijke afbeeldingen, bijvoorbeeld in een template voor een afbeelding ingesteld door de redacteur

...
<img src="/120x75/<!-- TMPL_VAR NAME="xcms_url" -->" alt="" />
...

of in een CSS-bestand voor een afbeelding die onderdeel is van de vormgeving:

h1 {
  ...
  background: url(/100x100/css/mijn-vormgeving/gfx/plaatje.gif) 0 0 no-repeat;
  ...
}

NB: merk op dat in een css-bestand het pad nu absoluut moet worden opgegeven ten opzichte van het gebruikelijke relatieve pad: url(/gfx/plaatje.gif).

Voor het formaat van de afbeeldingen gelden dezelfde mogelijkheden als bij de instellingen met één uitzondering: het >-teken kan niet (direct) in urls worden gebruikt. Gebruik in dat geval het !-teken, bijvoorbeeld:

...
<img src="/250x125!/<!-- TMPL_VAR NAME="tmplMijnAfbeelding" -->" alt="" />
...

Tip: voor net dat beetje extra snelheid: door /cache/ voor het formaat te zetten (bijv. <img src="/cache/100x100/...) weet de web server dat de afbeelding gecached kan worden.