PyroCMS Files

Why store images in PyroCMS?

You can, of course, link an image into your page from any other web site, but if that site removes or moves the location where they store the image it will vanish from your page. You will have no warning, just a blank area on the page when you next view it! It's therefore much better to take control of images to ensure your page content continues to be what you designed by uploading a copy of the image to the PsM storage.


Uploading images to the PsM server consumes the storage available in the domain hosting. That storage is limited to a quite small number of Mbytes and is used for the web pages files, database files and the images etc. Extra storage can of course be purchased for an annual fee. Cloud storage with other services such as Amazon, Rackspace, Google can also be used, but these make charges for storage and usage of the data. A free (in 2018 and 2019) service that provides suitable storage is Mediafire. PyroCMS has been extended to utilise this service for any images to be uploaded.

When you create a Folder in the Files area it will by default be stored (and everything in it of course) on the PsM hosting server. If you upload anything to a folder or create a sub-folder within it, the location can't be changed (the complexity of moving files between storage locations is too great). Immediately after creation, before you upload anything into it, you must change its location to MediaFire. Anything created or uploaded inside that folder will then automatically be located in the MediaFire storage. Therefore the change of storage location is ONLY needed when you create a folder in the "base" of the Folders area.

The folder view in the left pane indicates which folder is your current working location:

"Base" area of folders, the left column has no indicator of the chosen folder.

Selected folder marked in the left column with a black blob on the right of folder "Pages", plus sub-folder list of the chosen folder is displayed.

When you click "New Folder", a new folder will appear immediately in the right-hand pane of the folders/files area. Its name will show in blue letters as "Untitled Folder". Without clicking anywhere, immediately type the name you require for the folder and press Enter.

Here you see the new folder is being created, with the blue name on the right.

After typing the name "Example folder" you then see the name in the normal grey text, plus a confirmation message in the lower right that it has been renamed.

If you want/need to relocate this new folder to MediaFire you now click the "Details" button. You will see a dialogue box appear that shows the Location as "local". Drop down the selection and select "mf-mediafire", then click Save. At the lower left of the area you will see a confirmation message that the folder has been created at MediaFire storage servers.

Click Details

Choose mf-mediafire

Bottom right confirmation that the folder has been relocated

TIP**Sometimes after a folder creation, clicking the Details button doesn't offer the choice of locations immediately, you must click a different folder in the left pane, then go back to the location where your new folder resides to complete the operation.

Uploading images

The preferred image type to be uploaded and used in the system is "jpeg" or "jpg" (either can be used, they mean the same). Other image types sometimes don't behave correctly in page layouts, they don't respect containers that limit their size, so either convert them or consult the Admin user for further help.

First select the folder (or create it as described above) where you want to store your image(s) Separating them into folders makes management of them much simpler as over time many in a single folder can become quite hard.

TIP**When you select a folder that has many images the system will display all the thumbnails for the currently stored images. This can take quite a long time when there are many images. If you click another folder while that is happening, the images from the first folder will continue to load, making it appear that they belong to the second folder you clicked. So, please wait for all images to finish loading before selecting another folder to avoid confusion. Watch the slide bar on the right of the thumbnail area and wait until it stops adjusting for images that are still loading.

Next, click the Upload button. A window appears with a panel at the top which asks you to either "Drag files here OR Click to select files". Usually, you would click in that area and then navigate your hard drive and choose one or more files from a folder.

Having chosen the files the window then shows them as a list. If you click the Upload button at the top of the window they will all start to upload. Alternatively, you can click the "+" to the right of each image to start its upload, or click the "X" to cancel the image from the selection of uploads.

Ignore the Width, Height and Ratio values for the images. The system now accepts very large images, but as part of the upload process, it will reduce images automatically to a size that is the maximum that can be displayed on most monitors. The "Alt attribute" can be set to a very brief title for the image. This is displayed if the image fails to load and by search engines to understand images.

TIP** There is a bug in the upload process (that I hope to find and fix one day) that can cause some images not to be uploaded. If you have selected several images and start all images uploads using the Upload button, the completion of the last image in the list before others are complete will cause termination of any incomplete ones. Therefore I recommend starting images one at a time with the "+" button beside each and make sure the top of the list completes before you start the last one. Also, uploads sometimes stall if the images are to go to MediaFire. Your upload appears to run as the blue progress bar fills, but the line for the image never clears away. If this happens, wait for 30-40 seconds, then click the Cancel button. Any image that appears in the folder and is simply a grey icon should be selected and then click Delete. The icon may remain, but on the next refresh of the folder it will vanish. You can then retry the upload of the failed image again.

Using Images

Usage of images is described in the section Images and Image example. Sometimes however you may want to reference or use an image by its ID or the URL.

To obtain either of these select the image, then click Details. A window appears that shows basic information for the image, including its ID. If you need this field (used in the Stacked Adverts stream) you can select and copy the value. If you need the URL (for other adverts and events entries in streams) of the image you have to click the Toggle Image button. The window changes to show extra information, including the URL which you can copy for other usages.