K2 is toch wel één van de meest vooruitstrevende componenten van Joomla. Maar ook in K2 zitten functies die niet altijd begrepen worden. Eén van die functies is het toevoegen van afbeeldingen in je bericht of pagina met een afbeeldings pop-up. Daarom hier een stappenplan hoe je eenvoudig een afbeelding met pop-up toevoegt aan je pagina. In deze tutorial ga ik uit van JCE als editor en JCE mediabox plug-in geïnstalleerd.
JCE editor is te downloaden op https://www.joomlacontenteditor.net/downloads/editor.
En de Mediabox plugin op https://www.joomlacontenteditor.net/downloads/mediabox.
1. De eerste stap is om een nieuw of bestaand artikel te openen en op het pictogram ‘Insert/Edit image’ te klikken.
2. Hier krijg je een overzicht te zien van je bestandsbeheer en een aantal opties voor je afbeelding. De opties worden automatisch ingevuld na het selecteren van de afbeelding.
URL: Link naar afbeelding op de server.
Alternate text: Text die zichtbaar is voor zoekmachines of wanneer afbeeldingen in een browser uitgeschakeld is.
Dimensions: Hoogte en breedte verhouding. Dit kun je aanpassen na het selecteren van je afbeelding in de grootte van een thumbnail 150×150 of 300×300 of een grote die past bij de website.
Alignement: Uitlijnen: Links, Rechts of Midden.
Margin: Ruimte tussen afbeelding en tekst.
Border: Rand rondom afbeelding.
Onderaan het scherm zie je de map /images op de server. Het is slim om een aparte map toe te voegen voor afbeeldingen die los geüpload worden.
Dit is mogelijk door aan de linkerkant ‘Root’ te selecteren en daarna op het gele mapje met de groene + te klikken. Zo maak je een nieuwe map aan binnen je server.
3. Selecteer de rood omrande pictogram ‘Upload’.
4. Nu krijg je het venster te zien om je afbeeldingen vanaf je pc te uploaden. Hierin heb je twéé opties. Het slepen van afbeeldingen naar het scherm ‘Drop files here’ of door middel van de button ‘Browse’.
Wanneer je de afbeeldingen geüpload hebt naar de server, kom je weer terug in het scherm ‘Image manager’. Selecteer hier de afbeelding.
Je ziet nu dat de afbeelding specificaties ingevuld zijn bij ‘Properties’.
Deze kun je aanpassen zoals eerder in dit artikel is beschreven.
Nu de afbeelding ingevoegd is in het artikel, rest ons nog één stap en dat is het linken naar een pop-up.
5. Selecteer je afbeelding. Waar je in het begin de knop ‘Insert/edit images’ gebruikte staat direct daarnaast de knop ‘Insert/edit link’.
6. Je krijgt nu het venster te zien om een ‘link’ te koppelen aan je afbeelding. klik op het icoon wat rood omrand is naast het invulveld ‘URL’.
7. Je krijgt nu een ‘File manager’ te zien, ongeveer gelijk aan de ‘Image manager’ aan het begin va dit bericht. Selecteer de afbeelding die je eerder geüpload hebt en klik op de button ‘Insert’.
8. Je ziet nu achter ‘URL’ de link naar je afbeelding staan. Om nu de pop-up te koppelen ga je naar het tabblad ‘Advanced’.
9. Selecteer daar achter ‘Class list’ ‘jcepopup’. Hier word de afbeelding gelinkt met de plug-in Media box van JCE. Klik op ‘Insert’ en je afbeelding met de pop-up is klaar.