Keep Links and References to Images across Servers in Drupal

By Drupal, Web Design
Drupal-power

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

Step 1 – Enable CKEditor in WYSIWYG profiles

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

drupal-wysiwyg-module-install-with-ckeditor

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.
    drupal-pathologic-module-configuration
  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
      drupal-configure-media-ententy-with-wysiwyg-module
  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:

drupal-wysiwyg-module-with-media-module

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.

drupal-media-upload-modal

Tagged under: