Accordant9 wiki Images

Images for Accordant9 wiki

In wikidot, the images/files you wish to include at a target page has to be first uploaded for that particular page and consequently, can be inserted as desired by using a host of wikidot editor tools and certain customized Accordant9 wikidot styling features.

Uploading Images (files)

Once signed in as a registered user, a horizontal menu at the bottom right corner comprising of 8 options are listed. The 5th option from left, the Files option once clicked en-lists all the files (if any) already uploaded at the page. The section also displays a brief summary with regards to Total (number of) files and the Total Size. See illustration below;
files.png

In order to upload an image(file), click on the Upload a file from your computer link. This should display the File Upload section where there is a brief summary with regards to The current site storage size along with the Maximum upload size (50 MB) and there is a Select Files button below.
upload_and_select.png

To upload files from a local computer, click on Select Files button, this should allow you to browse through your local machine for the required files to be uploaded. You can choose multiple files at one go by simply holding Shift or Ctrl while selecting.
select_files.png

After having selected the required files and clicking on Open at the browser dialogue, the selected files get listed in a table mentioning the File name, Size (KB) and Upload Status. At this point you can choose to Select (more) files or Upload (the listed) files.
upload_files_list.PNG

Once you hit the *Upload files** button the files listed get uploaded and the upload status of each file is displayed real time. (Upload times vary depending on the size of files uploaded) Once done, you can either Refresh file list to view the newly uploaded files at the list or you can choose to upload more files by following the same procedure as mentioned above.
uploading_files.pngrefresh_files_list.png
The listed files are now ready to be included on the corresponding wikidot page.

Inserting an image (file)

To insert an image(file) you must open the wikidot editor (click on the edit option at top left corner of the wiki page or on the bottom right horizontal menu).
screens
There are two ways in which you can include images at a wikidot page:

  • By manually inserting code

To insert an image into a page use the following syntax:

[[image image-source attribute1="value1" attribute2="value2" ...]]

For Accordant9 wiki eg.:
[[image accordant9_home(image name/source) class="cadm_image_def" (or a class of your choice, see cadm image classes)]]

See image styling classes
  • By using the image insertion wizard

There are two Image insertion buttons;
1. The insert image button
insert_image_button.PNG
On clicking on this button, the editor generates the image insertion syntax at the position of the cursor at the editor's input area:

[[image source]]

You would have to provide the image source manually in this case.
2. The insert image wizard button
insert_image_wizard_button.PNG
On clicking this button, the image insertion wizard is launched. We can include images either by providing the Url, selecting an attached file or from Flickr.com. In our case, since we are uploading our images at the wiki, we can simply select an attached file;
On selecting the attached file option as shown in figure, a list of all the attached files get displayed and you can choose the required one from that list.

Make sure that your images are re-sized to an appropriate size as shown in the size guide as follows;
Large sized images : 1000-800x500-700 (px) approx.
Medium sized images : 450-700x300-600 (px) approx.
Small sized images : 150-200x150-200 (px) approx.
Please make sure that you re-size your images before you upload them on to wiki to maintain the aspect ratio.


For the Accordant9 wiki please select the following;
Image size as original size
Position as no position
Css style leave as blank (you can add a class later for styling images)
When done, click on Insert Code
insert_image_wizard_use.png
You will now see the image code with the source/image-name at the last position of the cursor on the editor, for eg.;
[[image image-name]]

Styling Images

Default Styling

By default, ie. if you wish to use the normal style as most of the images in Accordant9 wiki, you will need to include the class cadm_image_def as shown below;

for eg.;
[[image image-name class="cadm_image_def"]]

All the above images used at this page are using the default styling class as mentioned above.

Images aligned at the center (no text wrapping)

Center aligned Large-sized images

Please see the eg. code as shown below;

[[div class="cadm_center_wide"]]
[[image image-name class="cadm_image_def"]]
[[/div]]
Note: the image default class is also included to give the image the effects as most images in Accordant9 wiki

Example Image:
accordant_home.png

Center aligned Small-sized images

Please see the eg. code as shown below;

[[div class="cadm_center_small"]]
[[image image-name class="cadm_image_def"]]
[[/div]]

Example Image:
accordant_home_small.png

Floating Left images with text wrapping (rarely used)

Please see the eg. code as shown below;

[[div class="cadm_left"]]
[[image image-name class="cadm_image_def"]]
[[/div]]

Example Image:
accordant_home_small.png

Accordant Locator, created by CAD Management, is the solution for Space Allocation Management and Personnel / Asset Tracking. Accordant is currently at release 9 with many powerful features such as:

A unique space recharge system that delivers significant time savings to clients with large amounts of office space
Unrivalled move management controlling and simplifying staff and asset moves - from churn to major relocations

It uses a number of unique CADM technologies and provides a powerful and flexible toolkit for CAD, Microsoft Windows and SQL databases. Its innovative location management technology provides huge productivity benefits for organisations with high volume, high churn, open plan space. It is available as a 100% web-deployed system which allows access to modules installed and displayed on the left of the Accordant 9 Home screen as shown below.

Floating Right images with text wrapping

Please see the eg. code as shown below;

[[div class="cadm_right"]]
[[image image-name class="cadm_image_def"]]
[[/div]]

Example Image:
accordant_home_small.png

Accordant Locator, created by CAD Management, is the solution for Space Allocation Management and Personnel / Asset Tracking. Accordant is currently at release 9 with many powerful features such as:

A unique space recharge system that delivers significant time savings to clients with large amounts of office space
Unrivalled move management controlling and simplifying staff and asset moves - from churn to major relocations

It uses a number of unique CADM technologies and provides a powerful and flexible toolkit for CAD, Microsoft Windows and SQL databases. Its innovative location management technology provides huge productivity benefits for organisations with high volume, high churn, open plan space. It is available as a 100% web-deployed system which allows access to modules installed and displayed on the left of the Accordant 9 Home screen as shown below.

Note: Both left and right floating images work on the same principle; The following is the wiki source-code for the above right floating example:

[[div class="cadm_right"]]
[[image accordant_home_small.png class="cadm_image_def"]]
[[/div]]
Accordant Locator, created by CAD Management, is the solution for Space Allocation Management and Personnel / Asset Tracking. Accordant is currently at release 9 with many powerful features such as:

A unique space recharge system that delivers significant time savings to clients with large amounts of office space
Unrivalled move management controlling and simplifying staff and asset moves - from churn to major relocations

It uses a number of unique CADM technologies and provides a powerful and flexible toolkit for CAD, Microsoft Windows and SQL databases. Its innovative location management technology provides huge productivity benefits for organisations with high volume, high churn, open plan space. It is available as a 100% web-deployed system which allows access to modules installed and displayed on the left of the Accordant 9 Home screen as shown below.

If the upcoming next section also merges and floats along with the floating section and you would prefer it not to, please wrap the next section inside the following div;
[[div class="cadm_clear"]]
the contents of the next section
[[/div]]

Captioning images

An image caption can be added to any of the center, left or right aligned images. Make sure that your div class="cadm_caption" comes after the image code and before the div for aligning images ends.
Please see the eg. code as shown below;

[[div class="cadm_right/cadm_left/cadm_center_wide(small)"]]
[[image image-name class="cadm_image_def"]]
[[div class="cadm_caption"]]
image caption
[[/div]]
[[/div]]

Image-Caption example:
For the sake of providing an example lets take the more commonly used right-floating images
accordant_home_small.png

Caption


Accordant Locator, created by CAD Management, is the solution for Space Allocation Management and Personnel / Asset Tracking. Accordant is currently at release 9 with many powerful features such as:

A unique space recharge system that delivers significant time savings to clients with large amounts of office space
Unrivalled move management controlling and simplifying staff and asset moves - from churn to major relocations

It uses a number of unique CADM technologies and provides a powerful and flexible toolkit for CAD, Microsoft Windows and SQL databases. Its innovative location management technology provides huge productivity benefits for organisations with high volume, high churn, open plan space. It is available as a 100% web-deployed system which allows access to modules installed and displayed on the left of the Accordant 9 Home screen as shown below.

Wikidot full syntax guide for Images

Refer : Wikidot syntax guide for Images

Implement your own styling

Please test and implement your styling on the page itself, inline.
Example of inline styling:

[[image image-name style="your styling..."]]

Once tested, please send your styling by e-mail to ku.oc.mdac|kanuar#ku.oc.mdac|kanuar and ask for a customized class with the same styling. Kindly, also provide the link to the page where the styling has been implemented for review.