Tips en truucjes

Artikelindex

Foto's plaatsen

Je hebt zelf digitale foto's gemaakt van je onderwerp en die wil je plaatsen op je website. Als je de eigenschappen van een foto kijkt dan zie je in de gegevens een nietszeggende naam met een formaat-aanduiding JPEG (bijv. IMG_1967.JPG), een datum en tijd en afmetingen van bijvoorbeeld 3264x2448 en de grootte 3,6 MB. Als je deze foto bekijkt op je favoriete viewer dan wordt deze beeldschermvullend getoond. Voor het gebruik op je website is deze foto veel te groot. Ik ga je een manier uitleggen om deze foto te verkleinen tot hanteerbaar formaat.

    1. Haal je foto's van je digitale camera op je PC (dit heb je waarschijnlijk al eens gedaan en ik zal niet ingaan op deze handelingen omdat iedere camera anders werkt).
    2. Open je bewerkingsprogramma (je kunt een Open Source Programma FastStone Image Viewer gratis downloaden) en zoek je foto op op je PC.
    3. Onder BEWERKEN > Afmetingen afbeeldingen (CRTL+R) opent een popup om de gewenste afmetingen in te stellen. Maar wat betekent nu 3264x2448 px precies? De eenheid "px" staat voor pixel. Je beeldscherm waar je nu naar kijkt is misschien 1280x800 pixel of iets dergelijks. De originele foto zou dus niet in een keer te bekijken zijn en zou de opmaak van je website kunnen verstoren. Een afmeting van een maximale breedte van 600 px is ruim voldoende. Overschrijf dus de waarde van 3264 met 600 en FastStone zal de tweede waarde zelf aanpassen (mits het vinkje is gezet bij "Behoud verhoudingen"). Druk op OK en FastStone gaat de bewerking van verkleinen uitvoeren.
    4. Onder BESTAND > Opslaan als opent nu een nieuwe popup waar je deze kopie van je originele foto een nieuwe inhoudelijke naam kunt geven. Let op dat je geen spaties, komma of punten gebruikt in de naam. Wel toegestaan is een underscore _ (bijvoorbeeld heusden_1.jpg). Bij OPTIES open je een nieuwe popup waar je de resolutie nog kunt wijzigen. Kies een waarde tussen de 75 en 80%. Dit is ruim voldoende voor internetgebruik. Tussen de schermen links (originele foto) en rechts (je verkleinde kopie) is geen verschil te zien. De afmeting van je bewerkte foto is gekrompen naar ongeveer 50 kb. Druk op OK en sla je bewerkte foto op als kopie in een separate map op je PC.
    5. In Joomla! administrator ga naar Mediabeheer. Hier kan je je eigen mappenstructuur aanmaken zodat je je foto's makkelijk terug kunt vinden. Rechtsboven typ je in het invoerveld de gewenste naam zoals bijvoorbeeld "eigen" en dan klik je op "Map aanmaken". Na enkele seconden zie je een nieuwe map verschijnen met de gekozen naam "eigen".
    6. Ga in de map en kijk aan de onderkant van je scherm en kies je foto die je wilt uploaden om deze te kunnen plaatsen. Klik op "Start upload". Na enkele seconden verschijnt de gekozen foto als kleine afbeelding (icoontje of thumbnail).
    7. Ga naar Algemene Instellingen > tabblad Website naar de Media-instellingen en zorg ervoor dat de instellingen voor het pad naar je mediamappen alleen "images" staat.

      mediainstelling

      Hiermede kun je in je editor de foto in je tekst plaatsen. In de JCE-editor geef je voor een grote foto aan Uitlijning: left en Clear: both. Als je nog aangeeft dat boven en onder 5px afstand gehouden moet worden dan loopt de tekst nu niet om je foto maar wordt onder de foto voortgezet. Ook kun je nu nog de afmeting van de foto aanpassen als deze nog steeds te groot is. De verhouding behouden.
    8. Eventueel moet je nog de instellingen in je editor moeten aanpassen indien je de juist aangemaakte map niet kunt openen. Ga naar Componenten > JCE Editor > Groups > Default > en kijk onderin in de Plugin-opties naar het File Directory Path (bestandenpad):

      editorinstellingen

      Laat alleen "images/" staan. Nu ben je wel in staat om in de editor je map met je foto te vinden.
    9. In je editor (bijvoorbeeld JCE) klik je op het icoontje voor afbeeldingen:

      editor image

      en je zoekt je foto op (in dit geval de plaatsing en instellingen voor de eerste afbeelding "mediainstellingen":

fotoinstellingen

Deze instellingen kun je ook achteraf wijzigen totdat de foto precies past in de tekst. In het voorbeeldje zie je wat met de tekst zal gebeuren ten opzichte van de foto.