Graphics Library
| Table of Contents |
|---|
Graphics Library
The graphics library stores all your images, cascading style sheets (CSS), shockwave, and javascript JavaScript files that are needed to brand your checkout. It is important to upload everything needed for your checkout screen branding into the graphics library so the pages can be served up securely.
At first, it may seem a little awkward to have a special graphics management piece to the UltraCart branding. Intuitively the graphics could reside on the same web server that a merchants website exists, but the technical details of secure page downloads requires all content (html page and graphics) to come from a secure web server. If some of the content on a page does not come from a secure web server, the secured page icon at the bottom of the web browser will not appear. By using the UltraCart graphics management system (Screen Branding), you can avoid having to purchase a secure server certificate for your server.
| Note |
|---|
Remember that graphics used within branding pages must come from the UltraCart Graphics Management system. If you wish to use a graphic, you must first upload it to the UltraCart system! |
The graphics library is located at:
| Panel |
|---|
Main Menu Configuration Screen Branding Themes [Edit] Graphics Library (tab) |
There are two sections to this screen; Graphics Files, where you will see your uploaded graphics listed and Upload Graphics, where you actually navigate within your system to identify and locate which graphics are to be uploaded to the UltraCart server.
...
Uploading Files
When you first enter the graphics library for a screen branding theme there will be no files present. The graphics file list will look like the screen shot below.
To add a file to your graphics library you need to first know where your graphics reside on your system (which folder). If you know the path to the file, you can simply type it into the "filename" field. If not, click the "Browse" button. A dialog window will appear in your browser. Locate the file on your computer/system and then click OPEN. The filename (path) will appear in the filename field and will look something like this:
Click on the "Upload Graphic(s)" button to complete the upload function. Note: To
| Info | ||
|---|---|---|
| ||
To make it more convenient for sites with a lot of images we support the uploading of a ZIP file. Compress (zip) your files into one ".Zip" file and upload it in the same manner as explained above. UltraCart will automatically unzip and list them as separate files in the Graphics Library. |
Once you've successfully uploaded your graphic, the theme editor graphics library screen will change in appearance. Each and every graphic will appear in a list showing its filename and size (in KB). In addition, new buttons will be added and labeled View, Link and Delete.
...
The next section will explain how to manage files once they are in your graphics library.
Graphics Files
Below is a screen shot of the graphics files that are available within the screen branding theme.
For each file that is in the list you can perform operations by clicking the buttons to the right.
Rename
For your convenience you can rename the file via the web interface instead of having to download the file, rename it, delete the old one and upload the new one. When you click rename a dialog will appear allowing you to enter the new name of the file.
View
Clicking on "View" button will provide a screen view of your graphic. This gives you an opportunity to insure that it is indeed the graphic you wanted. Click on your browsers "back" button to return to the graphics library screen.
anchor
...
Link
...
Clicking on the "Link" button will take you to the Graphic Link screen which gives you a preview of the actual "Img Tag" and "Img URI" html code. This code can be "copy and pasted" into any brandable screens header/footer.
...
The most common operation is the Link button which will give you the snippets of HTML or URLs to use when referencing the file in your screen branding HTML. When you click the link button a popup dialog will appear with the link information as shown below.
There are three pieces of information presented on the link dialog
| Field | Description |
|---|---|
| Img Tag | The properly formatted image tag that can be copied and pasted into the screen editor. |
| Img URI | The |
...
| relative URI |
...
| for the graphics file that can be used within the screen HTML (for CSS references for example) | |
| Complete URL | The complete HTTPS URL to the graphics file including the theme code for external references (use by a catalog template for example) |
Download
If for some reason the merchant needs the graphic back onto their system (lost the file, etc.), they can download it by clicking the "Download" button for that image. A dialog box will appear offering to open or save the file to your system.
...
...
Delete
...
Clicking the "Delete" button will remove the graphic from our system. It will not interfere with the graphic at it's location on your system!