MODX: Working With Images & Files

MODX: Working With Images & Files

Images Folder

A web page is not like a document; you cannot copy and paste images into it. Instead, you must copy your images to a folder on the website and then add a link from the web page to the folder which holds the images.
Every Local Party has an images folder to which you can upload graphics to use on your MODX website. The location for this folder will be ‘assets/images/local_parties/localparty’ where you replace localparty with your website name. You can access this folder via the Files Tab at the top of the Document Tree of the Manager website or when you are Editing a Page.

Uploading Images & Files

As well as putting images on your website, you may want people to be able to download files from your website. These may be in PDF format or, optionally, docx, pptx or xlsx. 
Before you upload images, crop them to remove any superfluous, and potentially distracting, background, trying, if there is a row of eyes in the image, to keep that half way up the image and make sure that, except for Splash Banners, they are no more than 600 pixels wide at 72 pixels per inch; if possible, keep them below 500 pixels wide as they will then display better on smartphones.
Before uploading images or files, if necessary, replace any spaces in the filenames with - or _.
Upload the images to ‘assets/files/local_parties/localparty’ and the files to ‘assets/files/localparties/localparty’ where you replace localparty with the name of your local party. If you do not appear to have such a folder, because different conventions were applied to the allocation of folders in the past, please ask the support team which folder to use. If it is practical, we may suggest moving all your images to ‘assets/files/local_parties/localparty’ and all your files to ‘assets/files/localparties/localparty.’
You can access these folders via the Files Tab at the top of the Document Tree of the Manager website. Navigate to the images folder or the files folder depending on whether you wish to upload images or files, right click on it and select Upload files. You will be presented with an empty dialog box; select Choose files and then navigate to the location of the image or file you want to upload from your computer. Click on it and it will appear in the dialog box. Repeat this until all the images or files you want to upload have appeared in the dialog box; then select Upload and they will all be uploaded to your images or files folder. Select Close to get rid of the dialog box.



Inserting Images & Files

To insert an image, place the cursor in an empty line and click on the highlighted button in the page editor bar below.



This will open up the Insert/Edit image panel. To access the image browser click on the small group of red icons at the end of the Image URL.



From here you can navigate to your images folder and select the image you require. Below the Image URL is an option for an Image Description:



Fill this in with a description which would make sense to someone who might be using a screenreader to browse your website.
When placing an image in a webpage, align those with people mostly looking to the right to the left and those with people mostly looking to the left to the right so that people look across the centre of the page. Try to avoid people looking out across the margins of a page as this is distracting to viewers. To do this, click on the Appearance tab and select the appropriate Alignment from the dropdown menu. Then select Insert.



Do not select any of the other settings unless you are experienced in coding HTML and really know what these settings will do!
To insert a file, first insert the text you want to relate to the file, for example, ‘Download our September digital newsletter.’ Then highlight some of the words in the text, for example, ‘September digital newsletter.’ The link icons will appear, select the left hand one, navigate to your files folder and click on the file you want to link to this text.



You can insert links to webpages outside MODX by following the instructions for inserting a file but simply insert the URL of the webpage in the Link URL box. For webpages inside MODX you need to insert the page ID in the format [[~123456]]. If you do not know the page ID because you do not have access to the page, put in a support ticket to find out what it is.
All MODX guides were written by volunteers, and haven't been updated in several years. If you spot any errors use the thumbs down icon below to leave feedback.

    • Related Articles

    • MODX: An Introduction

      Why Have A Website? Every Local Green Party should have a website visible to the local community if they are active and fighting elections. As an active local party your website can be a useful campaigning tool to let members and supporters know what ...

    • MODX: Problems Saving A Page

      If you have problems saving a page, there are a number of well-known causes which are worth investigating as you may be able to solve the problem yourself: oversize images: make sure that, apart from Splash Banners, none of the images you have ...

    • MODX: Adding Banners & Buttons

      Splash Banners On the Home Page of your website we encourage you to add at least one large Splash Banner image to grab the attention of your website visitors. You can also add these Splash Banners on normal website pages as well if you like, although ...

    • MODX: Editing Your Homepage

      Each part of your website can be easily amended and configured from the Manager Page. The front page of you website brings together most of the key elements of your website — and each relevant section is simply described below. Website Address Your ...

    • Sharing & Organising Files Via Green Spaces

      Green Spaces provides a number of modules to help you organise your Group. In this guide we'll look at how you can use the Files module to help you share and organise documents. You can share files via the Stream, or from within the Files module to ...