Images & Files | Halogy User Guide

Images & Files

Images and files can be uploaded and accessed completely through Halogy eliminating the need for FTP and complicated file browsers. The images and files simply get uploaded through the administration portal, given a reference and 'virtual path', and then can be placed anywhere on the site by way of a tag.

Table of Contents


Uploading Images

To upload an image click on Uploads > Images from within the administration portal, then click Upload Image. In the form that appears you simply click Browse to find the image that you want to upload, then you can 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 then 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, for example if you want to make it shorter and simpler, then click the blue Edit button near the image, and then change the reference in the form that appears. From this form you can also change the image itself (via the Browse button), 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 present a button when you hover over the image. When you click on this image you can edit 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). This means you can edit the image on the page without having to go back to the administration portal every time.


Locating and Referencing Images

Images that are 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 then you simply 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 tick 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 simply use url(../images/mypicture.jpg) no-repeat.

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 of {thumb:REFERENCE} or you can link directly to the thumbnail via /thumbs/REFERENCE.EXTENSION.

Zip Files

You can upload a ZIP file full of images if you want to save time individually uploading images. If you do this all descriptions will be set to "Image" and the references will be based on the file name. Thumbnails will not be created for images uploaded this way.


Uploading Files

Files such as PDF, DOC, ICO, ZIP and MP3 can be uploaded using the Files system and referenced via tag or linked to directly. To upload a file click on Uploads > Files and then click on Upload File. The file will be given a reference based on the file name and the type of file will be represented with an icon.

The following file types are currently supported:


Locating and Referencing Files

Once you have uploaded a file you can output a link to that file from a Template, Include or Block. Alternatively you can go directly to the file via its virtual path at which point you will be presented with a download screen.

To reference the file via a tag then you simply use {file:REFERENCE} and a HTML link to the file will be outputted. This code can be styled through CSS by using the class "file".

To directly access the image via its virtual path you simply use /files/REFERENCE.EXTENSION, for example /files/favion.ico. 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.