Uploading Images in MODX Revolution

I have had a few people ask me, how do I put images on my web page?  I thought it would be easier to do a blog post that I can just send people to.  In MODX 2.2 Media Sources were introduced.  It is a nice added feature that adds a lot of functionality at our finger tips.  This post will explain how to use them from a content editors point of view, so we are assuming you have already set them up. If you have not set up some Media Sources read over the documentation.

What are Media Sources?

Media Sources can be a variety of things from local web files, Amazon S3 bucket and more.  But for this example they are all local web files but we have made several to separate out responsibilities for the content editors and this allows us to assign different permissions for each Media Source if desired.

Requirements

  • MODX Revolution 2.2+
  • TinyMCE Extra installed
  • Proper permission to upload files to your web server.

Use the MODX Browser to add images to your web page

  1. Log into your MODX Manager and then navigate to the page you wish to add the image.
  2. After the page loads click on the spot that you would like to have your image at with in the Content area.  You should see the courser blinking.
  3. Now click on the Image Icon:
    Image icon
  4. A modal will pop up with a simple web form on it.  Look for the funny looking icon and click on it.
    MODX Browser icon
  5. Another modal will come up with the MODX Resources Browser.  It has three columns on it.  The left column has your different Media Sources (the drop down) and then it shows the folders/directories below.  The center column shows all files that are in the selected folder.  You can also filter or search through the list.  The right column simply show information about the current selected file from the center column.
    MODX Browser
  6. Now select the Media Source that seems the most appropriate for what you are doing and then click on the folder/directory that you wish to add your image or sub folder.Media Sources Drop down
    1. Optional create a sub folder/directory. Depending on your needs you may want to create a sub folder/directory.  Simply click on the folder icon and then fill in a name.  When you create a folder/directory I recommend using only alphanumeric lowercase with instead of spaces use “-“. Make sure you select the newly created folder before going further.
  7. Upload your image by clicking on the Upload icon. 
    Upload icon
  8. Another modal will pop up with a simple form on it.  Click on the Add button and select your image.
    Add button
    After you select your image you will see its name with a note that it is Queued for upload.  So it is not uploaded yet and if you want you can add more than one image using the Add button.  You will need to click on the Upload button.  The note will change once the image is uploaded and then click the Close button.
    Upload button
  9. If you do not see your uploaded file you may need to click on the folder that you just uploaded your image into.  Now click on the photo you wish to insert into the content area and then click the OK button on the lower right of the modal.Select Image
    Now you will see your image on the preview box and you will need to fill in an Image Description.
    Image preview

  10. Now click on the Appearance tab and if you want to change the alignment set it in the drop down.  When you are ready click on the Insert button.
    Insert photo

  11. Your image has now been put into the Content area.  If you want to move the image around you may now click on the image and try dragging it around.  Make sure you now save your work!

Comments (4)

  1. Buddhi:
    Nov 27, 2012 at 04:38 PM

    Thank you ever so much for your modx revo tutorials. Your ebook is the best one I have ever found. It would be nice to see the tutorials on making a photogallery in modx revo as I have not seen any tuts on this topic yet. Once again thank you for your all the hard work on producing excellent tuts.

  2. Josh Gulledge:
    Dec 26, 2012 at 03:48 PM

    Buddhi, glad you have found them useful.

  3. Buddhi:
    Jan 27, 2013 at 03:44 AM

    Hi there, I was wondering if the churchEvent Calendar works with HTML5 CSS3 Responsive template. I have tried to implement this on one of my template and it does not give the choice for to make the event prominent, Sort the event options. Any help would be really appreciated. Apology for posting in the wrong thread however I have posted this in the GitHub issues as well. Thanking you in advance.

  4. Octa:
    Feb 10, 2013 at 09:03 PM

    | February 9, 2011 And I finally steatrd to work on my Gardening Site. It’s run by ModX CMS, my most trusted CMS. I want to go easy on the job by porting some good free XHTMl/CSS templates out

Leave a Reply

This thread has been closed from taking new comments.