Asset Manager

Uploading Files in Advantage CSP

1. Click on Asset Manager

The Asset Manager is a tool that enables users to upload various types of files, including documents, videos and images.

Click on Asset Manager

2. Click on File Manager

Click on File Manager

3. Click on the root directory

Click on the root directory

4. The Open button

The Open button

5. New Folder button

New Folder button

6. Delete button

Delete button

7. Grid View button

Grid View button

8. Thumbnail View button

Thumbnail View button

9. Upload button

Upload button

10. Click on New Folder to add a folder to the directory

Click on New Folder to add a folder to the directory

11. Give the folder a name

Give the folder a name

12. Click on OK

Click on OK

13. Click on Policies

Click on Policies

14. Click on Upload

Click on Upload

15. Upload dialogue box

In the Upload dialogue box you can either click Select and navigate to the correct location on your computer to Upload. Or files can be dragged directly from your computer into the dialogue box and then click Upload. You can add multiple files to upload at once as well.

To ensure compatibility with all versions of all browsers, only upload assets with no spaces in their names. Either remove the spaces before uploading the files or replace them with underscores (_) or dashes (-).

Once you are ready to upload the files, click the Upload button.

If the file already exists and you are simply replacing the existing file with the new file, select the Overwrite if file exists check box.

Upload dialogue box

16. Right click on Acceptable Use Policy.pdf

You have the options Open, Delete, Rename, New Folder and Upload

Right click on Acceptable Use Policy.pdf

17. Clicking Open will give you a preview of the file

Clicking Open will give you a preview of the file

Image Editing and Management

Using Advantage CSP for Image Editing and Management

Creation Date: March 21, 2024
Created By: Oren Shapiro

1. Click on Image Manager
Click on  Image Manager
2. Select an existing image if editing or using within your application
Select an existing image if editing or using within your application
3. Click on Edit Image to bring up editing suite
Click on Edit Image to bring up editing suite
4. access the editor from the toolbar
access the editor from the toolbar
5. Click on Crop as an example
Click on Crop as an example
6. Click on Aspect Ratio:
Click on Aspect Ratio:
7. Click a desired preset aspect ratio
Click a desired preset aspect ratio
8. Click on Crop
Click on Crop
9. Click on Close to exit the editor mode
Click on Close to exit the editor mode
10. Click on Alternate Size to create preset derivatives
Click on Alternate Size to create preset derivatives
11. Click on Tile W:350 H:350
Click on Tile W:350 H:350
12. Click on the newly outputted version
Click on the newly outputted version
13. Click on List View or Grid View to change the layout of your files
Click on List View or Grid View to change the layout of your files
14. Click on List View or Grid View to change the layout of your files
Click on List View or Grid View to change the layout of your files
15. Click on Upload
Click on Upload
16. Select a file from your local or online storage
Select a file from your local or online storage
17. Click on Upload
Click on Upload
18. Your uploaded image is now available for usage
Your uploaded image is now available for usage
19. Click on a file, then Delete to remove the asset from the file system
Click on a file, then Delete to remove the asset from the file system
20. Click on OK
Click on OK
21. Click on triangle to expand sub-folders
Click on triangle to expand sub-folders
22. Click on a chosen folder to load its space
Click on a chosen folder to load its space
23. Click on New Folder to create a new folder
Click on New Folder to create a new folder
24. Name your folder and click on OK
Name your folder and click on OK
25. Click on your New Folder to interact with it
Click on your New Folder to interact with it
26. Click on Delete to remove
Click on Delete to remove
27. Click on OK to confirm
Click on OK to confirm
28. Click on Refresh to get the latest data.
Click on Refresh to get the latest data.

Image Map Editor

Once you have placed an image in your content area, if you would like the image to be linked to another website when embedded on the page, right-click the image and select Image Map Editor.

 

The following Image Map Editor window will open for you to create a hyperlinked image to another website, use the steps listed below.

 

  • Click New Area, and a shaded rectangle will appear over the image in the Preview pane
  • Select and drag this shaded box over the area of the image you would like to be hyperlinked
  • Enter the URL of the website where you would like a user who clicks this area to be sent to
  • In the Target drop-down window, select how you would like the Link to open
  • Enter the Alt text for this link
  • When your information is complete, click Update Area followed by OK.

Image Derivatives (Automatic Image Resizing)

Image Derivatives, otherwise known as Automatic Image Resizing, is a powerful feature available in Advantage CSP that allows users to save time and money when it comes to managing an organization's digital assets across numerous devices and interfaces.

First, you will need to set the parameters of the image sizes for the various devices you would like to resize an image for, ie. Phone, Tablet, Desktop, etc.

To do this complete the following steps:

  1. Go to Domain Management and then select Configuration Settings in the navigation menu.
  2. Go to the System tab on the top left.
  3. Click on the Pencil icon to edit Image Configuration.

  4. There you will see the default settings; Thumbnail, Mobile, Tablet. Ensure that each size is enabled by making sure the green check mark is activated. In this example the defaults are set to not active, but some will be turned on after we create a new size.
  5. To add a new size, click on Add.
  6. Give your new derivative a name and dimensions. Click Update and then click Save in the top right corner and you're done adding a new derivative.
  7. The newly created derivative Travel Section in the example has been set to active and the Thumbnail has also been marked active, you must now click Save again in the top corner and now you can use these to resize an image on your site.

 

Resize your Image

Typically you will access the derivatives through either the Page Manager or Content Manager where you have images in your content.

  1. Select your image from where it was added to in your content tool by clicking on Select at the bottom of the image. In this example the original image was in an article on travel and was too large to display properly. 
  2. The Image manager opens in another window and you will see the Create Derivatives drop-down menu. This is where you can select the derivative you created earlier or use one of the defaults. Here we will use the Travel Section derivative by clicking on it.
  3. You will notice that the derivative is created and named in the folder below the original image. Now you must click on it so it appears in the editor at the bottom and then click Select at the top right. The Image Manager closes and you return to the article.
  4. Back in the article you now have an image that will fit properly into the article, the final step is to select Publish and then click on Publish It!.
Back to Top Button