Waarschuwing
Kan map niet verwijderen. Pad: [ROOT]/cache/com_content
Bericht sluiten

Stap 09 - Werken met afbeeldingen

Juist bij een kooksite moeten foto’s ervoor zorgen dat het water je in de mond loopt. Onze kooksite bevat tot nu toe alleen nog maar tekst. Tijd om daar verandering in te brengen en afbeeldingen toe te voegen! Joomla heeft voor het gebruik van afbeeldingen handige opties die we voor onze kooksite gaan inzetten. Ook kijken we naar het mediabeheer voor het organiseren van alle afbeeldingen. Het mediabeheer is te vinden onder Inhoud > Mediabeheer. In het mediabeheer van Joomla kun je alle afbeeldingen die op de site staan, terugvinden en organiseren. Als je via ftp naar de /images/-map zou kijken, zie je dezelfde structuur terug als in het media beheer. Het Joomla-mediabeheer toont dan ook de bestanden en mappen die in de /images/-map van je website staan.

Mediabeheer organiseren

Afbeeldingen verwijderen

Bij iedere installatie worden er standaard een aantal afbeeldingen en mappen toegevoegd. Als oefening verwijderen we de standaard aanwezige Joomla-logo’s. Selecteer de vier logo’s en klik in de werkbalk op Verwijderen.

mediabeheer 01

Mappen aanmaken

Naarmate de site verder groeit en er meer afbeeldingen op de site staan, zul je merken dat het prettig is als deze goed georganiseerd zijn. Om goed van start te gaan, maken we daarom een map aan voor ‘voorgerechten’, ‘hoofdgerechten’, ‘nagerechten’ en ‘kooktips’, zodat we de afbeeldingen per categorie organiseren. Dit doen we via de knop Nieuwe map aanmaken.

mediabeheer 02

Afbeeldingen bij artikelen

Nu de mappenstructuur is opgezet, gaan we afbeeldingen plaatsen bij onze reeds geplaatste artikelen.

Afbeeldingen en links

Ga naar het artikelbeheer en open het voorgerechtrecept. Open het tabblad Afbeeldingen en links. In dit tabblad kun je afbeeldingen en links in voeren die bij het artikel horen. Ingevoerde links zullen onderaan het artikel getoond worden, maar hier maken wij geen gebruik van.

artikelafbeelding 01

Afbeelding introtekst

We kunnen een afbeelding voor de introtekst en een voor het volledige artikel instellen. De afbeelding voor de introtekst is zichtbaar in de blogweergave. Klik je op lees meer en bekijk je het volledige artikel, dan zie je de afbeelding in het volledige artikel. Klik bij Afbeelding introtekst op de knop Selecteren.

artikelafbeelding 02

Afbeelding uploaden

We zien een vereenvoudigde versie van de mappenstructuur. Klik op de map voorgerechten. Selecteer een afbeelding en klik op Upload starten. Voor deze site gebruiken we afbeeldingen van maximaal 750 pixels breed.

artikelafbeelding 03

Afbeelding selecteren

De afbeelding staat nu in de map voorgerechten. Om de afbeelding aan het artikel toe te voegen, klikken we op de afbeelding. Bij URL van de afbeelding zal nu het pad naar de afbeelding zichtbaar zijn. Klik daarna op de button Invoegen rechtsboven om de afbeelding te selecteren voor het artikel.

artikelafbeelding 04

Artikel opslaan

Dit herhalen we voor Afbeelding volledig artikel. Omdat we dezelfde afbeelding willen gebruiken, hoeven we de afbeelding alleen te selecteren. Het artikel slaan we nu op en bekijken het resultaat op de site. De afbeelding is nu te zien bij zowel de blogweergave als bij de artikelweergave.

artikelafbeelding 05

Mapbeheer

Opgeruimd staat netjes. Ruim afbeeldingen netjes op en bespaar jezelf een hoop frustratie.

mediabeheer

1 Uploaden

Door op deze knop te klikken, wordt het uploadveld zichtbaar waarmee je afbeeldingen kan uploaden naar de website. De afbeeldingen komen in de actieve map terecht.

2 Map aanmaken

Door op deze knop te klikken, wordt het invoerveld voor nieuwe mappen zichtbaar. Voer een naam in en klik op Map aanmaken om de map te maken.

3 Verwijderen

Selecteer een of meerdere bestanden en klik op deze knop om de selectie te verwijderen.

4 Miniatuurweergave / Gegevensoverzicht

Wissel tussen de twee beschikbare weergaven om de inhoud van mappen te tonen.

5 Mappenstructuur

Hier zie je de mappenstructuur van je /images/-map terug. Door op een map te klikken, worden de bestanden zichtbaar.

1000 Resterende tekens


Deze site wordt beschermd door reCAPTCHA en Google Privacybeleid en Servicevoorwaarden zijn van toepassing.