Dag 19: Video's invoegen (youtube, vimeo)

Gisteren hebben we de WYSIWYG editor geïnstalleerd maar standaard ontbreken er nog een aantal functies die je regelmatig nodig zult hebben. Want hoewel we een afbeelding kunnen toevoegen is er geen manier om deze gemakkelijk te uploaden. Verder is er nog geen mogelijkheid om een video in te voegen en zou het handig zij om interne links, links naar andere artikelen op de website, te kunnen plaatsen zonder dat we de exacte URL te weten.

Een media browser kiezen

Voor het uploaden van afbeeldingen zijn er een aantal opties, met Media en IMCE als meest gangbare. IMCE is speciaal gericht op afbeeldingen en intrigeert goed met de afbeeldingen knop die al aanwezig is in FCEditor. Ten opzicht van Media heeft IMCE iets meer mogelijkheden om de opmaak van een afbeelding te bewerken en is de file browser wat uitgebreider met opties voor het aanmaken of verwijderen van folders en bestanden.

Wij kiezen echter voor de Media module omdat we daarmee twee vliegen in 1 klap slaan: de module laat ons namelijk afbeeldingen en video's uploaden. Daarbij is Media uit te breiden met de mogelijkheid om YouTube filmpjes en filmpjes van andere media diensten in een bericht te plaatsen. De media module voegt een extra knop toe aan de editor. De standaard knop voor afbeelding wil je wellicht toch aanhouden zodat je iets meer controle behoudt om afbeeldingen op te maken (hoewel het mijn inziens de voorkeur heeft om dit via de CSS te doen).

Mocht je dat willen dan kun je probleemloos beide modules installeren en ze naast elkaar gebruiken. (Voor IMCE heb je in dat geval ook IMCE WYSIWYG bridge nodig. Na installatie van beide modules kun je IMCE activeren als knop onder de CKeditor instellingen (Buttons and Plugins).

Modules

Het grootste karwei voor vandaag is het installeren en activeren van benodigde modules, deze drie moet je downloaden:

Youtube en Vimeo dekken in 90% van de gevallen je wensen, maar wil je nog meer video diensten ondersteunen dan vind je hier een lijst van mogelijke uitbreidingen. Om meerdere bestanden tegelijk te kunnen uploaden moet je PLupload installeren.

Wanneer je zover bent kun je de modules activieren:

De knop activeren

Ga net als gisteren naar Instellingen > WYSIWYG profiles. We hoeven de media knop alleen maar voor beheerders en redacteurs te activeren, klik daarom achter het Full HTML profiel op bewerken. 

Als het goed is, is er onder Buttons & Plugins een extra optie bijgekomen, namelijk Media Browser. Vink deze aan.

De administrator heeft standaard het toegansrecht "Add media from remote services". Aan andere gebruikersrollen zul je dit recht handmatig moeten toekennen, zoals je weet ga je daarvoor naar Personen > Toegangsrechten.

Ga ter controle naar Instellingen > Tekstopmaak en klik achter het profiel (of de profielen) waarvoor het invoegen van video's ingeschakeld moet zijn op bewerken. Onder het kopje Ingeschakelde Filters ga je na of Convert Media tags to markup is aangevinkt.

Een video invoegen

Maak nu een nieuw item aan (Inhoud > inhoud toevoegen). Er is een knopje bijgekomen, diegene met het berg op een licht blauwe achtergrond.

Klik je hierop dan heb je de mogelijkheid om een afbeelding of video te uploaden. Wil je een Youtube of Vimeo URL embedden dan ga je naar Web en vul je daar de URL in (dus niet de embed code, gewoon de URL in de adresbalk).

Na het invoegen van de video zie je alleen een stilstaande snapshot, pas nadat je het bericht hebt opgeslagen kun je de video afspelen.

Om een eerder geuploade afbeelding of video in te voegen ga je naar Library.

Video field

Wil je video's niet in een artikel zelf, maar in een apart veld plaatsen dan kun je Embedded Media Field installeren. Het voordeel hiervan is bijvoorbeeld dat je met Views de mogelijkheid hebt om een pagina te maken met een overzicht van alle video's op jouw website. Of op een muziek website een artiesten pagina voorzien van een blok naast het artikel met daarin video's van de desbetreffende artiest.

Het komt er vaak op neer dat wanneer een bepaalde type content de kern vormt van jouw website, dat je deze content dan het beste gescheiden kunt houden met een eigen veld. Gaat het alleen om af en toe een leuk filmpje in een nieuwsbericht dan is het beter om een knop toe te voegen aan de WYSIWYG editor.

Interne links

Als laatste gaan we het knopje om een link toe te voegen uitbreiden met interne links . Dit is kwestie van de CKeditor Link module installeren, activeren en aanvinken onder het juiste CKeditor profiel (Buttons en Plugins, rechtsonderin).

 

Wanneer dit is gebeurd klik je op de knop om een link toe te voegen.

 

Daarna vul je de titel in van de pagina waarnaar je wilt linken, auto-aanvulling doet de rest.

Standaard link je nu naar een intern pad. Wil je dit wijzigen, en bepalen welke content types allemaal beschikbaar moeten zijn in de auto-aanvullen optie, dan ga je naar Instellingen > CKEditor Link (te vinden onder het kopje Inhoud Samenstellen).

Slot

Voor elk probleem of elke behoefte biedt Drupal meestal meerdere oplossingen. Kies je voor een veld of een uitbreiding van de tekst editor? Ga je voor IMCE of de mediabrowser? Installeer je BUEditor, de WSYIWYG module of CKEditor als standalone? Al die opties zijn leuk, maar voor beginners tamelijk verwarrend. En dan is er ook nog zoiets als meerdere profielen en het handmatig, stuk voor stuk, toewijzen van knoppen.

Veel mensen haken door deze romslomp af, maar jij gelukkig niet. En als je met een probleem zit durf je ook nog eens te vragen om hulp. Toch?

Overigens, in Drupal 8 zal naar alle waarschijnlijkheid standaard een tekst editor aanwezig zijn met een goede file browser, in ieder geval zal het een stuk minder omslachtig zijn om er eentje te installeren die aan de meeste eisen voldoet.

Waarom eigenlijk niet wachten op Drupal 8? Omdat het nog meer dan een jaar, of misschien wel twee, zal duren voordat Drupal 8 het licht zal zien. Daarbij zullen Drupal 7 en 8 in grote lijnen met elkaar overeenkomen, het volgen van deze tutorial geeft je een grote voorsprong mocht je straks met Drupal 8 gaan werken, aangezien de basis principes ongeveer hetzelfde blijven.

Laatst gewijzigd op: