23 september 2017
Dutch CMS
Vragen

Met Dutch CMS 2.0

Nog makkelijker een mooie website !
Gemoderniseerd template design
Achtergrondafbeeldingen invoegen
Uitgebreid Contactformulier !
En meer.....

 
 
 
 
 
Vragen Werken met afbeeldingen 9 februari 2009

Hoe voeg je een afbeeldingen in en waar moet je rekening mee houden. Je leest het hier.

Let op: Vanaf Dutch CMS 2.0 kan er gebladerd worden naar afbeeldingen en hoeft niet meer handmatig het pad naar de afbeelding op te worden gegeven. Zie het Changelog voor meer informatie.

In welke map moet ik afbeeldingen doen ?
Hoe voeg ik afbeeldingen in bij mijn tekst ?
Mijn afbeelding of foto drukt het menu naar links
Waar vind ik een goede afbeeldings editor ?
Hoe plaats ik tekst naast een afbeelding ?

Onderwerp: In welke map moet ik afbeeldingen doen ?
Antwoord

Je kunt afbeeldingen met je ftp programma uploaden naar 1 van de volgende mappen naar keuze:

templates/images/dutchcms

of als het plaatje voor een extra themasite bedoeld is:

templates/images/jeanderethemasitenaam

of

images: gewoon in de images map maar als je dat doet komen ze tussen de Dutch CMS images te staan.

Beter en makkelijker is

afbeeldingen: Nieuwe map maken en afbeeldingen noemen

Welke map je gebruikt is dus aan jezelf want het mag en kan allemaal. Als je het eerste doet moet je wel telkens nadenken van wat was het pad naar die template images mag ook al weer. Als je images of een eigen afbeeldingsmap doet is het vrij makkelijk te onthouden. Wat je dus ook kunt doen is een extra map maken tussen de andere bestaande mappen phpscripts, static, templates enz en die bijvoorbeeld mijnimages noemen of gewoon afbeeldingen. Op die manier houd je je plaatjes ook gescheiden van de dutchcms systeem plaatjes die zich al in images bevinden.

[ Terug naar boven ]
Onderwerp: Hoe voeg ik afbeeldingen in bij mijn tekst ?
Antwoord

Als je de TinyMCE editor gebruikt dan klik je op het boompje (Afbeelding invoegen/bewerken) waarna je een venster krijgt waar je het pad naar het plaatje en andere eigenschappen kan opgeven.

In onderstaande voorbeeld wil ik de nederlandse vlag invoegen nederlands.png die zich in de map images bevindt:

Belangrijk is dat je altijd het absolute pad naar het plaatje gebruikt door middel van een extra / voor de map dus stel dat je gewoon de map images gebruikt gebruik dan als pad /images/plaatje of als je bijvoorbeeld de templates map gebruikt /templates/dutchcms/images/plaatje. Op deze manier komt je niet voor verassingen te staan dat de afbeelding niet weer wordt gegeven omdat het pad naar het plaatje niet klopt want die / betekent dat het pad altijd vanaf de root dus de hoofdmap van je site moet beginnen ookal bevindt de pagina waarop het plaatje zich bevindt bijvoorbeeld in http://websitenaam.naamprovider.nl/themasitenaam/artikelnaam. Als je die / dan niet zou gebruiken en je geeft als pad images/plaatje dan gaat je browser kijken in artikelnaam/images maar die bestaat dan natuurlijk niet. Doe je met de / dan gaat hij kijken in http://websitenaam.naamprovider.nl/images/plaatje.

[ Terug naar boven ]
Onderwerp: Mijn afbeelding of foto drukt het menu naar links

Help, ik heb een foto ingevoegd en die drukt mijn menu naar links. Wat moet ik doen ?

Antwoord

Dit is niet zozeer een probleem van Dutch CMS maar meer een kwestie van goed webdesign. Je afbeelding is veel te groot waardoor het menu naar links wordt geduwd. Eigelijk is dit nog een nette manier van Dutch CMS om dit op te lossen. Op andere websites zou je gelijk onderaan een lelijke schuifbalk krijgen. Natuurlijk is geen van beide goed. Logischerwijs moet je de afbeelding kleinere afmetingen geven tijdens het invoegen of de afbeeldingen of foto van tevoren al verkleinen met een afbeeldingseditor. Wil je de afbeelding of foto toch ook op ware grootte aan je bezoekers laten zien maak dan eerst een thumbnail dus een kleinere versie van de afbeelding of foto waarop ze kunnen klikken waarna ze de afbeelding of foto op ware grootte kunnen bekijken.

[ Terug naar boven ]
Onderwerp: Waar vind ik een goede afbeeldings editor ?

Je had het over het resizen (kleiner maken) van afbeeldingen en foto's. Met welk programma kan ik dat doen. Liefst een gratis programma als het kan.

Antwoord

Tegenwoordig met de moderne digitale camara's worden afbeeldingen haast op poster formaat opgeslagen op je toestel en zijn vaak meerdere mb's. Logischerwijs moet je deze eerst verkleinen naar bijvoorbeeld 1024 bij 786 of nog kleiner. Goede en gratis afbeeldingseditors zijn IrfanView en PIXresizer:

IrfanView
Met IrfanView kun je afbeeldingen verkleinen maar het programma heeft nog veel meer mogelijkheden:

Website IrfanView


PIXresizer
PIXresizer is erg handig om meerdere foto's tergelijkertijd te verkleinen. Je kunt het formaat en ook de kwaliteit van uitvoer zelf bepalen.  

Website PIXresizer


Zowel IrfanView als PIXresizer zijn 100% gratis.

[ Terug naar boven ]
Onderwerp: Hoe plaats ik tekst naast een afbeelding ?
Antwoord

Het uitlijnen van afbeeldingen zoals dat heet doe je via het tabblad Weergave tijdens het invoegen van een afbeelding. Stel we willen de volgende afbeelding met wat tekst ernaast. Als we nu gewoon wat tekst ernaast typen krijg je dit:

Zonnebloemen zijn erg leuk om in je tuin te hebben. Ze zijn makkelijk te zaaien en te onderhouden. Zowel de plant zelf als de bloemen kunnen erg groot worden waardoor je er soms wel een stok bij moet zetten.

Dat ziet er niet goed uit want de tekst gaat onder het plaatje verder.

We gaan naar het tabblad Weergave. Dit doe je door (in dit geval) opnieuw op de afbeelding te klikken en dan weer op het afbeeldingssymbooltje in de Editor (het boompje) te klikken. Daar kiezen we bij Uitlijning voor Links en klikken op Bijwerken (of als je dit gelijk doet tijdens de eerste keer invoegen van de afbeelding voor Invoegen).

Het resultaat is als volgt:

Zonnebloemen zijn erg leuk om in je tuin te hebben. Ze zijn makkelijk te zaaien en te onderhouden. Zowel de plant zelf als de bloemen kunnen erg groot worden waardoor je er soms wel een stok bij moet zetten.

Hetzelfde kan ook maar dan met de afbeelding aan de rechterkant. We kiezen dan bij Uitlijning voor Rechts.

Zonnebloemen zijn erg leuk om in je tuin te hebben. Ze zijn makkelijk te zaaien en te onderhouden. Zowel de plant zelf als de bloemen kunnen erg groot worden waardoor je er soms wel een stok bij moet zetten. 

Zoals je ziet zit de tekst tegen de afbeelding aangeplakt. Dit moeten we nog even corrigeren door een marge toe te voegen aan de afbeelding. We doen het nog een keer voor een linksuitgelijnde afbeelding en gaan weer naar het tabblad Weergave.

Daar vullen we bij Horizontale ruimte 4 in maar dat mag natuurlijk ook een ander getal zijn. Vervolgens klikken we ergens ernaast en dan verschijnt onderaan bij Stijl de volgdende code:

float: left; margin-left: 4px; margin-right: 4px;

Gek genoeg geeft de Editor dan ook een linkermarge aan de afbeelding wat natuurlijk niet moet want hij is links uitgelijnd en de tekst staat rechts van de afbeelding. De marge van 4px moet dus alleen op de rechterkant van de afbeelding worden toegepast. We verwijderen dus margin-left: 4px waardoor de volgende stijlopmaak overblijft:

float: left; margin-right: 4px;

Hetzelfde doen we precies andersom als we de afbeelding rechts uitlijnen en dus de marge aan de linkerkant moet wezen. We verwijderen dan dus margin-right en dan blijft dus de volgende stijlopmaak over:

float: left; margin-left: 4px;

Het resultaat is als volgt:

Het kan natuurlijk zijn dat je het prima vindt dt de tekst gewoon verder gaat naast de afbeelding maar als je dat niet wilt dan is hier nog een truckje om dat te voorkomen.

Selecteer de tekst en de afbeelding. Zorg dat je alleen de tekst selecteert waarvan je wilt dat die naast de afbeelding komt !

Klik vervolgens op het symbooltje voor CSS Style bewerken . Ga vervolgens naar het tabblad Box en stel daar het volgende in:

Breedte 100 %
Zweven left
Vrijhouden right
Bij Marge vinkje weg
Bij Marge Onder 4 pixels (of een ander getal)

Klik vervolgens op Bijwerken.

De tekst gaat nu onder de afbeelding verder en niet ernaast. Sla je pagina op en kijk vervolgens op je website of alles er goed uitziet en maak desnoods aanpassingen.

Natuurlijk kun je als je dit onder de knie hebt alle stappen in een keer toepassen maar hier worden ze uiteraard stap voor stap uitgelegd.

[ Terug naar boven ]

Powered by Dutch CMS v2.0 XHTML Strict

Bezoek ook de Webdesign website van Dutch CMS