Guide to working with images and attachments in ModX

1) Upload a new image or attachment to ModX

The interface of the ageing ModX platform is not wonderful, but it does work reliably.

• The recommended method for working with images or attachments, for the smoothest process, is to open a second browser tab side-by-side also logged in at greenparty.org.uk/manager. 
• In your new tab, click Files from the ribbon menu at the top of the left-hand column.
• In the new view in the left-hand column, you see a file structure tree for the whole of the Green Party of England & Wales ModX setup, ie many different local party/regional party/special interest sites! There are designated folders for the BCPGP website - still (for technical reasons) under the local party's old name, sedorset or southeastdorset.
• Images for the BCPGP website go in assets/images/local_parties/southeastdorset
• Other files for the BCPGP website (eg PDFs, Word documents) go in assets/files/localparties/southeastdorset
• Click on the arrow to the left of the name of a folder to expand it.
• There are a few subfolders inside the local party's images folder to try to keep things slightly tidier (although it's not a big issue); these include news-graphics, people, sm-thumbnails and stock. 
• Once you have navigated down the tree structure to the right subfolder to upload your image to, right-click its name and select Upload Files.
• Click the green Choose file(s) button.
• Select one or more files to upload, then click Open.
• Click the green Upload button. 

2) Copy the URL of your upload (or re-used image)

• Staying in the same browser tab, in the left-hand column, locate the file you have just uploaded in the tree view - OR the existing image there you wish to reuse - under the corresponding sub-folder.
• Right-click on the name of your file and click Rename.
• In the pop-up window, the top field is headed 'Path'. This is the URL of your upload. Click once inside the box displaying the URL.
• Select the full text of the URL by pressing Ctrl and A on your keyboard simultaneously. (You can alternatively drag the cursor to select all the text, but the keyboard shortcut is easier and more reliable.)
• Right-click the text you have selected.
• Click Copy.  

3) Insert your image (with pasted URL) into the webpage you are editing

• Change back to your first browser tab, where you are in the webpage editing view.
• In the main editing box ("Content"), move the cursor to the appropriate point for the image you wish to add:
• If your image is to be 'aligned' left or right with text alongside, move the cursor to the start of the paragraph where it is to be added.
• If your image is to take up the whole width of the column, move the cursor to its own line, in-between the paragraphs to come before and afterwards.
• From the three rows of icons at the top of the "Content" editing box, select the eleventh icon on the top row, with a picture of an image, captioned Insert/Edit Image.
• Paste the URL you copied into the top entry field of the pop-up window, "Image URL". (This should result in your image appearing in the "Preview" space at the bottom of the pop-up.) 
• In the next box "Image Description", type a suitable description of the image (e.g Bournemouth Town Hall, or A stock image of a homeless person) - this makes the webpage more accessible for visually impaired people using speech browsers.
• In the next box "Title", enter (optionally) any text to appear when the image is hovered over. If the image needs crediting to a photographer, do so in this box, eg Photo credit: Mick Gisbourne.
• Now click Appearance from the three tabs at the top of the pop-up window.
• If you are aligning your photo to one edge or other alongside text:
• Click the drop-down options for Alignment at the top, and select either Left (to appear on the left-hand side) or Right (to appear on the right-hand side). 
• Click inside the Horizontal Space box and type 10. (This gives some space between the edge of the text and the image.)
• Click in the leftmost of the two Dimensions boxes.
• Type a suitable width, in pixels:
• For a mugshot image, around 125 to 150 is good.
• For a landscape image aligned alongside text, up to around 260 is good.
• For an image taking up the whole width of the column (no text alongside), the maximum width available (for a standard news page with a separate right-hand column) is 545. Do not exceed this as it may negatively impact the display of the automatically generated right-hand column.
• Leave the rightmost Dimensions box blank.
• Click the Insert button at the bottom of the pop-up window when you are done.

4) How to re-select an image to alter its settings

You can go back to the Insert/Edit Image dialogue box if you need to change the settings for the image you have inserted (eg to change its size).

However, there's a trick to successfully reselecting the image in order to be able to edit it:

• If you have aligned an image left or right alongside a paragraph, move the cursor to the start of the text of this paragraph.
• If you have inserted an image on its own line, move the cursor so it sits immediately below the image, at the left margin. 

Then:

• Press your keyboard's left arrow once.
• Now hold down shift, and press the left arrow again.
• You should see your image selected. Now click the Insert/Edit Image button from the top ribbon of icons.
• If you have selected your existing image successfully, the Insert/Edit Image pop-up window should be pre-populated with the details of your existing image. If it appears blank, you have not selected your existing image correctly - try again.

Cheat sheet: Frequently used images

To reuse one of these images on a new webpage, simply copy and paste the corresponding URL straight into the "Image URL" field in the Insert/Edit Image dialogue box (see section 3 above). 

Stock in-article news images:

                     

From top left:

assets/images/local_parties/southeastdorset/stock/Air Show.jpg
assets/images/local_parties/southeastdorset/stock/Anti-homeless bars in Bournemouth.jpg
assets/images/local_parties/southeastdorset/stock/BCP Town Hall.jpg
assets/images/local_parties/southeastdorset/stock/Climate Emergency.jpg
assets/images/local_parties/southeastdorset/stock/climate-ecological-emergency.jpg
assets/images/local_parties/southeastdorset/stock/Coronavirus.JPG
assets/images/local_parties/southeastdorset/stock/didnt vote v2.jpg
assets/images/local_parties/southeastdorset/stock/Fawley_Oil_Refinery.jpg
assets/images/local_parties/southeastdorset/stock/green electricity.jpg
assets/images/local_parties/southeastdorset/stock/Homelessness generic.png
assets/images/local_parties/southeastdorset/stock/No drill no spill - Credit to Jay Enticap.jpg
assets/images/local_parties/southeastdorset/stock/Oil rig - Credit Mick Gisbourne.jpg
assets/images/local_parties/southeastdorset/stock/Oil rig with children.jpg
assets/images/local_parties/southeastdorset/stock/our children have the right to a future.jpg
assets/images/local_parties/southeastdorset/stock/polling station.jpg
assets/images/local_parties/southeastdorset/stock/Unity Alliance.jpg
assets/images/local_parties/southeastdorset/stock/Wessex Fields.jpg
assets/images/local_parties/southeastdorset/stock/wind farm.jpg
assets/images/local_parties/southeastdorset/stock/Winton generic.jpg
assets/images/local_parties/southeastdorset/stock/Winton Library Gardens - Simon Bull and Chris Rigby 2018.jpg 
assets/images/local_parties/southeastdorset/stock/Wytch Farm.jpg

Simon Bull

   

assets/images/local_parties/southeastdorset/people/Simon Bull litter pick with Wayne Codi.jpg
assets/images/local_parties/southeastdorset/people/Simon Bull 2019.JPG

Chris Rigby

       

Left to right:

assets/images/local_parties/southeastdorset/people/Chris Rigby 2.jpg
assets/images/local_parties/southeastdorset/people/Chris Rigby 5 - credit Jayne Jackson Photography.jpg
assets/images/local_parties/southeastdorset/people/Chris Rigby 6 - credit Jayne Jackson Photography.jpg
assets/images/local_parties/southeastdorset/people/Chris Rigby 8 - credit Jayne Jackson Photography.jpg
assets/images/local_parties/southeastdorset/people/Chris Rigby 9 - credit Jayne Jackson Photography.jpg

Other speakers

   

assets/images/local_parties/southeastdorset/people/Alasdair Keddie 2019 cropped.JPG
assets/images/local_parties/southeastdorset/people/Alasdair Keddie.jpg
assets/images/local_parties/southeastdorset/people/John Tutton 2.jpeg
assets/images/local_parties/southeastdorset/people/Natalie Carswell.JPG