Adding images to your MODOcms website  can be completed in two simple steps.

1.     Upload your image(s) to the MODO Media Centre.

2.     Insert them into your content using the Get image from Media Centre in the Edit Article window.

What is the Media Centre?

The Media Centre is used to store and organize media files such as pictures, video and music. Once uploaded to the Media Centre, you can view, edit, rename and preview files before inserting them into your website pages.

Uploading images to the Media Centre:

1.     From the Dashboard, click the Media icon () under the Modo Components section.

2.     Click [Browse] to locate the file you'd like to upload. You can upload files as large as 50MB.

3.     Click [Upload].

The image will appear in the list of available files on the Media Centre page.

Note: To upload larger files or several files at once to the Media Centre, you’ll first need to upload the files to the server via FTP.

Navigating the Media Centre

Let’s have a quick at the functions available in the Media Centre:

Toggle View:  Click these icons to toggle between list view and thumbnail view.

Preview Image:  Click this to preview the image. To view the image full-size, click on the file name to view in a separate window (available in list view only)

Delete Image:  Click to delete the image from the Media Centre.

Replace with new file:  Click this to replace the existing file by uploading a new one.

Rename this file: Click to change the name of the file.

Other Media Centre Functions

Search

To search for specific files by keyword, type the keyword in the Keyword filter field and click the Filter icon (). All files containing that keyword will be listed.

Filtering by Document Type

To see only a specific file type in the Media Centre,

·       click the Filter by extension drop-down menu. A list of all file-type extensions that are currently found in the Media Centre will appear.

·       Select the file extension you want. The Media Centre will show only the file-type you’ve selected.

Inserting Images into your Web Pages

1. From the Dashboard, click the Content icon (), located under the Modo Components section, and select the page you want to work with from the navigation menu.
2. Hover your mouse over the Publish icon () of the content box in which you want to insert your image and click the Edit icon ().
3. In the Edit Article window, place your cursor where you’d like your image to appear.
   
   Note: Once the image is inserted, you be able to reposition it if necessary by clicking and dragging.
4. Click the Image icon () from the toolbar. The image selection window will appear.
5. In the image selection window, click the image you want to use. The Appearance tab will appear.
6. In the Appearance tab,
• Set the dimensions of the picture. The images are measured in pixels. MODOcms will tell you if the image size you've entered is too big for the target area.
• Enter an image description. This descriptive text will appear when users hover their mouse over the image, or if the image fails to render in a user’s browser. It also helps search engines to properly index your web pages.
• Enter a title for your image.
• Select left or right alignment for your image from the Alignment drop-down menu. This will align your image to the left or right of any text in the content box.
• Create space between your image and text, if needed, by typing a numeric value in the Vertical and Horizontal Space fields.
• Add a border to your image by typing a numeric value in the Border field.
  
  Note: When adding values in the Vertical / Horizontal Space and Border fields, the number you enter defines the size of the space or border as measured in pixels.
7. Click [Insert].
8. Click [Save and Close].