[CS2] Image Manager
You can upload images to Component.Studio 2 through the image manager. You can get there by clicking on the following button in the toolbar of either the Dataset Editor or the Design Editor.
The image manager looks like this:
From the image manager's tool bar (left to right) you can:
- Choose a folder
- Delete the current folder and all images in it
- Rename the current folder
- Add a new folder
- Upload images to the current folder
Uploading Images
When you upload images to the current folder, you'll be presented with a screen that looks like:
From here you can either drag images to the box, or click the box to select images from your filesystem.
If an image that you upload has the same name as an image already in the current folder then it will replace the current image. Otherwise it will create a new image. If you have an image with the same name, but it is in another folder, then it will create a new image and append a "2" to the end of the name.
Uploading Multiple Images
You can upload multiple images at the same time by simply either dragging multiple images into the uploader, or selecting multiple images at the same time when you upload.
Manipulating Images
When looking at the image manager, it will show you the list of images in the currently selected folder. Below see an example image.
At the top it shows you a picture of the image. Next it shows you the variable name, image type, and image size (width and height in pixels). The variable name is how the image will be referenced through-out Component.Studio (like {{images.panda.url}}), and by default the variable name will be the name of the image, minus the extension (.png, .jpeg, .svg).
The row of icons below the image are as follows:
- Delete the image
- Change the variable associated with this image.
- Download this image.
- Specify whether this image should be usable with inline text icons. Example: <panda/>
- Copy the width, height, or URL of this image to your clipboard.
Inline Images / Inline Icons
You can use images inline in your text by checking the icons button shown above and then typing a tag with the variable name like <panda/>. This video demonstrates how it works.
SVG Sizing
When working with SVGs, you will need to size your appropriately before importing into Component Studio. SVG images will be converted to a raster image before they are added to the design. This can result in unexpected pixelization if trying to scale your image after uploading to Component Studio. Consult the size values listed in the lower right corner of your images for the size as rendered.
