Hier vindt je allerlei tips en truucjes voor je website gebouwd met Joomla.
Artikel bekijken zonder een menu-item aan te maken
Soms wil je als auteur een artikel bekijken zonder meteen een menu-item aan te maken.
Zorg dan dat je artikel wel gepubliceerd is. Onthoud het ID nummer van het artikel (helemaal rechts in het artikelenoverzicht) in dit overzicht is het nummer 71
Ga naar de frontend van je website en typ achter het browseradres
Je ziet nu de website met het geopende artikel. Hiervoor moet het artikel wel gepubliceerd zijn.
Foto's plaatsen
Je hebt zelf digitale foto's gemaakt van je onderwerp en die wil je plaatsen op je website. Als je de eigenschappen van een foto kijkt dan zie je in de gegevens een nietszeggende naam met een formaat-aanduiding JPEG (bijv. IMG_1967.JPG), een datum en tijd en afmetingen van bijvoorbeeld 3264x2448 en de grootte 3,6 MB. Als je deze foto bekijkt op je favoriete viewer dan wordt deze beeldschermvullend getoond. Voor het gebruik op je website is deze foto veel te groot. Ik ga je een manier uitleggen om deze foto te verkleinen tot hanteerbaar formaat.
- Haal je foto's van je digitale camera op je PC (dit heb je waarschijnlijk al eens gedaan en ik zal niet ingaan op deze handelingen omdat iedere camera anders werkt).
- Open je bewerkingsprogramma (je kunt een Open Source Programma FastStone Image Viewer gratis downloaden) en zoek je foto op op je PC.
- Onder BEWERKEN > Afmetingen afbeeldingen (CRTL+R) opent een popup om de gewenste afmetingen in te stellen. Maar wat betekent nu 3264x2448 px precies? De eenheid "px" staat voor pixel. Je beeldscherm waar je nu naar kijkt is misschien 1280x800 pixel of iets dergelijks. De originele foto zou dus niet in een keer te bekijken zijn en zou de opmaak van je website kunnen verstoren. Een afmeting van een maximale breedte van 600 px is ruim voldoende. Overschrijf dus de waarde van 3264 met 600 en FastStone zal de tweede waarde zelf aanpassen (mits het vinkje is gezet bij "Behoud verhoudingen"). Druk op OK en FastStone gaat de bewerking van verkleinen uitvoeren.
- Onder BESTAND > Opslaan als opent nu een nieuwe popup waar je deze kopie van je originele foto een nieuwe inhoudelijke naam kunt geven. Let op dat je geen spaties, komma of punten gebruikt in de naam. Wel toegestaan is een underscore _ (bijvoorbeeld heusden_1.jpg). Bij OPTIES open je een nieuwe popup waar je de resolutie nog kunt wijzigen. Kies een waarde tussen de 75 en 80%. Dit is ruim voldoende voor internetgebruik. Tussen de schermen links (originele foto) en rechts (je verkleinde kopie) is geen verschil te zien. De afmeting van je bewerkte foto is gekrompen naar ongeveer 50 kb. Druk op OK en sla je bewerkte foto op als kopie in een separate map op je PC.
- In Joomla! administrator ga naar Mediabeheer. Hier kan je je eigen mappenstructuur aanmaken zodat je je foto's makkelijk terug kunt vinden. Rechtsboven typ je in het invoerveld de gewenste naam zoals bijvoorbeeld "eigen" en dan klik je op "Map aanmaken". Na enkele seconden zie je een nieuwe map verschijnen met de gekozen naam "eigen".
- Ga in de map en kijk aan de onderkant van je scherm en kies je foto die je wilt uploaden om deze te kunnen plaatsen. Klik op "Start upload". Na enkele seconden verschijnt de gekozen foto als kleine afbeelding (icoontje of thumbnail).
- Ga naar Algemene Instellingen > tabblad Website naar de Media-instellingen en zorg ervoor dat de instellingen voor het pad naar je mediamappen alleen "images" staat.
Hiermede kun je in je editor de foto in je tekst plaatsen. In de JCE-editor geef je voor een grote foto aan Uitlijning: left en Clear: both. Als je nog aangeeft dat boven en onder 5px afstand gehouden moet worden dan loopt de tekst nu niet om je foto maar wordt onder de foto voortgezet. Ook kun je nu nog de afmeting van de foto aanpassen als deze nog steeds te groot is. De verhouding behouden. - Eventueel moet je nog de instellingen in je editor moeten aanpassen indien je de juist aangemaakte map niet kunt openen. Ga naar Componenten > JCE Editor > Groups > Default > en kijk onderin in de Plugin-opties naar het File Directory Path (bestandenpad):
Laat alleen "images/" staan. Nu ben je wel in staat om in de editor je map met je foto te vinden. - In je editor (bijvoorbeeld JCE) klik je op het icoontje voor afbeeldingen:
en je zoekt je foto op (in dit geval de plaatsing en instellingen voor de eerste afbeelding "mediainstellingen":
Deze instellingen kun je ook achteraf wijzigen totdat de foto precies past in de tekst. In het voorbeeldje zie je wat met de tekst zal gebeuren ten opzichte van de foto.
Foto met een link
Je wilt aan een kleine foto in een tekst een grotere foto linken. De grotere foto moet openen in een Popup zodat een bezoeker van je site de grotere foto rustig kan bekijken.
Hoe voeg je dus een link toe aan je kleine foto?
Je plaatst een kleine foto (thumbnail) in je tekst met de JCE editor.
Hoe je dit moet doen heb je kunnen lezen in het vorige artikel.
<img roept een afbeelding op
src= de source met het pad waar de foto staat tussen aanhalingtekens
alt= de alternatieve tekst als een browser de foto niet kan tonen
title= wordt getoond als de muisaanwijzer op de foto ligt
tevens kan de opmaak van de foto nog worden ingeven
De grotere foto staat in dezelfde map maar met een andere naam. In mijn voorbeeld is dat "zonsondergang_groot.jpg"
Hoe kan je de grotere foto linken aan de thumbnail?
Daarvoor moet je eerst nog weten hoe een link wordt opgegeven.
In HTML is iedere link alsvolgt opgebouwd:
<a href="/ ...">de link</a> Tevens kun je nog opgeven of de link in een nieuw browservenster wordt geopend of in het reeds geopende. Voor een bezoeker is het niet altijd aangenaam om met iedere link een nieuw venster te laten openen. Maar het is wel wenselijk het gaat om een link naar een andere website. Deze eigenschap heet "target" en kan zijn "_self" (voor hetzelfde venster) en "_blank" (voor een nieuw venster).
De link voor onderstaande foto met link luidt:
<a href="/images/artikelfotos/zonsondergang_groot.jpg" class="jcepopup zoom-top-right" data-mediabox="1" type="Image/jpeg" data-mediabox-width="400" data-mediabox-title="Zonsondergang"a> <img style="mergin=bottom: 20px; margin-top: 10px; float: left;" src="/images/artikelfotos/zonsondergang_klein.jpg" alt="zonsondergang klein" title"zonsondergang" height="50" width="50" /a>
P.S. Uiteraard kan je ook linken naar een artikel op je website of een externe link invoegen.
Een module in een artikel plaatsen
Ga in Extensies > Pluginbeheer en activeer de Joomla Core plugin Inhoud-Laad modules. Ik heb zelf in de parameters ervoor gekozen om de te plaatsen module tussen <DIV>'s te zetten.
Open nu je module die je wilt plaatsen en je typt in plaats van bijvoorbeeld left bij Positie: eigen
Ga in Artikelenbeheer naar je artikel. Op de plaats waar je je module wilt plaatsen en gebruik de volgende code
{*loadposition eigen*}
zonder de *
Zodra je je editor omschakelt naar HTML-modus bent je in staat om de module de nodige style (opmaak) voor de precieze plaats in je artikel mee te geven.
Website offline zetten lukt niet
Als je de Joomla website offline wilt zetten, kan je dit makkelijk instellen onder Systeem > Algemene instellingen. Zet bij "website offline" de radio-button van Nee op Ja. Evenentueel kan je nog een eigen tekst invullen.
Opslaan en sluiten. Je ziet de melding dat de instellingen zijn opgeslagen.
Als je nu de voorkant bekijkt verwacht je een blanco scherm met een inlogscherm in een kader.
Indien je dit niet ziet, moet je de cookies verwijderen. Dus F5 meerdere keren drukken. Zie je nog steeds geen blanco scherm kan je de cookies verwijderen in je developer-extensie van je browser. Zoek de opslag van cookies op en verwijder alle sessie-cookies.