JCE: foto's met popup/onderschrift plaatsen
Een van de aardige technieken die u kunt gebruiken is om kleine foto's tussen de tekst te plaatsen en deze door er op te laten klikken vergroot te tonen.
In dit artikel wordt e.e.a. uit de doeken gedaan. Klik op de afbeeldingen om deze in het groot te bestuderen.
N.B.: De afbeeldingen zijn gemaakt met behulp van JCE versie 1; versie 2 heeft vergelijkbare mogelijkheden.
Afb.-002
Afb.-001 Stap 1: het opladen van de foto (Afbeelding 1)
Stel u heeft op uw Pc een foto staan die u in de tekst wilt opnemen, en die door een klik actie uitvergroot kan worden.
U dient de volgende zaken eerst op uw Pc te regelen:
- Plaats de forto op uw bureaublad (niet noodzakelijk maar het werkt wel zo makkelijk)
- Geef de foto een duidelijk herkenbare naam (makkkelijk voor later) en een correcte naam.
- Een correcte bestandsnaam bestaat uit kleine letters; bevat geen spaties, gebruik desnoods de underscore ( _ ) en speciale tekens (zoals de punt, de komma, ü, é, etc.). Vermeid bestandsnamen als IMG_D000354.jpg. Verder dient de extensie (.jpg of .gif etc.) ook uit kleine letters te bestaan. Sommige fotocamera's maken bestandnamen die op .JPG eindigen maar niet alle joomla extensies kunnen hiermee overweg.
- Plaats uw cursor op de gewenste lokatie binnen uw tekst door aan het begin van de betreffende regel te gaan staan.
- Klik in artikel op het icoon "Invoegen/bewerken afbeelding" en open in de popup die verschijnt de map waarin de foto geplaatst moet worden. In principe plaatst u geen fotomateriaal in de map images/stories maar in een van de submappen. Maak desnoods eerst zo'n submap aan via het icoon "New folder" boven de rechter kolom van het popup scherm.
- Laad uw pasfoto door het kiezen van het icoon "Uploaden" boven de rechter kolom van het popup scherm. Er verschijnt een popupscherm waarop u de instellingen dient te kiezen die op bijgaand afbeelding 2 staan. Kies vervolgens de knop "Voeg toe", links boven in het scherm, lokaliseer uw foto op uw Pc en klik op "Upload" links onder in het scherm.
Tip: indien u meerdere foto's wilt laden kiest u eerst meerdere malen "Voeg toe" alvorens met "Upload" de foto's te laden.
Afb.-003 Stap 2: Invoegen van de foto in de tekst. (Afbeelding 3).
Zodra het laadscherm klaar is, in het onderste vak kunt u het laden volgen, kunt u het scherm sluiten.
- Vervolgens selecteert u de foto die u wilt plaatsen en klikt u op het tabblad "Pop Up".
Zie afbeelding 3 links boven. - Er verschijnt een popup scherm waarop u eerst "Inschakelen" selecteert. U wordt gevraagd of de miniatuurafbeelding gebruikt mag worden en geeft daarvoor toestemming.
- Vervolgens typt u een onderschrift in. Dit onderschrift komt onder de uitvergrote foto en kan uit twee regels bestaan. Daartoe typt u twee stukken tekst in die van elkaar gescheiden worden door twee dubbele punten die voorafgegaan en afgesloten dienen te worden door een spatie.
- Tot slot kiest u de positie waar het vergrootglas op de miniatuurafbeelding geprojecteerd moet worden en selecteert u het tabblad "Afbeelding".
Afb.-004 Stap 3: Het instellen van de miniatuurafbeelding (Afbeelding 4).
In het scherm stelt u de volgende zaken nog even in:
- Typ een alternatieve tekst. Deze tekst zal gebruikt worden aan o.a. gehandicapte bezoekers.
- Kies altijd een optie onder "Uitlijning" en, indien mogelijk, een optie onder "Clear". Rechtsboven in het vak "Voorbeeld" wordt aangegeven wat er gaat gebeuren met uw instellingen. Met de knop "Clear" oefent u controle uit op de tekst die de foto omringt. Ook hier kunt u in het vak "Voorbeeld" de gevolgen van uw instelling zien.
- Haal het vinkje bij "Gelijke" weg en stel afhankelijk van de uitlijning die u gekozen hebt de marges in. Door de marges in te stellen zal de tekst die rondom de foto vloeit de ingestelde afstan aanhouden t.o.v. de foto. Hier is de marge instelling gebruikt om deze lijst met punten netjes weer te geven. "Rechts" werd op 20 gezet en "Onder" op 50.
- U kunt het scherm nu sluiten door op de knop "Invoegen" te klikken.
Tip: De foto zal in de editor worden geplaatst op de locatie die u gekozen hebt. U kunt de foto desnoods naar een andere locatie slepen.
Mocht u nog wat willen wijzigen klik dan op de foto en kies het icoon "Invoegen/bewerken afbeelding"
Afb.-005 Stap 4: Het toevoegen van een onderschrift (afbeelding 5).
Selecteer de foto in uw tekst door er een keer op te klikken en kies het icoon "Invoegen/bewerken onderschrift". Een popup scherm wordt geopend. Kies daarop de volgende instellingen:
- Bij "text" voegt u de tekst in die u onder de kleine afbeelding wilt hebben.
- Bij uitlijning kiest u de gewenste uitlijning.
- Hierna kiest u de knop "invoegen" de tekst wordt onder de foto opgenomen.
- Eventueel selecteert u de tekst, kiest u het icoon "I" voor schuine tekst en zet u de "tekengrootte" op "8pt".
Vervolgens slaat u uw artikel op en controleert u op uw website de nieuw aangemaakte pagina.
Site information
- Current Active Users11
- Active Guests11
- Unique Visits Today64
- Unique Visits Yesterday20
- Visits This Week181
- Visits Previous Week219
- Total Articles39
- New Articles This Week0

