logoEen project van Gert Uphoff.

JCE: foto's met popup/onderschrift plaatsen

Een van de aardige technieken die je 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.

Niet vergeten: voor beeldmateriaal gebruikt u bij voorkeur Rokgallery !

N.B.: De afbeeldingen zijn gemaakt met behulp van JCE versie 1; versie 2 heeft vergelijkbare mogelijkheden.

Afb.-002 Afb.-002 Afb.-001 Afb.-001 Stap 1: het opladen van de foto (Afbeelding 1) 
Stel je hebt op jouw Pc een foto staan die je in de tekst wilt opnemen, en die door een klik actie uitvergroot kan worden.
Je dient de volgende zaken eerst op jouw Pc te regelen:

  • Plaats de foto op jouw 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 daarvoor de underscore ( _ ), en speciale tekens (zoals de punt, de komma, ü, é, etc.). Vermeid bestandsnamen als IMG_D000354.jpg; is te nietszeggend bij later onderhoud. 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 jouw cursor op de gewenste lokatie binnen jouw 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 je 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 jouw foto door het kiezen van het icoon "Uploaden" boven de rechter kolom van het popup scherm. Er verschijnt een popupscherm waarop jede instellingen dient te kiezen die op bijgaand afbeelding 2 staan. Kies vervolgens de knop "Voeg toe", links boven in het scherm, lokaliseer jouw foto op jouw Pc en klik op "Upload" links onder in het scherm.

    Tip: In de nieuwste versie van JCE is het pop-upscherm veranderd. Sleep een of meerdere foto's naar het pop-up venster.

Afb.-003 Afb.-003 Stap 2: Invoegen van de foto in de tekst. (Afbeelding 3).
Zodra het laadscherm klaar is, in het onderste vak kan je het laden volgen, kan je het scherm sluiten.

  • Vervolgens selecteer je de foto die je wilt plaatsen en klikt jeop het tabblad "Pop Up".
    Zie afbeelding 3 links boven.
  • Er verschijnt een popup scherm waarop je eerst "Inschakelen" selecteert. Je wordt gevraagd of de miniatuurafbeelding gebruikt mag worden en geeft daarvoor toestemming.
  • Vervolgens typ je een onderschrift in. Dit onderschrift komt onder de uitvergrote foto en kan uit meerdere regels bestaan.
  • Tot slot kies je de positie waar het vergrootglas op de miniatuurafbeelding geprojecteerd moet worden en selecteer je het tabblad "Afbeelding".

Afb.-004 Afb.-004 Stap 3: Het instellen van de miniatuurafbeelding (Afbeelding 4).
In het scherm stel je 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 jouw instellingen. Met de knop "Clear" oefen je controle uit op de tekst die de foto omringt. Ook hier kun je in het vak "Voorbeeld" de gevolgen van jouw instelling zien.
  • Haal het vinkje bij "Gelijke" weg en stel afhankelijk van de uitlijning die je 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 netjes luiten door op de knop "Invoegen" te klikken.

Tip: De foto zal in de editor worden geplaatst op de locatie die je gekozen hebt. Je kunt de foto desnoods naar een andere locatie slepen.
Mocht je nog wat willen wijzigen klik dan eerst op de foto en kies het icoon "Invoegen/bewerken afbeelding"

Afb.-005 Afb.-005 Stap 4: Het toevoegen van een onderschrift (afbeelding 5).
Selecteer de foto in jouw tekst door er één keer op te klikken en kies het icoon "Invoegen/bewerken onderschrift". Een popup scherm wordt geopend. Kies daarop de volgende instellingen:

  • Bij "text" voegt je de tekst in die jeonder de kleine afbeelding wilt hebben.
  • Bij uitlijning kies je de gewenste uitlijning.
  • Hierna kies je de knop "invoegen" de tekst wordt onder de foto opgenomen.
  • Eventueel selecteer je de tekst, kiest jehet icoon "I" voor schuine tekst en zet je de "tekengrootte" op "8pt".

Vervolgens sla je jouw artikel op en controleer je op jouw website de aangemaakte pagina.

koninklijke zangvereniging venlona Klik om te vergroten

Inlogformulier