Dag 17: Filmpjes toevoegen

Elke redacteur wil of moet wel eens een YouTube filmpje toevoegen. Natuurlijk kan dit met Joomla, maar het is wel net iets ingewikkelder als het in eerste instantie klinkt, want er moet wel het een en ander gebeuren. Vandaag gaan we een nieuwsbericht aanmaken waar je een zelf te kiezen YouTube filmpje in gaat zetten. Daarvoor moeten we wel eerst onze WYSIWYG editor aanpassen, oftewel, de knoppenbalk bovenaan het body veld.

De video URL kopiëren

Ga allereerst naar YouTube om een filmpje uit te kiezen.

url kopieren

Wanneer je er eentje hebt gevonden, kopieer je de volledige URL. Dus niet de insluitcode, zoals je misschien gewend bent.

Filtertype controleren

Onze volgende taak is het controleren van de tekstfilters. Bepaalde HTML elementen worden uit veiligheid automatisch uit een bericht gestirpt door Joomla. Het IFRAME element waarin een YouTube filmpje wordt geladen, staat ook op deze zwarte lijst.

Aangezien Joomla geen enkele controle heeft over iets wat binnen een IFRAME wordt geladen is deze veiligheidsmaatregel terecht, maar voor gebruikers die je vertrouwd mag je ervan uitgaan dat ze hier goed mee om gaan. 

algemene-instellingen-geen-filter

Ga naar Algemene instellingen en kijk dan onder het tabblad Tekstfilters.

Hier krijg je een overzicht te zien van alle rollen en hun corresponderende actieve filters. Voor jou, de Super User is als het goed is de optie Geen filter geselecteerd.

Wil je dat ook Auteurs, Editors en Publishers filmpjes kunnen plaatsen, pas hun filtertype dan ook aan. Nogmaals: doe dit alleen wanneer je deze gebruikers 100% kunt vertrouwen en alleen voor rollen die handmatig toegewezen moeten worden, dus zeker niet voor de Registered rol wanneer je hebt ingesteld dat bezoekers zich automatisch en zelfstandig kunnen registreren.

Klik tot slot op Opslaan & sluiten.

De teksteditor instellen

De volgende stap is het instellen van de teksteditor, ook deze heeft namelijk een beveiliging om IFRAME gebruik tegen te gaan.

pluginbeheer

Ga naar Extensies > Pluginsbeheer en kies onder Filter: bij het -Type- veld voor editors.

Klik vervolgens op Tekstverwerker - TinyMCE om de opties van deze plugin aan te passen. 

plug1

Ga dan naar het Basis opties tabblad en kies achter het veld Functionaliteit voor Uitgebreid.

Dit zorgt er voor dat er extra knoppen zichtbaar worden in de teksteditor bovenaan het body veld, waaronder een knop om filmpjes toe te voegen.

Welke knoppen wel of niet beschikbaar zijn kun je eventueel nog verder beheren onder het Uitgebreide parameters tabblad.

plug2

Verder naar onderen verwijder je Iframe uit de lijst met verboden elementen. Klik vervolgens op Opslaan & Sluiten.

Nu alle blokkades zijn opgeheven kunnen we eindelijk een YouTube filmpje invoegen.

De video invoegen

 Ga naar Inhoud > Artikelen > Nieuw artikel toevoegen.

nieuw-art-film-invoegen

Verzin een titel en een body tekst en plaats het artikel in de categorie Nieuws.

Als het goed is, zie je nu ook de extra knoppen, waaronder de hierboven aangegeven knop om een filmpje toe te voegen. Klik hierop. 

urlinvoegen

In de pop-up die nu in beeld komt plak je in het File/URL veld de URL van het YouTube filmpje.

Het type, Iframe, wordt automatisch herkend.

Voordat je op Insert drukt, kijk nog heel even onder het Advanced tabblad. 

Marges instellen voor videos en afbeeldingen

Stel je wilt het filmpje links van de tekst tonen en je wilt niet dat de tekst direct tegen het filmpje 'aanplakt'. In dat geval moet je een marge instellen, in de context van een afbeelding ook wel V-space (verticale ruimte) of H-space (Horizontale ruimte) genoemd.

advanced-filmje

Onder het Advanced tabblad kun je de waardes voor marges bepalen. De Alignment bepaalt of het filmpje gecentreerd, links of rechts wordt weergegeven.

Tip: De resultaten zie je direct weergegeven onder het Source tabblad, dit is de uiteindelijk code die op de pagina komt en die verwerkt wordt door de webbrowser. Je ziet hier dus ook de [iframe] element dat rondom de URL van het filmpje wordt geplaatst.

Ok, klik nu op InsertHet filmpje zie je nog niet, dat klopt, deze komt pas tevoorschijn wanneer je het bericht opslaat en op de website zelf bekijkt.

margin-right

Het kan zijn dat het Iframe element niet goed omgaat met de V-Space die je hebt ingesteld. Om dit op te lossen bewerk je nogmaals het nieuwsbericht en klik je op de knop HTML.

Ook deze geeft de HTML Source weer, de kale broncode die jij via de interface van Joomla continue aan het bewerken bent, welliswaar op een gebruikersvriendelijke manier.

We maken hier een keer een uitzondering op en gaan zonder tussenkomst van een knopje wat code toevoegen om toch de marge voor het filmpje erin te krijgen.

Zoek in de broncode naar het begin van de iframe code. Plaats dan direct achter 'iframe' en voor 'src=..' de volgende tekst: "style="margin-right:20px" (inclusief de aanhalingstekens).

Sla alle wijzingen op en als het goed is zie je nu een mooie marge naast het filmpje.

Tip: voor een groterere marge kies voor bijvoorbeeld voor 30px, een kleinere 10px, etc.

overzicht

Laten we, nu we toch bezig zijn, gelijk de marge van de afbeelding in het andere nieuwsbericht aanpassen.

Ga via de contentbeheer pagina naar de bewerkpagina van dit nieuwsbericht. 

imagebewerk

Selecteer nu de afbeelding die je wilt bewerken en klik op het afbeelding-icoontje afb-icoon

img-eigenschappen

Ook hier kun je weer in het Advanced tabblad een uitlijning en een horizontale of verticale marge instellen. Het resultaat zie je direct onderaan in het Style field.

Voor afbeeldingen werkt de marge voor zover ik weet wel goed, dus je hoeft dit niet via de broncode aan te passen. 

Slot

Vandaag heb je niet alleen geleerd hoe je een filmpje toevoegd, ook heb je ervaring opgedaan met het beheren van de teksteditor en zelfs nog een stukje HTML code geschreven!

Je kunt nu ook filmpjes van andere bronnen toevoegen, zoals Vimeo. Dit gebeurd op exact dezelfde manier: gewoon de URL plakken in het File/URL veld.

Laatst gewijzigd op: