How to resolve the page not rendering properly for HTML macro

Problem statement

This article explains how to resolve the error HTML page not rendering properly for HTML macro.

Error message 

The page with html macro is not rendering as expected and is not showing accurately. The top header of the page is not rendering properly and images are showing broken thumbnail.


Environment

ApplicationConfluence
Version7.0.4
App version5.6.2

Cause

The error is normally shown if the given location of the HTML content is different than that of the actual location of the content to be rendered. One of the possible causes is that:

  • HTML content from a Confluence instance is to be rendered in a page with the HTML macro of another Confluence instance,
  • An attachment link is given instead of a URL to the required Confluence instance.

Solution

If the Confluence instance where the HTML macro is installed must render content from another Confluence instance, and this link is given as an attachment, the macro is not able to access the correct location, and thus, is not able to render the content properly. To render content from a different Confluence instance, the link to the HTML content must be given as a URL in the Location of HTML data parameter in the HTML macro editor.

  1. Go to the external Confluence page. Right-click anywhere on the page and select View Page Source as shown:

  2. Copy the whole content from the View Page Source.
  3. Paste the copied page source as inline content inside the HTML macro, and then replace the img tag's src attribute content from "/confluence/download/attachments/" to "<confluence URL>/download/attachments". Please find the below screenshot for the reference.

  4. Save the macro and publish the page to render the images properly.

If the external Confluence is using a Refined Wiki theme builder app to render the page, then HTML macro is not able to recognize the theme elements as they are icons stored inside the external Confluence instance.