Joomla Manager

Accessing and navigating the Joomla Admin • Articles • Images • Uploading Images • Components

ACCESSING JOOMLA ADMIN

1. In your browser (avoid Internet Explorer) open your homepage in two different windows so you can view your website and access Joomla
2. Add to the end of one of the urls the following: /administrator
3. Log into Joomla with your username and your password

NAVIGATING JOOMLA ADMIN

To begin, choose from the main menu running vertically or horizontally from the top left.

The "Content" Menu:
• "Articles" make up the content of the website. To find an article, use the search box, click a heading to sort the list, or use the Search Tools to limit the list by category. 
• "Categories" are created to organize articles.
• "Featured Articles" are content designated for the home page
• "Media" stores image files that can be organized with folders

The "Menus" Menu 
• "Main Menu" is structured to display the website’s top horizontal navigation.
• Listed individually are the menus displayed vertically on the website
• Choose "Manage" to create a new menu and sub menus

The "Components" Menu:
1. "Contacts" Component: Display contact information for the library and employees
• Provides a component to encrypt employee emails by using a message form
• "Categories" can be used to organize lists of employess by staff and trustee
• The Category "Description" field can be used to enter content above the list of employees (i.e. the library address, phone and hours)

2. "DJ Image Slider": A component to display rotating images. To get started contact Marsha at NWLS.
• The library's new releases can be displayed with book jackets that link to Merlin.
•  For more information see DJ Image Slider below

3. "RSEvents Pro!" component: Manages a unique display of events and programs. To get started contact Mike Sauvola at NWLS

page up

ARTICLES

Create an Article

1. Under Content select Articles 
2. Click the New icon
3. In the Title field insert the article title
4. Choose a Category
5. Select the Status (choose unpublished until it’s ready to display)
6. Select a Featured option (“Yes” will display the article on the front page)

Article Formatting Tools

Use the formatting tools above the content box to style articles. Style text by choosing from the Paragraph drop down menu the list of pre-formatted styles for the body and headings that create a consistent and uniform website design. 
• Text bold, italics, underline
• Heading and body format: Choose Paragraph for the body style. There are six heading styles.
• Bullets and Numbers
• Hyperlinks (to create a link to a web page)
• Anchors (to creating a link to a place on the current page, such as the top) • Picture editor (to position your image right or left and to insert a description
• Special symbols (such as ©)
• Tables

Copying Content from a Word Document

Paste content from other documents into Notepad and then paste it from Notepad to Joomla. content from another document directly pasted into Joomla will include unwanted formatting code that slows down access for visitors and replaces the default formatting from your template.  

Article Headings

First type all of the content of your article in the “Article Text” box. Next style headings by highlighting a heading and then selecting from the list under Paragraph.

Hyperlinks

To create a link to a website, highlight text and click on the link icon (it looks like a chain link) in the toolbar. Copy and paste the URL in the Link URL field.

To create a link to a PDF file, upload the pdf to Joomla Media Manager and then from the article, highlight the text or image you'd like to link from. Click the "link" icon in the toolbar and insert your website url with the images extension (http://nwls.wislib.org/images/) and add the name of the pdf to the end of the url (http://nwls.wislib.org/images/pdflink.pdf). NOTE: It's important to use a short lowercase one word title for your PDF.

Anchors

You can create a link to a place on your article where an anchor has been inserted. This article uses a list at the top to link to sections of the article:
1. Place your cursor at the beginning of the paragraph you'd like to link to 
2. From the toolbar select the anchor icon (looks like a book mark)
3. In the Anchor Name field a short descriptive title
4. Highlight the related menu text from the top of the page 
5. Click the link icon (looks like a chain) 
6. In the Anchors dropdown choose from the list of titles
7. Click the Insert button

Save an Article

Save your article (upper left) as you work on it (it may time out) and change the Status to Publish when it’s ready to be displayed.

page up

IMAGES

Images for Joomla need to have proper file name extension. Saving images as .jpg works for photos, and .gif works for illustrations. The quality of a .jpg image is compromised every time it is saved to the same name. Preserve the quality of your original image by making a copy with a different name. Images also need to be optimized (compressed file size) for the web in order to prevent them from loading very slowly. There are many websites that offer free image optimizing services. The total width of the website is 950 pixels wide and an article is about 500 pixels wide so an image used straight from your camera that is 2500 pixels wide will load very slowly and use up a lot of data on a mobile device. A general guide for image widths in pixels: 100 small, 200 medium, 500 large.

Image Editors 

Pixlr is a free and user-friendly online image editing tool (no registration needed) you can use for images stored on the web or on your computer. There is also a free Pixlr download for your desktop (Windows and Mac). Pixlr offers a unique blend of tools and features to craft and polish images and photos. Visit YouTube to watch the Pixlr Tutorial & Training series or view a Pixlr Image Editor tutorial (PDF) for beginners.

IrfanView is a free image editing program you can download. When you open images with IrfanView you’ll be able to optimize the size and use tools to crop, sharpen, adjust color, etc.

Flickr is a free service for managing and storing images on the cloud. Images uploaded in Flickr can be organized into albums and shared or kept private. 

Online image resources

There are many ways to find free images from the web, referred to as Public Domain Images. When visiting free photo sites, be aware of sections for paid advertisers displaying photos for sale. For more details visit thenextweb.com/dd/2014/05/15/53-free-high-quality-image-resources/#create 
• Bigfoto.com -  images from around the world you can search by theme.
• Bing Images -  Use the “license” menu to select public domain images
• Every Stock Photo: Click on an image and view the license restrictions.
• Flickr.com -  Read permissions: the copyright holder establishes the terms 
• freeimages.com: More than 350,000 photos
• freerangestock.com -  Access high quality images with a free registration
• FreeDigitalPhotos.net: Over 2000 images (can’t be sold, redistributed, claimed)
• freePhotosBank.com -  Images can't be sold and website must be credited.
• MorgueFile.com - Register to access over 55,000 images. Credit artist if possible.
• pexels.com - All photos on Pexels are free; licensed under the Creative Commons Zero (CC0) license.
• Picsearch.com -  Check the licensing terms before downloading. 
• Pixabay -  Users who do not register free can download using captcha code. 
• publicdomainpictures.net -  A brief signup is required. 
• stockvault.net: photo sharing website – no registration required. 
• SXC.hu -  Over 350,000 images and designs with terms established by artist. 

page up

UPLOADING IMAGES TO JOOMLA

Images are stored in the Content menu under Media. Images for articles can be first uploaded to the Media section. Then from your article the image can be inserted at the cursor:

From Joomla Media, upload an image from your PC

1. Click Media from the Content menu
2. You can open or create a folder for the image 
3. Click Upload and Browse to locate the image on your PC.
4. Click on the image and click the Open button.
5. Click the Start Upload button.

From an article, insert an image from the Joomla Media (in the Content menu)

1. Open an article and position your cursor. Click the Image icon in the toolbar
2. Navigate to locate your image in Joomla Media
3. Click the image 
4. Add an Image Description and click Insert
5. Click on the image in the article and position from the "align" tool bar

From an article, insert an image url from the internet

1. Select an image (i.e. from Bing.com) and choose to view it.
2. Right-click on the image and choose "Copy Image Address"
3. Open the Joomla article and position your cursor.
4. Select the Image button
5. In the Image URL field paste (Ctrl V) the URL and add an image description
6. Click the "Insert" button
7. Click the image and adjust the alignment (toolbar) and size 

From an Article, insert an image from your PC

1. From an article, position your cursor and click the Image icon from the toolbar 
2. You can select or create a folder for your image
3. Click the Browse button (bottom) to locate the image on your PC.
4. Click on your image and click the Open button.
5. Click the Start Upload button
6. Click on the image you just uploaded 
7. Click on the Insert button to insert the image into your article

Adjusting an image in your article

1. Select the image in your article to be adjusted 
2. Click on the image icon in the toolbar above (hover displays "Insert/Edit Image")
3. The General tab 
    • Adjust dimensions
4. The Advanced tab 
    • Add Vertical or Horizontal space (try 2) if the image is too close to the text. 
5. Click Update to save changes

page up

COMPONENTS

Some website functions require third party software to be installed with features for events, contacts and image sliders, etc., which may not be compatible with a Joomla upgrade. To enable a component that has suddenly disappeared from your website, contact NWLS or check if it's still enabled: Under Extensions choose "Plugin Manager" and choose from the list of components. Click the Enable button and save.

Image Slider - Displays a slideshow of images. A slideshow of new release book jackets can include links to Merlin.

Book Jacket Images
• Avoid using huge images that load slowly (Aim for a width under 300 pixels wide)
• You can use images that you upload to Joomla Media or you can use an image url from the web (avoid images from temporary sources).
• To use an image url, search the Web for a book jacket image - hover to view source and image size (less than 500 pixels wide). After selecting an image, right click on it and choose Copy Image Location.

Link image to Merlin
To link an image to your record in Merlin, click on Permanent Link from the Merlin record and copy the url displaying in your browser. 

Update the Image Slider
Either replace existing slides or add new ones:
In Joomla navigate to Components > DJ-ImageSlider > New Slide > Title (Type the title) > Category (choose one) > Status (choose Published) > Slide Image (click select) > Image or Image URL (add the image url and click Insert) > Link Type: (choose URL Address) > URL Adress: (Add the Merlin record url) > Save and Close

Events - Provides display options for library events. Default display settings have been set up for each library.

Creating an event
1. From the Components Menu click RSEvents Pro
2. Choose Events
3. Click the New icon
4. In the Event Information section insert the following:

  • Name (event title)
  • Publish or Unpublish
  • Featured (choose it if you need to display the event at the top of the events list sorted by date)
  • Starting date and time (click the clock icon at the bottom)
  • Ending date and time (you can choose if it is an all day event or a recurring event)
  • Location (Your library name)
  • Description (click the "Toggle Editor" button to adjust paragraph formatting)

5. In the Event Details section set up the following:

  • Category
  • Contact (phone number)
  • Front End (each library has default settings. For a multi day event click "show end date for multi day event")

6. Save the event

7. To insert an event image:

  • Click the event graphic icon
  • Click the "Choose file" button
  • Browse your computer files and select an image file
  • You have the option to click the Crop button
  • Click Save to insert your image

8. Click SAVE to save the changes to the event