Wrapppers

wrappers are

Add an mp3 Player

We are going to use the JosDewPlayer plug-in to insert a simple mp3 player into our articles. Install it using the Extension Manager pasting the following URL into the Install From URL field.

davejulian.net/joomla/resources/josdewplayer_for_1.7.zip

Or download it HERE

Go to Extensions - plug-in manager and use the filter lists (filter for Type - Content and/or Status - Disabled) to find the JosDewPlayer. Click on it to open it.

Select Status Enabled and read the description. Click Save and Close

Now we need to create a folder for our mp3 files. Go to Content - Media Manager and scroll down to below the files pane.The Media Manager (unless told otherwise) considers its root folder to be the images folder (forget that it is called images, it should really be called 'media). So all folders will be created inside the images folder. 

Type a name for your folder (eg mp3s) in the text box on the right and click Create Folder. The folder should now appear in the files pane. Click on it to open it. 

Unfortunately Joomla's media manager does not allow uploading mp3 files by default so we need to add 'mp3' to the list of uploadable file types.

Open the Media Managers Options window. In the Legal Extensions (File Types) text box there is a comma separated list of file type extensions. Insert ' mp3, ' (without the quotes) into the beginning of this list. Don't forget the comma. Click Save and  Close.

menmanopt


Ensure your folder is open in the files panel (it should be empty except for the green navigation icon) Click Choose File in the bottom panel of the  Media Manager to browse for your mp3 file. Click start upload. Your file should appear in the files panel.

medmanfu

The only thing to do now is place the tag that will tell Joomla to embed the player into the page.

Open the article for editing and place the following tag where you want the player.

{play}images/mp3s/yourfile.mp3 {/play}

Note you need to write the full path to your directory (include the ' images/ ') and replace ' mp3s/yourfile.mp3 ' with the folder and mp3 file you created earlier. 

Save the article and an mp3 player, like the one below, should appear.

 

 

Add an Image Gallery

In this tutorial we will be using the Simple Image Gallery plug in. Note that this is a plug-in not a module. It is not displayed in module positions but embedded directly into articles. It displays folders of images as thumbnail galleries with each thumbnail opening in a light box.

It is installed like all other extensions, from the extension manager. Copy and paste the following URL after the http:// into the Install from URL Field.

davejulian.net/joomla/resources/plg_jw_simpleImageGallery-v2.2_j1.6.zip

Alternatively, of course you can use the download from the Extension Directory HERE

Now we need to create a folder of images for the plug-in to display. To do this we can use Joomla's Media Manager. (or you can use an FTP program such as Filezilla if you prefer). 

Go to Content-Media Manager. At the bottom of the right hand file pane (you may have to scroll down to view it) there is the path to Joomla's image folder, something like /home/yourAccount/public_html/images

To the right of this there is a text box. Type the name of the folder you would to use as this gallery. (eg 'Landscapes') and click Create Folder. 

medman2


The folder should now appear in the files window. Click on it to open it. Now you can upload images  by clicking Choose File and then Start Upload. Repeat this process for each image you want too include in your gallery. 

Now we need to configure the Simple Image Gallery plug-in. 

Go to Extensions/Plug-in Manager. We can filter by Type - Content and Status - Disabled, (or we can simply scroll through the list of plug-ins) to find the Simple Image Gallery by JoomlaworksClick on it to open its editing window.

simpImGal

Set Status to Enabled. Ensure the Root folder for image galleries is set to images. Set the thumbnail size and choose to hide or show navigation and caption messages. (unfortunately you need to pay for the pro version to include customised captioning).

When your finished press save

Finally we need to insert the tags that will tell the article to display the gallery.

Open or create the article where you want to insert the gallery. Place the following text in the article where you want the gallery to display:

{gallery}yourfolder {/gallery}

 Of course substitute 'yourfolder' with the name of the folder you created in the media manager (eg'landscapes) and don't forget the '/ ' in the closing tag.

With a bit of luck you should now see your image gallery displayed like the one below.

{gallery}landscapes{/gallery}