Digital Asset Management for all your ProcessWire media

Insert Images

Image media in your Media Manager Library can be inserted into the rich text fields of your ProcessWire pages. The page does not need to have a Media Manager inputfield for this to work. However, if the page does have a Media Manager inputfield, the images in that inputfield will also be available for inserting into CKEditor.

Please note that this only works with CKEditor

To insert image media, first, click on the image icon in the CKEditor toolbar or the rich text in which you want to insert the image. This will open the ProcessWire insert image modal.

The top section of the modal will have a section with the heading select images from Media Manager. The bottom section will have the usual ProcessWire Images on Page: etc. Let us look at this bottom section first.

Images on Page

Here we assume you have a Media Manager inputfield on the page. If not, all you will see in this section are images from other image fields available on the page you are editing. Alongside any such images, you will see the images in all of the Media Manager inputfield on that page. This assumes you have images in those inputfields!

Click on the image you wish to insert into the rich text field. This will navigate the modal to the usual ProcessWire modal in which you can manipulate the image you want to insert, e.g. crop, resize, etc, the image. When finished with any manipulations, at the bottom of the modal click on the insert image button. To instead select another image, click on the button select another. To cancel out of the process, click on the cancel button. This will close the modal.

If you inserted the image, it will be shown in your rich text field.

Select images from Media Manager

If you closed the select image modal, open it again using the image icon on the CKEditor toolbar. Click on the link to select images from Media Manager Library. This will nagivate the modal to the Media Manager Library. The menu will only have the items Image and depending on your settings, Upload and Settings.

If you cannot immediately see the image you wish to insert, you can locate it using the filter panel or use the pagination to navigate to its page.

If you wish to upload an image media instead you can do so from this modal. If upload anywhere is enabled, you can drag and drop image media directly from your computer onto the modal. Alternatively, navigate to the Upload dashboard to upload images. If you choose the latter, please note that irrespective of your Media Manager settings, images (or other media you add) are automatically uploaded the moment they are added to the upload files widget. The assumption here is that you are in the insert image modal hence any upload is in furtherance to that intention. However, other upload settings still apply, for instance the action to take after uploading media

Once you have decided on the image to insert, hover your mouse over its thumb and click on the check icon on its top-left corner.

Alternatively, if you want its variant instead, click on the copy icon underneath the check icon. This will naviate the window to the table listing the image media's variants where you can select the variant you want by clicking on its check icon.

Please note that from the variants modal, you can click on the link back to all media at the top-left of the modal to return to the media Library (still in the modal).

Once you have selected the image you want, you will be navigated to the ProcessWire window for manipulating images and inserting them into rich text fields (still in the modal).

The process here is identical to that described previously. Manipulate the selected image if you wish (crop, resize, etc) and click on the insert image button to insert it, or click the select another button to choose a different image or the cancel button to exit the modal without inserting an image.

If you inserted the image, it will be shown in your rich text field.