MODX 101: Adding Photos to your Content

The obvious first step, no matter what you are trying to do on your website, is to login into the MODX Content Manager generally found at

Are logged in now? Good, lets keep rolling.

Prep your Images

Before you are ready to upload and post your images you need to make sure they are ready for your website. If you are using a picture you took on your fancy smancy digital camera it will be way bigger than it needs to be for the website. Many digital cameras will produce images that are more than 3500x2500 pixels, however, on your website most images will never need to be larger than 1024x768 pixels. The exact size you want for your image will vary based on what you want to use it for. For example, the larger images in this blog posting, on a desktop computer, are 525x285 pixels. 

How you resize, crop, and do other prep work to your image will vary depending on the software you have. Professionals generally will use Adobe Photoshop, but for average users that tends to be a bit overkill. If you are using Mac OS X you can use the built in Preview tool to do basic editing. There an article at eHow that discusses how to do that. Picasa is another free picture organizational/editing tool that you could use as well which is available on both Windows and Mac OS X. 

Have all your photos ready? Great, lets keep going then.

Select a Page

Click on the page you would like to edit in the "website tree" under the Resources tab. This will open up the page editor for that page. If you need more help with the resource tree, please see our other MODX 101 Understanding the Resource “Website Tree”.


Inserting a Image on your Page

  1. Click in the content where you want your image to go.
  2. Click on the Image Icon in the Formatting Toolbar.

    MODX Image Upload 
  3. A dialog box will pop-up, where you can either navigate through your folders to locate a previously uploaded image, or choose to upload a new one by clicking on the upload image icon. It is important that you navigate to the folder you wish to upload your new image to first, that way it is easy to locate your image in the future should you need to use it again.

    MODX Resource Uploader 
  4. The uploader dialog box allows you to select multiple photos at one time, before uploading them all at once. How nice!
  5. Finally, with the new photo(s) uploaded you can select the picture, click "OK", and add it to your content. Remember to give it a title and description. Users and search engines will love you for it.

Is that it?

Well, mostly. You can also play around with alignment, border, size and some other properties in the "Appearance" and "Advanced" tabs of the "Upload/Insert Image" dialog pop-up. However, as mentioned above, we do recommend you do any prep work to your image prior to uploading. 

Need more help?

As always Three Eyed Bird is here to help. Do you feel like you need a little more one-on-one help in learning how to better manage your web content in MODx Revolution? No problem! We offer hourly tutoring to get you off and editing in no time. Just can't find the time to sit down and do it? Three Eyed Bird also offers maintenance plans that are customized for you and your needs. Contact us today to discuss how we can help you do business better.