Dodawanie mediów MP3, filmów, dokumentów do JOOMLA

 

Z artykułu dowiesz się jak wstawić plik muzyczny oraz dokument typu PDF do artykułu JOOMLA. Do obsługi Joomla zalecamy przeglądarkę Firefox. Aby wgrać pliki muzyczne przez MEDIA MANAGERa na serwer musimy spełnić pewne wymogi. W zapleczu (MEDIA > USTAWIENIA > KOMPONENT) ustawione DOZWOLONE ROZSZERZENIA:

bmp,csv,doc,gif,ico,jpg,jpeg,odg,odp,ods,odt,pdf,png,ppt,swf,txt,xcf,xls,BMP,CSV,DOC,GIF,
ICO,JPG,JPEG,ODG,ODP,ODS,ODT,PDF,PNG,PPT,SWF,TXT,XCF,XLS,MP3,mp3,wav,WAV,mp4,MP4,mpeg,MPEG

Dozwolone MIME TYPES:

image/jpeg,image/gif,image/png,image/bmp,application/x-shockwave-flash,application/msword,application/excel,application/pdf,application/powerpoint,text/plain,application/x-zip,audio/mpeg3,audio/x-mpeg-3,video/mpeg,video/x-mpeg,audio/wav,audio/x-wav

Jeśli możemy wgrać plik MP3 na serwer, to najprawdopodobniej mamy w/w ustawienia poprawnie skonfigurowane.

Jak najszybciej wstawić plik MP3 do artykułu Joomla 3?

Najszybszy sposób na wstawienie MP3 to w trybie edycji KODU dodanie znacznika HTML5. Nie wymaga instalacji żadnego rozszerzenia i korzysta z języka HTML5. W trybie edycji kodu w artykule dodajemy w odpowiednim miejscu kod i odpowiednie linki do plików muzycznych:

<audio controls>

  <source src="/images/uploads/muzyka/Kalimba.mp3" type="audio/mpeg">

  <source src="/images/uploads/muzyka/Kalimba2.mp3" type="audio/mpeg">

  <source src="/images/uploads/muzyka/Kalimba3.mp3" type="audio/mpeg">

</audio>

Efektem końcowym wstawienia takiego kodu jest wygenerowanie playera w obrębie strony i możliwość puszczania plików muzycznych wprost z własnej strony internetowej w treści artykułu bez otwierania dodatkowych okien.

Wstawianie plików muzycznych przy użyciu edytora JCE w Joomla.

Drugi sposób to skorzystanie z mechanizmów wbudowanych w edytory artykułów. Dodawanie nie wymaga znajomości kodu HTML i programowania. Wymagane: zainstalowane JCE editor, jce MediaBox. 

Wgrać plik na serwer możemy na kilka sposobów. Opiszę tutaj MEDIA MANAGER. W górnym menu na zapleczu administracyjnym otwieramy ARTYKUŁY > MEDIA MANAGER.

media plik mp3

Wybieramy folder do którego mają zostać wgrane zdjęcia, pliki muzyczne, dokumenty. Następnie klikamy zielony guzik WCZYTAJ a następnie WYBIERZ PLIKI. Wybieramy pliki z dysku naszego komputera i jak już zakończymy klikamy ROZPOCZNIJ WCZYTYWANIE. Po chwili pliki znajdują się na serwerze.

O czym warto pamiętać? Każdy system posiada limit wielkości pliku jaki może obsłużyć. Jest to ustawiane na koncie hostingu i wynika z ograniczeń PHP. Nie należy używać polskich liter, spacji i znaków specjalnych w nazwach plików.

Po wgraniu pliku. Otwieramy ARTYKUŁY z widoku artykułów wybieramy ten który chcemy edytować klikając na jego nazwie. Po wejściu do artykułu ustawiamy kursor tam, gdzie chcemy wstawić pliki, wpisujemy nazwę pliku np. plik.mp3 następnie zaznaczamy to słowo i klikamy ikonę wstawiania linka zaznaczoną na poniższym obrazku.

wstawianie obrazka joomla mp3

Pojawi się nowe OKNO PIERWSZE w którym wybieramy ikonę oznaczoną na poniższym obrazku. Pozwoli nam to utworzyć link do pliku w bibliotece mediów.

wstawianie pliku dzwiekowego01

Po kliknięciu ikony wyskoczy kolejne okno (OKNO DRUGIE) w którym wybieramy plik. W naszym przypadku Kalimba.mp3. Klikamy na nazwie i następnie na guzik INSERT.

 

wgrany plik mp3 joomla2

I jak zamknie się okno DRUGIE to w OKNIE PIERWSZYM klikamy na zakładce POPUPS gdzie wybieramy z rozwijalnej listy JCE POPUPS i zatwierdzamy wybór klikając INSERT.

jce media popups

Efekt użycia edytora JCE i JCE POPUPS jest taki, że po kliknięciu słowa otwiera nam się okno w którym powinniśmy zobaczyć film, media player do otworzenia pliku dźwiękowego itp. Opisujemy tutaj metodę bazującą na najbardziej aktualnej wersji edytora JCE. Jeśli dla kogoś taka metoda jest trudna, to może opanować wstawianie kodu źródłowego.

Jak podejrzeć kod źródłowy w artykule Joomla

Jak podejrzeć kod źródłowy w edytorze JCE Joomla i sprawdzić to co wstawiliśmy, albo wkleić znaczniki HTML5, kod Youtube o których pisaliśmy w prostej wersji wstawiania mediów?

podglad kodu html