Adding Images to Rich Text Fields


Adding Images to Rich Text Fields


Hi, I’m Jason from Dash Media. In this video I’ll be showing you how to embed images in rich text fields. To start with, let’s pretend I want to insert an image between two paragraphs. Create a new paragraph in between and then click the “Insert Image” button, which will open a dialog box. From here we have three different options. We can upload an image, choose an image that we’ve already uploaded, or link to an image on the internet somewhere else.

Uploading an image, you can either drag the file directly into the dialog box or if you click the “Choose File” option you’ll get a file browser menu to choose something from your computer. MODX actually makes this easier though because you can just drag and drop images directly from your computer into the rich text field itself.

Whenever you insert an image into a rich text area, it’s always best practice to click edit and just give the image a title as well. Titles are important because they are used by search engines such as Google and they help rank your page.

If you want this image to be a link to somewhere else, we could also insert a URL in the “Link” box and then on the webpage, if someone clicks the image it would take them to that.

Now that the file you just insert has been used it’s sitting in our server. If we wanted to insert that image again, instead of uploading that again, if we click the “Insert Image” button and under the choose tab, we already have the image sitting in our “Content/Images”. If we click on that we can see that it inserts straight away. By default it will get a title of the file name, but again, we should change that.

To remove an image you can either just backspace through it or under the edit menu there is actually a delete button as well.

The final option for adding images to rich text areas is using an image web link. Basically this means that an image is sitting somewhere that isn’t on your web server and we’re linking to that image instead of uploading the image. For this example I have a place holder image on another tab and I’m just going to copy that address and paste it into the “Image Web Link” box and click “Insert”. Now you can see the image on the webpage. This placeholder image isn’t actually sitting on our web server; this is just pulling it from another website.

When you put an image into rich text fields, it’s always good to make sure they’re in their own block. We can see that with the colour outline around them. It just makes sure that there’s going to be a nice amount of space between the text above it and the text below because it’s also possible to put images inside of the same block as text but a lot of the time it will look strange on your website.

For more training videos visit