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 ...@@ -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. |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 @@ ...@@ -259,6 +259,7 @@
.. |tinymce_paste_text| image:: /images/buttons/tinymce_word_paste.* .. |tinymce_paste_text| image:: /images/buttons/tinymce_word_paste.*
.. |spellcheck| image:: /images/buttons/tinymce_spellcheck.* .. |spellcheck| image:: /images/buttons/tinymce_spellcheck.*
.. |tinymce resizer| image:: /images/buttons/tinymce_resizer.* .. |tinymce resizer| image:: /images/buttons/tinymce_resizer.*
.. |tinymce HTML| image:: /images/buttons/tinymce_html.*
.. |institution_homepage| image:: /images/institution_homepage.* .. |institution_homepage| image:: /images/institution_homepage.*
.. |pdf download| image:: /images/buttons/pdf_download.* .. |pdf download| image:: /images/buttons/pdf_download.*
.. |pdf print| image:: /images/buttons/pdf_print.* .. |pdf print| image:: /images/buttons/pdf_print.*
......
...@@ -8,7 +8,13 @@ ...@@ -8,7 +8,13 @@
Insert an image into text 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. #. Link to the image that is available elsewhere online.
#. Use an image that you have on Mahara. #. 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: ...@@ -45,7 +51,7 @@ You can add images to any text in two ways by using the same functionality:
.. note:: .. 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. 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. #. **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. #. **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. #. **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: ...@@ -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 *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. #. 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.
Supports Markdown
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