Uploaded image for project: 'Confluence Data Center'
  1. Confluence Data Center
  2. CONFSERVER-53298

image in edit mode adds "confluence-thumbnail" class unnecessarily causing poor image to be displayed

    XMLWordPrintable

Details

    • Bug
    • Resolution: Unresolved
    • Medium
    • None
    • 6.1.2, 6.2.4, 6.3.3, 6.4.0, 6.9.0, 6.13.6, 6.15.2, 7.13.5
    • Content - Attachments

    Description

      Summary

      Copy and pasting image into pages while editing, or uploading images while editing does not work correctly with Internet Explorer.

      Internet Explorer imports the image file with the tag ac:thumbnail="true" causing the image to be blurry. This does not affect other web browsers when they are used to upload/paste images to pages as they will not include the ac:thumbnail=true" tag once saved. 

      Environment

      • Internet Explorer 11
      • Microsoft Edge Version 81.0.416.68 (Official build) (64-bit)

      Steps to Reproduce

      1. In Windows use Snipping Tool
      2. Create a new Image
      3. Copy the image with the copy button
      4. Ctrl+V to Confluence page, or upload a saved image to a page using the image upload feature

      Expected Results

      Image inserted in Internet Explorer should be sharp as appear in Chrome like below.

      Actual Results

      Image show as blurry in Internet Explorer

      Notes

      Comparing the Storage Format of the page you will see:

      • Chrome
        <p><ac:image ac:height="162"><ri:attachment ri:filename="image2017-8-30_14-1-9.png" /></ac:image></p>
        
      • Internet Explorer
        <p><ac:image ac:thumbnail="true" ac:height="162"><ri:attachment ri:filename="image2017-8-30_14-0-51.png" /></ac:image></p>
        

      Workaround

      Option 1: Use a different web browser other than IE to upload images to the page while editing
      Option 2: Resize the blurry image, then resize it back to the desired size and it will appear correctly once saved, as this removes the tag

      Mass clean-up

      Run the following SQL statement to replace the ac:thumbnail="true" value with a blank value in all pages and all previous versions of pages including drafts:

      works on Postgres
      UPDATE BODYCONTENT
      SET body = replace(body,'ac:thumbnail="true"','') 
      WHERE body LIKE '%ac:thumbnail="true"%';
      
      works on MS SQL
      UPDATE BODYCONTENT
         SET BODY = REPLACE (CONVERT(VARCHAR(MAX), BODY), 'ac:thumbnail="true"','')
       WHERE BODY LIKE '%ac:thumbnail="true"%';
      

       Always make a full backup of the database and be prepared to roll back before directly editing the db. 

      When done with the search and replace statement above, go to General Configuration -> Cache Management -> "Advanced View" and click "Flush All" at the very bottom of the page. This is so cached versions of pages which have this code still in their storage format will be reloaded from the database at next page visit.

      You may need to clear browser cache as well or hold down shift+refresh on the page to load the page not from existing browser cache. 

       Note: using Internet Explorer to upload new images into pages moving forward will embed the ac:thumbnail="true" value again. This can be avoided by resizing the image to anything else while editing, then resizing back to the size you want before saving the page.  

      Attachments

        Issue Links

          Activity

            People

              Unassigned Unassigned
              aabouharga Aya Mohamed (Inactive)
              Votes:
              18 Vote for this issue
              Watchers:
              28 Start watching this issue

              Dates

                Created:
                Updated: