UPF Joomla Tutorials

The Frontpage

Part 1

Built in Front Page Options

The Front Page is unique in Joomla, you can make layout changes by going into the main menu and clicking on the “Home” entry.

NOTE: Do not delete the Home entry, or make another entry default. Keep it as the first item on the main menu.

Below are the settings fror Parameters – Basic section on the right.

1. Leading: The Number of Articles to display as a leading article, this will use the full width of the content area on the front page
2. Intro: Additional articles that come after the Leading article(s). These do not necessarily take the full width of the content area (width set by columns)
3. Columns: This will set how many columns are used for the Intro Articles, ie determines width of intro articles.
4. Links: Number of articles to display as links

As you can see below I have 1 Leading article, 2 intro articles in 2columns, and 2 linked articles.

Part 2

Updating the Frontpage

If you add an article and want it to be displayed on the Front Page, open your article in the editor and under the Front Page radio option, select “yes”. This can also be done on the article list in the article manager.

Once published on the Front Page the article will become the Leading Article and the previous articles on the Front Page will be moved down.

Use of the “Read More…” break

If the article is too long for the front page, go into the editor and select a breakpoint using the cursor and click on the “Read More..” button and save.

Now the Article stops at the “Read More..” break in the article. If the link is clicked, the user will be taken to the article page. NOTE: If you insert the break inside a table, the “Read More..” break (and page break) will interrupt the table and cause unexpected display errors.

Remove an Article on the Front Page

Just as you can add an article on the Front Page you can remove it the same way: Open your article in the editor and under the Front Page radio option, select “no”. The article will remain published on your site as long as the radio option for “published” remains “Yes”

Reordering the Front Page Articles

To reorder the articles on the Front Page go to “Content” -> “Front Page Manager”. Here you can reorder the articles

UPF Joomla Tutorials

If you are Locked Out from Editing

Locked Out

Since joomla allows for multiple users to edit articles, menus, etc. It will "lock out" other users from editing an article that is currently being edited to avoid two people working on the same article at the same time.

These locks will remain in place until you click on either "Save" or "Close" because Joomla will assume that the article is still being edited by someone.

We strongly discourage the use of the "Back" button when in the Joomla environment.

You, as an administrator, CAN remove these locks by logging into the administrator side and going to "Tools" -> "Global Check-in". This will unlock the locked items. CAUTION: However if someone is currently editing an article, their work will be lost.

UPF Joomla Tutorials

Video Plugin - Mgmedia

Videos, mgmediabot2 Plugin

http://www.needful.de/mgmediabot-demo

To get videos to play as on the UPF international site:
First prepare your video for web streaming (recommended Flash FLV format).
Upload your video onto your server via the media manager or FTP.
Use the mgmediabot2 plugin to show the video (explained below)

To play a Flash movie to play within an article use the following code below in your article:

Flashplayer

{mgmediatut}path=images/tutorials/194.flv|width=480|height=400|displayheight=360|
overstretch=false|title=test title|autoplay=false|image=images/tutorials/video194.jpg{/mgmediatut}

Note: this is one line
If the editor adds HTML code to your plugin line the video will NOT play! Make sure there is no html embedded in the plugin code.

Inserting the above into an article displays:

{mgmediabot2}path=images/tutorials/194.flv|width=480|height=400|displayheight=360|overstretch=false|title=test title|autoplay=false|image=images/tutorials/video194.jpg{/mgmediabot2}

The plugin code:

{mgmediatut} and {/mgmediatut} are the start and end tags of the plugin.

The plugin uses the pipe character “|” (usually above the enter key as “shift-\” in a qwerty keyboard) to separate parameters.

Parameters:
path: the path to your movie (can be offsite, eg http://www.somedomain/movie.flv)
width: width of player
height: height of player
displayheight: video play area within the player (extra space is devoted to the player controls), if displayheight is equal to the height, the play controls will be shown over the video.
overstretch: determines behavior of height/width proportions (I found false to be best)
title: title
autoplay: if true, video will play automatically, false will not play the video automatically
image: path to image which is shown before the video is played, otherwise will show black background with a play button

If displayheight = height

{mgmediatut}path=images/tutorials/194.flv|width=480|height=400|displayheight=400|
overstretch=false|title=test title|autoplay=false|image=images/tutorials/video194.jpg{/mgmediatut}

{mgmediabot2}path=images/tutorials/194.flv|width=480|height=400|displayheight=400|overstretch=false|title=test title|autoplay=false|image=images/tutorials/video194.jpg{/mgmediabot2}

Lighbox Option

Lightbox will “pop open” the video on the page in a transparent iframe(?). This affect makes the video appear to float on the page.

{mgmediatut}path=images/tutorials/194.flv|lightbox=true|lightboxcaption=Quest for Peace|
width=480|height=400|displayheight=400|overstretch=false|title=test title|
image=images/tutorials/video194.jpg|autoplay=true{/mgmediatut}

{mgmediabot2}path=images/tutorials/194.flv|lightbox=true|lightboxcaption=Quest for Peace|width=480|height=400|displayheight=400|overstretch=false|title=test title|autoplay=true{/mgmediabot2} (Click here)

Parameters (new):
lightbox: set to true for this effect (or any)
lightboxcaption: the text to click to open the video

Note: Parameter order does not matter.

To open with an image add the parameter ‘lightboxpreview’

{mgmediatut}path=images/tutorials/194.flv|lightbox=true|lightboxcaption=Quest for Peace|
title=Quest for Peace|width=480|height=400|displayheight=400|overstretch=false|
image=images/tutorials/video194.jpg|autoplay=true|
lightboxpreview=images/tutorials/videovid-lightbox-sample.jpg{/mgmediatut} 

{mgmediabot2}path=images/tutorials/194.flv|lightbox=true|lightboxcaption=Quest for Peace|title=Quest for Peace|width=480|height=400|displayheight=400|overstretch=false|autoplay=true|lightboxpreview=images/tutorials/videovid-lightbox-sample.jpg{/mgmediabot2}

Parameters (new):
lightboxpreview: path to image

Google and Youtube

Google video:

In the Google URL find the docid variable and use that number/text in the mgmediabot plugin as below

http://video.google.com/videoplay?docid=6634817287115134475&q=iphone
&total=32583&start=0&num=10&so=0&type=search&plindex=5

From this google video, docid=6634817287115134475

{mgmediabot2}type=googlevideo|docid=6634817287115134475{/mgmediabot2}

(Notice the changes to the parameters below)

Play in article
{mgmediatut}type=googlevideo|docid=6634817287115134475{/mgmediatut} 

Lightbox
{mgmediatut}type=googlevideo|docid=6634817287115134475|lightbox=true|
lightboxcaption=My Video|lightboxpreview=images/stories/myvideothumb.jpg|width=400|height=326{/mgmediatut}

Popup
{mgmediatut}type=googlevideo|docid=6634817287115134475|popup=true|
popupcaption=My Video|popuppreview=images/stories/myvideothumb.jpg|width=400|height=326{/mgmediatut}

Youtube video:

For YouTube, in the URL look for the text after the “v” variable.

http://youtube.com/watch?v=m71zgjtBaag

For the above link, v=m71zgjtBaag

{mgmediabot2}type=youtube|youtubeid=m71zgjtBaag{/mgmediabot2}

(Notice the changes to the parameters below)

Play in article
{mgmediatut}type=youtube|youtubeid=m71zgjtBaag{/mgmediatut} 

Lightbox
{mgmediatut}type=youtube|youtubeid=m71zgjtBaag|lightbox=true|lightboxcaption=My Video|
lightboxpreview=images/stories/myvideothumb.jpg|width=486|height=412{/mgmediatut}

Popup
{mgmediatut}type=youtube|youtubeid=m71zgjtBaag|popup=true|popupcaption=My Video|
popuppreview=images/stories/myvideothumb.jpg|width=486|height=412{/mgmediatut}

Additional Player formats

WMV Player
{mgmediatut}path=images/stories/media/video1.wmv|width=300|height=300{/mgmediatut}
{mgmediatut}path=images/stories/media/video1.wmv|lightbox=true|lightboxcaption=My Video|
lightboxpreview=images/stories/myvideothumb.jpg|width=300|height=300{/mgmediatut}
{mgmediatut}path=images/stories/media/video1.wmv|popup=true|popupcaption=My Video|
popuppreview=images/stories/myvideothumb.jpg|width=300|height=300{/mgmediatut}

Quicktime Player
{mgmediatut}path=images/stories/media/video1.mov|width=300|height=300{/mgmediatut}
{mgmediatut}path=images/stories/media/video1.mov|lightbox=true|lightboxcaption=My Video|
lightboxpreview=images/stories/myvideothumb.jpg|width=300|height=300{/mgmediatut}
{mgmediatut}path=images/stories/media/video1.mov|popup=true|popupcaption=My Video|
popuppreview=images/stories/myvideothumb.jpg|width=300|height=300{/mgmediatut}

MPEG Player
{mgmediatut}type=mpegfile|path=images/stories/media/video1.mpg|width=300|height=300{/mgmediatut}
{mgmediatut}type=mpegfile|path=images/stories/media/video1.mpg|
lightbox=true|lightboxcaption=My Video|lightboxpreview=images/stories/myvideothumb.jpg|
width=300|height=300{/mgmediatut}
{mgmediatut}type=mpegfile|path=images/stories/media/video1.mpg|
popup=true|popupcaption=My Video|popuppreview=images/stories/myvideothumb.jpg|
width=300|height=300{/mgmediatut}

More information can be found at:
http://www.needful.de/mgmediabot-demo/components/com_mgmedia2/templates/Templates-Readme.html

UPF Joomla Tutorials

Creating a Flash Photo Slideshow with JetStudio

A simple, intuitive way to optimize your photos and create a display a series of images on your computer screen or website. 

1. Download free JetPhoto Studio software from www.downloads.com and install it on your computer. 

(From the publisher: http://www.jetphotosoft.com/web/?s=downloads )

For PC

http://www.download.com/JetPhoto-Studio/3000-12511_4-10457543.html?tag=lst-1

For Mac

http://www.download.com/JetPhoto-Studio/3000-2198_4-10364538.html?tag=lst-2 

2. Create a file folder with the name of your event or theme and put photo files in the folder. The photos must have a .jpg extension, and the names can contain only letters and numbers. 

3. Open JetPhoto Studio, click on <file> in the JetPhoto Studio menu bar on the top of your screen and on the drop-down menu click on <Convert photo to album>. Find the folder you created in the window and click on it. 

4. Photos will appear as thumbnails. Click on <Detail> on the menu at the top of your JetPhoto Studio window to see a large view of an individual photo; decide if you want to use it and if it needs editing. You can use the drop-down options on the <Image Process> menu, including <Crop> to eliminate distracting elements of the image, <Auto Enhance Image> for one-step optimizing, and <Adjust Image> for customizing color balance and contrast. Move through the sequence of photos with the arrow keys on the top left of the window JetPhoto Studio window. 

5. Click on the <Thumbnails> option on the top of the JetPhoto Studiowindow to see small images. Delete images you don’t want by clicking on them and using Ctrl/Cmd+Delete. Click on any image you want to move, and drag and drop it into the desired location. With the thumbnail view open, you can drag and drop photos from elsewhere in the computer into the your show. Switch back and forth between the <Detail> and <Thumbnail> views until you have the images you want in the sequence you want. 

6. To make a flash show of images rotating in sequence at 3-minute intervals, make sure no image is highlighted. On the JetPhoto Pro menu bar, click on <Create & Share> and choose <Make Flash Menu> from the pull-down menu. It will create a flash show on your desktop. Click on the <Preview> option to check your show. If you want to make further changes, repeat the above steps. The are other options, such as uploading the show to Flickr. 

7. Find the slide show on your desktop and click on it. It may open automatically if you have Quicktime, Macromedia, or Flash. If it does not play, download a free FLV Player from downloads.com:

http://www.download.com/FLV-Player/3000-2139_4-10467081.html?tag=toprated 

8. You can show people the flash show on your computer screen, email it, and load it to your website. 

9. Have fun!

UPF Joomla Tutorials

Creating Readouts

[UPF Template 4.2+]

To create a readout first go to your editor, and insert and select the text you wish to use as a readout.

Select either style readout-right or readout-left to create your readout

Save and view

UPF Joomla Tutorials

Align an Image

To align your image left or right, and to get the text to flow around the image, do the following:

Click on the Image button in the editor to select an image

After you have selected your image, in the “Align” dropdown menu select “left” or “right”

to align the image left or right.

Insert your image

Save and View.
 

For Existing Images

 

Select the exiting image, click on the image edit icon. A new window will pop up, select the

Appearance tab, select Left or Right in the Alignment dropdown.

UPF Joomla Tutorials

Steps to Add an Article

1. Receive prepared article for website
2. Images
   1. Resize images using your favorite image editor
   2. Upload into the Media Manager
3. Create new article in Joomla
4. Add Title (recommended 37 character limit)
5. Select Section and Category
6. Remove text formatting [Recommended step – helps with style formatting by stripping unnecessary formatting]
   1. Copy and paste article text into an ASCII Text editor (if not already) to remove formatting
   2. Copy and paste from text editor into Joomla Editor
7. Apply web styles to the article (headers, font size, etc)
8. Add images
9. Add More and Page Breaks
10. Select “yes” for frontpage if article is to be seen on the frontpage
11. Add a Meta-tag Keyword
    1. For use with the Related / Additional Article Module (Keywords must be consistent for this module to work correctly)
    2. For website search engines
12. Save
13. View and check that your article is correct

UPF Joomla Tutorials

UPF Joomla Tutorials PPT Downloads

Articles and Structure

• category.ppt
• sections.ppt
• media_manager.ppt (upload an image/file)
• add_new_article.ppt
• editor.ppt
• add_images.ppt (to article)