The setup consists of Drupal 8 + Webform (ver. 5.6 - https://www.drupal.org/project/webform/releases/8.x-5.6) + CKEditor Image Upload (https://www.drupal.org/project/ckeditor_uploadimage). This allows for users to copy and paste screenshots of issues into CKEditor easily.

When the user takes a screenshot and then uses CTRL+V to paste into CKEditor - the image is uploaded to the server and it works perfectly.

The problem arises when the user right clicks within CKEditor and selects "paste" from CKEditor's right click context menu - it then embeds the image directly (data uri - eg.

<img data-widget="uploadimage" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAiwAA....) 

which isn't a problem, until I the email is sent.

I'm using a Twig Template for the body of the message (it's being emailed / pushed into a ticketing system, thus the need to customize the look) and the code is the following:

{% set upload_screenshot = webform_token('[webform_submission:values:upload_screenshot]', webform_submission) %}

{% if upload_screenshot %}
        <p><strong>Screenshot(s):</strong></p><p> {{ upload_screenshot }}
        {# Used to try to debug why data uris weren't rendering - with webform debug it displays data uri images, but the downside is that it doesn't render regular image uploads. #}
        {#{{ webform_debug(upload_screenshot) }}#}</p>        
    {% endif %}

If I use the "Default" template, any type of image (whether uploaded or as an embedded image) works fine. So I'm starting to think it's the way that webform_token processes / outputs the information.

When I inspect the code in the broken image, I notice that the data: is removed from the src

<img data-widget="uploadimage" src="image/png;base64,iVBORw0KGg )

For the meantime I'm disabling the right click context menu with this module. (https://www.drupal.org/project/ckeditor_browser_context_menu)

Any ideas on how I can get the images (whether uploaded or embedded) in a custom twig email template would be appreciated.

  • Have you tried the :raw token? so webform_submission:values:upload_screenshot:raw - or is there none? – nhck Apr 23 '20 at 18:27
  • Yes, I tried that with no luck unfortunately. It outputs the img tag, but with the data: missing again, and therefore the image is broken. FYI - this is what I tried. {% set upload_screenshot = webform_token('[webform_submission:values:upload_screenshot:raw]', webform_submission) %} {% if upload_screenshot %} <p><strong>Screenshot(s):</strong></p><p> {{ upload_screenshot }}</p> {% endif %} – B.Friddy Apr 23 '20 at 19:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.