tips/image_in_text: Add info about base64 images

New in Mahara 17.10: You can add base64-encoded
images to text (Bug #1695118).

source/new.rst

@@ -53,3 +53,13 @@ Support for ADFS authentication
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
 |adfs| You can set :ref:`the signature algorithm for SAML <plugin_saml>`. That allows you to connect ADFS authentication via the SAML authentication method.
+
+Insert base64-encoded images
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+|base64 encoding| You can :ref:`insert base64-encoded images <base64_image>` in any text area via the HTML editor option in the visual editor.
+
+.. figure:: /images/new/insert_base64_image.*
+   :alt: Insert a base64-encoded image
+
+   Insert a base64-encoded image

source/shortcuts.rstext

@@ -259,6 +259,7 @@
 .. |tinymce_paste_text| image:: /images/buttons/tinymce_word_paste.*
 .. |spellcheck| image:: /images/buttons/tinymce_spellcheck.*
 .. |tinymce resizer| image:: /images/buttons/tinymce_resizer.*
+.. |tinymce HTML| image:: /images/buttons/tinymce_html.*
 .. |institution_homepage| image:: /images/institution_homepage.*
 .. |pdf download| image:: /images/buttons/pdf_download.*
 .. |pdf print| image:: /images/buttons/pdf_print.*

source/tips/image_in_text.rst

@@ -8,7 +8,13 @@
 Insert an image into text
 -------------------------------
 
-You can add images to any text in two ways by using the same functionality:
+.. index::
+   single: Tips; Insert an image file into text
+
+Select an image file
+~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+You can add image files to any text in two ways by using the same functionality:
 
 #. Link to the image that is available elsewhere online.
 #. Use an image that you have on Mahara.
@@ -45,7 +51,7 @@ You can add images to any text in two ways by using the same functionality:
 
    .. note::
       The size of the image will shrink automatically when there is less width than set in the image width to accommodate the responsive design.
-      
+
 #. **Vertical space**: Add more space (in pixels) above and below the image.
 #. **Horizontal space**: Add more space (in pixels) to the left and righ of the image.
 #. **Border width**: Add a simple black border to your image if you wish to do so. Here you can choose how wide that border will be.
@@ -54,4 +60,28 @@ You can add images to any text in two ways by using the same functionality:
 #. Click the *Submit* button to keep your changes. Alternatively, click *Cancel* if you want to abort inserting the image.
 #. Click the *Close* button |close| if you want to abort inserting an image.
 
-If you are not happy with how the image looks, select it (it will get little square handles) and click on the *Image* button |tinymce_image| again to make adjustments.
+If you are not happy with how the image looks, select it (it will get little square handles) and click the *Image* button |tinymce_image| again to make adjustments.
+
+.. index::
+   single: New in Mahara 17.10; Insert a base64 image into text
+
+.. _base64_image:
+
+|new in Mahara 17.10| Use a base64 image
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+You can insert an image file encoded in `base64 <https://en.wikipedia.org/wiki/Base64>`_ into a text area in which you can use the HTML editor.
+
+.. figure:: /images/tinymce_source_code.*
+   :alt: Insert a base64 image via the HTML editor in the visual editor
+
+   Insert a base64 image via the HTML editor in the visual editor
+
+#. Convert your image to be base64-encoded. There are a number of websites where you can do that online. Copy the encoded image.
+#. Go to the visual editor and click the *HTML* icon |tinymce HTML|.
+#. In order for the base64 image to be recognized as an image, it needs to be put into an image tag. Type the beginning of the image tag: ``<img src="``.
+#. Paste the base64-encoded image. It's a lot of lines of characters that start with ``data:image``.
+#. Close your image tag so that the browser knows where your image ends: ``" />``.
+#. Click the *OK* button to return to the visual editor. If you inserted the image tag correctly, your image is displayed.
+#. You can now change the size and position of your image if you like by selecting the image and clicking the *Image* icon |tinymce_image|.
+#. Click the *Save* button to return to the page edit screen.