Commit a6e33a6e authored by Kristina Hoeppner's avatar Kristina Hoeppner
Browse files

tips/image_in_text: Add info about base64 images

New in Mahara 17.10: You can add base64-encoded
images to text (Bug #1695118).
parent c82dc7bd
source/images/buttons/tinymce_image.png

790 Bytes | W: | H:

source/images/buttons/tinymce_image.png

407 Bytes | W: | H:

source/images/buttons/tinymce_image.png
source/images/buttons/tinymce_image.png
source/images/buttons/tinymce_image.png
source/images/buttons/tinymce_image.png
  • 2-up
  • Swipe
  • Onion skin
......@@ -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
......@@ -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.*
......
......@@ -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.
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment