Image Manager
You can upload images to Component.Studio through the image manager.
The image manager looks like this:
From the image manager's tool bar (left to right) you can:
- Choose a folder
- Rename the current folder
- Delete the current folder and all images in it
- Add a new folder
- Browse the shared image gallery
- Upload images to the current folder
Uploading Images
When you upload images to the current folder, you'll be presented with this:
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 you hover over an image you'll see a few icons:
The icons are as follows:
- Edit the name of the image, which you can also do by double-clicking the name of the image below the image.
- Copy the width, height, or URL of this image to your clipboard
- Download this image.
- Delete this image.
Note that the name of the image is very important as it is how the image will be referenced through-out Component.Studio. Therefore it must be unique. It will be used in variable names like {{ images.nest.url }}.
You can also get to more options by clicking on the image.
From here you have the option to Crop, Rotate, or Resize your image. All of these are non-destructive, they create a copy of the image and manipulate that.
Below the image you have a bunch of metadata, as well as the ability to move your image to a new folder, or copy the url of the image.
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 <nest/>. The videos below demonstrate 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 up after uploading to Component Studio.