Keep Links and References to Images across Servers in Drupal

Drupal is really great as keeping references to media files when they are specified as fields in a content type, but not so great when those images are added to the content of a page by using a WYSIWYG editor, like CKEditor.

In this article, I will explain how to configure Drupal to embed Media files in the content of your pages and avoid having broken links when you migrate your site to a different location, specially when you move your site to a different sub-folder, i.e. from http://www.example.com/development/ to http://www.example.com/staging/

Requirements

• WYSYWYG module enabled, with the CKEditor library installed. IMPORTANT: Check what CKEditor libraries are compatible with the version of the WYSIWYG module you are installing.
• Pathologic module enabled.
• CKEditor link module enabled.

Step 1 – Enable CKEditor in WYSIWYG profiles

Enable WYSYWYG on the desired WYSIWYG profiles (admin/config/content/wysiwyg).

Step 2 – Configure Text Formats

Configure each of the text formats enabled in Drupal (admin/config/content/formats/) and follow these steps:

1. Enable these filters:
   1. Convert line breaks into HTML (i.e. <br> and <p>)
   2. Convert URLs into links
   3. Convert Media tags to markup
   4. Correct faulty and chopped off HTML
   5. Correct URLs with Pathologic
2. Under “Filter processing order”, sort the filters in the following order:
   1. Convert Media tags to markup
   2. Convert URLs into links
   3. Convert line breaks into HTML (i.e. <br> and <p>)
   4. Correct faulty and chopped off HTML
   5. Correct URLs with Pathologic
3. Under “Filter settings” ensure that this option is selected “Use global Pathologic settings”
4. Save configuration.

Step 3 – Configure Pathologic

1. Configure Pathologic to “Path relative to server root (/foo/bar)”.
2. Add all the base paths of the different servers that will host this project.
3. Save configuration

Step 4 – Configure WYSIWYG profiles

For each of the WYSIWYG profiles using CKEditor (admin/config/content/wysiwyg), follow the next steps.

1. Edit the profile
2. Select the buttons you want to enable in the editor, but ensure that you enable “Media Browser” and keep “Image” and  “Enhanced Image” disabled. This will allow you to add images using the Media entity instead of the regular features that CKEditor uses to add images. I recommend this configuration:
   1. Bold
   2. Italic
   3. Align left
   4. Align center
   5. Bullet list
   6. Numbered list
   7. Outdent
   8. Indent
   9. Link
   10. Unlink
   11. Superscript
   12. Subscript
   13. Blockquote
   14. Source code
   15. Paste text
   16. Paste from Word
   17. Remove format
   18. HTML block format
   19. Media browser
3. Leave other settings as default and press “save”.

Once you do this, you will notice that the editor will have only one button to add images:

That button will trigger the Medial library and embed those files in your content, preserving the links when you migrate your site to a different folder or location.