getting started - figures

Getting Started - Figures


adding media - To embed any type of media (video, audio, image) in the body of your lesson, click the "add media" icon at the end of the toolbar. This tool opens a dialog box for uploading new material (UPLOAD tab), embedding a video or figure from another site (WEB tab), or picking a previously uploaded file (MY FILES tab). Figures should be added inside a figure "div container" to group figure, caption, and copyright info together; see "styling figures" below.

videos - does not support uploading videos but it does provide a mechanism for embedding videos from other sites (e.g. Youtube, Vimeo). Use the WEB tab and enter the URL of the video you want to embed. To host your own videos, you will need to have an account on a video hosting site (Youtube accounts, Vimeo accounts).

uploading files - To upload a file (image or audio) just use the UPLOAD tab in the "add media" dialog box. Browse for the file on your computer and click "Upload" and "Next". You will then be brought to another page where you will enter some information about the file to identify the source and the copyright license:

title - The title displays when you mouse over the image. You can leave it blank if you wish.
file credit - Identify the owner of the file (if you know who it is) and the URL where you found it. Use "me" if the file is your own work. Note that by uploading your own work, you automatically grant license to freely use the file under the CC-BY-SA license, as indicated in the terms and conditions.
copyright license - Choose from public domain (no known copyright), or any of the Creative Commons licenses. For your own work, you should choose the CC-BY-SA license as indicated in terms and conditions.
tags - Add any tag words you like to help find the file when using the file search facility on the add media MY FILES tab.

styling figures - Add figure captions and float figures to the right side of the page using the figure class div container. Start by putting the cursor where you want to add the figure in the text and click the "div container" button in the toolbar. Enter "figure" for the stylesheet class and hit OK. A light grey box will appear on the right of the page, showing the div container. While the cursor is in the container, click the add media icon and insert the figure. Now without moving the cursor, hit a shift-return to enter a line feed, and then type in the figure caption. The figure and caption will be grouped together in a light grey box, which will float to the right side of the page.

styling videos and audio - Videos and audio files can be similarly styled using "video" and "audio" div containers. However, these containers do not float to the right side of the page.

groups of figures - Sometimes, when you use more than one figure close together, the figure containers will run into each other and will not all line up on the right side of the page as intended. In this case, ctrl-click each image and select the "edit div" option to change the container class from "figure" to "figure-no-float". The figures should now stack one on top of the other on the left side of the page. Next, select all figures together and create another div container, which will surround the other containers, and give it a stylesheet class of "figure-group". This container will float everything in it to the right side of the page. Using the "show blocks" button in the toolbar may help you see where all the div containers are located.


symptom: Nearby figures and captions are not correctly grouped with each other, or one figure appears nested inside the container of another figure.
treatment: This symptom usually means that the div containers were created in the wrong place. Use the "show blocks" button to check that figure containers are sequential rather than nested.

symptom: A figure appears correctly in the edit window, but when the lesson is saved, it disappears from the lesson view.
treatment: This symptom sometimes occurs when a figure is cut and pasted from another program. Sicphile does not support cutting and pasting figures from other programs. (That would be a security risk.) You must use the "add media" icon to upload and insert the figure. However, you can cut and paste a previously uploaded figure from one place to another within a sciphile lesson.