Hoe gebruik je {loadposition} en {loadmodule} in Joomla

Joomla heeft 2 standaard mogelijkheden om eenvoudig modules in artikelen te plaatsen, in dit artikel leg ik uit hoe dat gaat.

Er zijn twee functies in Joomla waarmee u gemakkelijk modules direct binnen artikelen kunt plaatsen.

  • met loadposition kun je alle modules publiceren op een bepaalde positie.
  • met loadmodule kun je een module publiceren op een bepaalde module.

Indien je meer controle wilt met betrekking tot de layout dan kunnen deze opties je wellicht helpen om er meer controle over te hebben.

In dit artikel leg ik uit hoe je modules binnen een artikel plaatst met meer stijl.

 

Deel 1 - Zorg ervoor dat de Plugin is ingeschakeld

Zor ervoor dat de plugin ingeschakeld is, hierdoor kun je de modules invoegen in je artikelen.

  • Ga naar Extensions > Plugins.
  • Gebruik het zoekfilter om te vinden de "Content - Load Modules" plugin.
  • Controleer in dat de kolom "Status" een groen vinkje toont. Als er een rode cirkel zichtbaar is, klikt dam hierop. Het rode cirkel zal dan een groen vinkje worden. Daarmee is de plugin geactiveerd.

part 1 joomla load module

Deel 2 - Gebruik de Module knop

De Module-knop is veruit de gemakkelijkste manier om een module in een Joomla artikel te plaatsen.

In dit voorbeeld wordt het Shack forms extensie van Joomlashack gebruikt. Mocht je Shack forms nog niet gebruikt hebben, bekijk dan de Quick Start guide.

  • Het belangrijkste ding om te doen is het kiezen van de "Static" optie wanneer jij je formulier met Shack Forms maakt. Dit is de optie van de "Layout" van het eerste scherm van Shack Forms:

    part 2 static

  • Zodra je een formulier in de static positie opgeslagen hebt, klik je op de knop "Module" in de teksteditor van Joomla.

    part 2 module

  • Klik dan op de groene knop met de naam de module die je gecreert hebt.

    part 2 module placement

  • De module zal nu in het artikel geplaatst worden, met de "loadmodule" code.

    part 2 loadmodule

  • Sla het artikel op en bezoek de website via de front-end van je website. Het nieuwe formulier is nu te zien op je website:

    part 2 whole site

Deel 3 - Typ in: loadmodule en loadposition

Het is mogelijk om deze shortcodes handmatig in te voeren. Dit kan geeft je meer controle over de syntaxis. Dit is handig als je geen gebruik maakt van de standaard Joomla text editor.

  • Maak een artikel.
  • Laad de inlogmodule van Joomla door te code in te typen. Je kunt deze syntaxis gebruiken voor het laden van een module met de naam.
  • Laad de Who's online module door de positie code in te typen.

Er is geen modulelocatie in het sjabloon genaamd whoonline. Je kunt je eigen positie modulenamen aanmaken en ze gebruiken via deze techniek. Ik zal je laten zien hoe een module locatie aangemaakt wordt, eerst gaan we een artikel aanmaken.

We gaan uit van het volgende scenario; Het is een lidmaatschap optie, waarmee bezoekers zich kunnen aanmelden. Als er iemand online is, dan kan de bezoeker op de naam van de persoon klikken die online is om contact op te nemen. Als dit echt de bedoeling was, dan zou je ook een iets meer krachtige optie kunnen gebruiken zoals een contact formulier-module of een lijst met contactpersonen. Voor dit voorbeeld moeten we gewoon sommige modules gebruiken die standaard in Joomla zitten, zodat je kunt oefenen.

part 3 editor

De afbeelding hierboven laat zien hoe de pagina eruit gaat zien. De modules nog nog niet getoont. Hiermee leer je hoe je de modules in deze posities plaatst. De shortcodes beschreven we al, dus laten we de modules gaan aanmaken.

  • Ga naar Extensions > Module Manager > New.
  • Kies de "Who's Online Module".
  • Geef de module een titel.
  • Aan de rechterkant van het scherm, maak je positie oftewel een modulelocatie aan. Je kunt dit doen door simpelweg de naam te typen in het vak "Positie". In het onderstaande voorbeeld, maken we gebruik van de  naam "whoonline". Je kunt elke gewenste naam toekennen, zolang deze maar uniek is.
  • Klik dan "Add custom position".
  • Sla je module op, klik hiervoor op Save and Close.

    part 3 new module position
  • Bekijk het artikel. Het nieuw gepubliceerde module wordt nu weergegeven in het artikel. Tot nu toe hebben we een module geladen door naam en positie.

    part 3 loadposition

 

Deel 4 - Maken van div-elementen voor plaatsing en styling

Zowel onze modules zijn zichtbaar in het artikel maar ze niet zien er nog niet goed uit. Laten we de twee modules naast elkaar plaatsen.

  • Bewerk je artikel en schakel je editor over naar de codeweergave. Mocht je problemen ondervinden, raadpleeg dan deze tutorial.

    part 4 tutuploadstutuploadstutuploadsmedia 1335916743821

  • Een van de beste manieren om deze naast elkaar zetten is het gebruik van de div-tags. Maak een wrapper, en plaats twee meer divs binnenin de code. Plaats daarvoor je loadposition/loadmodule code binnen de div-elementen.

    part 4 loadposition code

  • Dit is hoe het artikel ziet eruit als in de editor weergave

    Part 4 tutuploadstutuploadstutuploadsmedia artikel

  • Dit ziet er al beter uit aan de front-end zijde van je website, toch?

    Part 4 tutuploadstutuploadstutuploadsmedia result

Als je weet hoe je stijlen met CSS kunt toepassen met inlinestijlen of classes, dan kun je het uiterlijk nog verder naar eiegen wensen aanpassen. Je kunt de positie van deze kleur voorzien, aanvullende teksten en foto's en nog meer zaken toevoegen.

 


 

Vertaald uit bron: https://www.joomlashack.com/blog/joomla/loadposition-loadmodule/