Uploading Images in VROOM
If you go to Uploads > Image Folders, you will see a list of "folders," which is how the system organizes all of the uploaded photos and graphics that can be displayed on your site. NOTE: This collection does not include the images for the products; they are managed separately under Shop > All Products.
If you want to upload photos, click on Upload Image on the upper right of the Images page. If you click Choose File in the gray area that appears, it will open a browser window on your computer that will allow you to select a file to upload.
NOTE: There is a defect to be aware of here: please make sure that the extension of the image file is lower-case, as in photo.jpg. If it's named photo.JPG, it won't display correctly once it's uploaded. So, if that's the case, please rename it to photo.jpg.
You can select the folder into which it will be placed, enter a name and a description, then click on Upload Image. You should then see the image displayed with others in the same folder.
Now, in order to display it on one of those pages, click on the "View Site" button at the top of the page. Now that you're logged in as an administrator, you should see buttons on the pages that allow you to edit various sections. To edit a page, go to it, then click on "edit". This will open an area on the page that shows you its contents in a way that allows you to perform edits. The little buttons in the upper right allow you to format items, as well as insert links and images. If you go to where you wish to add a boulder image, then click on the "Insert Image" button (4th from the right), it will show a "Manage Images" popup on the right of the screen. Scroll down until you find the image you'd like to insert, then click on it. Some text should appear in the edit area. Now, click on the checkmark in the upper right. You should see your image in with the other content.
Finally, each image can be adjusted from the site by clicking on a little button that appears in the upper left of the image when you drag the mouse over it. If you click on it, that "Manage Images" window should appear on your right. You can edit a description for the image (which currently displays over the image), select a different image, or choose from Display options. The Display options allow you to center the image, or push it to the right or left, or give it a border. You can also limit the size of the image.
To upload an image, click on Uploads > Images from within the administration dashboard, then click Upload Image. In the form that appears, click Browse to find the image that you want to upload. You may then optionally give the image a description.
Once the image is uploaded, a reference will be created automatically. This reference is used for the image tag and virtual path, which are both ways to output the image (described later). If you do not enter a description, the image reference will be created based on the filename; otherwise, the reference will be based on the description: for example: a-picture-of-bees.
Should you want to change the reference (e.g., if you want to make it shorter and simpler), then click the blue Edit button near the image, then change the reference in the form that appears. From this form, you can also change the image itself (via the Browse button), or the description, alignment of the image, and the maximum dimension in pixels (if the image needs resizing).
When viewing pages directly, all images referenced via tags (explained later) will display a button when you hover over the image. When you click on this image, you can edit attributes of the image directly. For example, if you want to change the alignment of the image inside a blog post, or if you want to change the Description (Alt tag), you can do it through this menu. This means you can edit the image on the page without having to return to the administration dashboard multiple times.
Creating Image Folders
Before you upload any images, you should create at least one image folder. To create an image folder, click on Uploads > Image Folders, then click on Add Folder. You may wish to do some planning before you create too many folders, since you'll want to use folders carefully to help organize and keep track of your uploaded images.
Displaying a (single) Image
Images uploaded via the Uploads system will be given a reference which you can use for outputting images inside a Block, Template, or Include. You can either use this reference inside a tag, or link to it directly using its virtual path.
To reference the image via a tag, you may use {image:REFERENCE}, and the HTML will be automatically generated for that image. If you place the image tag inside a block, you should see the image as soon as you click on the green button.
To directly access the image via its virtual path you simply use /images/REFERENCE.EXTENSION, for example /images/picture-of-bees.png or /images/mypicture.jpg. Make sure that the extension is the same as the type of file you uploaded originally. If you are not sure you will need to look at the original file you uploaded.
The virtual path will be necessary when using CSS. So from within your CSS file, you may use url(../images/mypicture.jpg).
Displaying Multiple Images
- gallery of folder contents
- (Bootstrap) carousel
Thumbnails
Thumbnails are created automatically for images larger than 100px. If you want to access the thumbnail for the image you can use either a tag like {thumb:REFERENCE}, or you can link directly to the thumbnail via /thumbs/REFERENCE.EXTENSION.