In deze tutorial wordt uitgelegd hoe je een afbeelding aan een artikel kan toevoegen.
Afbeelding bij Intro- en volledig artikel
Open het tabblad 'Afbeeldingen en links'.
Klik op de knop Selecteer achter het veld 'Afbeelding intro artikel' om een afbeelding te selecteren die wordt weergegeven op een overzichtspagina.
Klik op de knp Selecteer achter het veld 'Afbeelding volledig artikel' om een afbeelding te selecteren die wordt weergegeven als het volledige artikel wordt weergeven.
Afbeelding invoegen in de tekst
Klik rechts op de plek waar je de afbeelding wilt hebben en kies ‘Insert/Edit image’ uit de keuzelijst die verschijnt.
De image manager wordt geopend.
Selecteer de afbeelding die je in de tekst wilt plaatsen en klik op Insert.
Vergeet het artikel niet op te slaan om de wijzigingen in het artikel vast te leggen.
Staat de afbeelding er nog niet bij, dan moet je die eerst uploaden.
Afbeelding uploaden
Als je een afbeelding upload komt deze in de map die op dat moment geopend is. De inhoud van die map is te zien in de middelste kolom. Zorg dus dat je de goed map open hebt door in de linker kolom op de naam van de map te klikken.
Klik op de knop Upload om een nieuwe afbeelding te uploaden. Er opent een tweed pop-up venster.
Je kan het bestand vanaf je PC naar het uploadvak (Drop files here) slepen of op Browse klikken om op je computer te zoeken.
Een afbeelding mag niet groter zijn dan 1Mb (wat heel groot is voor op internet). Als een afbeelding te groot is krijg je hier een melding van wanneer je hem probeert te uploaden.
Het is mogelijk een afbeelding meteen te schalen. Wil je dat doen (voor alle afbeeldingen die je in één keer upload) selecteer het vakje voor ‘Resize’ en vul de waarden in (breedte en hoogte).
Tip: De afmeting past binnen de breedte en hoogte die je hebt opgegeven. Heb je bijvoorbeeld een afbeelding die 400x300 pixels is en je schaalt die naar 200x100 pixels, dan zal niet breder worden dan 200px én niet hoger dan 100px. Wil je dat een afbeelding schaalt naar 200 pixels ongeacht de hoogte, vink dan ‘Propotional’ uit en vul alleen een waarde in voor de breedte (verwijder de waarde voor de hoogte).
Klik op Upload om het gekozen bestand te uploaden. Als alle bestanden geüpload zijn sluit dit pop-up venster zich weer en kom je terug in de Image Manager Extended. Alle nieuwe bestanden worden vet weergegeven in de lijst.
Ook als je maar één afbeelding hebt geüpload, moet je deze nog even selecteren door op de naam te klikken om hem te kunnen plaatsen.
Klik op Insert of Update om de afbeelding te plaatsen. Insert zie je als je een afbeelding nieuw plaatst in de tekst of in een selectie vak, update al je een bestaande afbeelding vervangt.
Vergeet het artikel niet op te slaan om de wijzigingen in het artikel vast te leggen.
Afbeelding bewerken
Het is mogelijk om een afbeelding online te bewerken. Je kan een afbeelding schalen, uitsnijden en zelfs wat filters toepassen.
Als je al in een artikel aan het werk bent open je het Image Manger Extended door op het icoontje ‘Insert/Edit Image’ te klikken, of rechts te klikken en voor ‘Insert/Edit Image’ te kiezen in het keuzemenu.
Als je niet in het artikel beheer zit, maar je wilt wel een afbeelding bewerken ga dan naar het Controlepaneel en kies ‘JCE File Browser’.
Beide openen een versie van de Image Manager, waarbij de versie die je krijgt als je op ‘JCE File Browser’ klikt geen opties voor de afbeelding laat zien (aangezien je die niet nodig hebt als je geen afbeelding in een artikel aan ’t plaatsen bent).
Selecteer de afbeelding die je wilt bewerken door deze aan te klikken. Rechts naast het voorbeeld zie je een aantal icoontjes. Klik op het icoontje met de haken.
Er opent een pop-up venster.
Rechts kan je kiezen wat je wilt doen:
Resize – schalen
Crop – uitsnijden
Rotate – draaien.
Het is handig om er voor te zorgen dat de afbeelding eerst het juiste formaat heeft en het daarna eventueel bij te snijden. Klik dus eerst op ‘Resize’.
Je kan de breedte en de hoogte instellen, of een van de vooraf ingestelde waarden kiezen bij Preset. Klik op Apply om het nieuwe formaat toe te passen.
Wil je ook bijsnijden klik dan vervolgens op ‘Crop’.
Vul ook hier weer de breedte en/of de hoogte in. Je kan in het voorbeeld van de afbeelding het vak verslepen om de positie te bepalen.
Klik op Apply om het nieuwe formaat toe te passen.
Nu moet je de afbeelding opslaan. Klik op Save.
Je kan de naam aanpassen. Door dit te doen wordt de aanpassing als nieuw bestand opgeslagen. Laat je de naam hetzelfde dan wordt het originele bestand overschreven.
Klik op OK om het (nieuwe) bestand te bewaren.
Tips
Afbeeldingen op internet zijn tricky. Dat komt doordat je nooit weet op wat voor scherm je bezoeker de website bekijkt. Hier zijn dan ook een paar tips voor het werken met afbeeldingen:
- Zorg dat je afbeelding het formaat heeft waarin je hem wilt weergeven.
- Gebruik geen vast waarden voor de breedte en hoogte van je afbeelding. Doe je dit wel, dan wordt je afbeelding ALTIJD op dat formaat weergegeven, ook als het daardoor niet meer in het beeld past. Vooral op mobiel kan dit voor lelijk horizontaal scrollen op je pagina zorgen.
- Laat plaatjes die groter zijn dan 150 pixels niet in de tekst drijven. Als ze groter zijn heb je de kans dat op een mobiel er maar 1 of 2 woorden naast passen en dat leest heel naar. Plaats liver het plaatje in een eigen regel op de site (eventueel gecentreerd).
- Afbeeldingen van internet mogen alleen gebruikt worden als dit expliciet vermeld staat. Er wordt actief gezocht naar illegaal gebruikte afbeeldingen en de boetes kunnen oplopen tot een paar duizen euro. Zorg dus dat je zeker weet dat je een afbeelding mag gebruiken (en dit aan kan tonen). Je kan veel goede en vrij te gebruiken afbeeldingen vinden op pixabay.com en unsplash.com