[[Images in the Questionnaire]]
You are here: start » Overview » Creating and Designing the Questionnaire » Images in the Questionnaire
 
Trace:

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
Last revisionBoth sides next revision
en:create:images [20.12.2014 15:08] – [Images in the Questionnaire] alexander.ritteren:create:images [10.06.2018 20:17] – admin
Line 21: Line 21:
   - Afterwards, the image has to be embedded into the questionnaire. There are several ways of doing so - depending on the intended use.    - Afterwards, the image has to be embedded into the questionnaire. There are several ways of doing so - depending on the intended use. 
     * The image appears in **Compose Questionnaire** on the bottom right. You can simply drag & drop the image into the questionnaire here.      * The image appears in **Compose Questionnaire** on the bottom right. You can simply drag & drop the image into the questionnaire here. 
-    * If you click on the image in **Image and Media Files**, the file name will be shown as well as an HTML code to embed the image. This HTML code can be used in text elements, questions, items etc. +    * If you click on the image in **Image and Media Files**, the file name will be shown as well as an HTML code to embed the image. You can enter this HTML code anywhere you can enter text. For example, in text modules (if "HTML code" has been selected for the display mode), in the text or instructions of a question, or in the text of an item. You can also use an element "HTML code" under "Compose Questionnaire" and enter HTML code there. 
          
 If an image is embedded using HTML code, the position of the image can be adjusted more precisely. The HTML code displays the image ''image.jpg'' in the center and leaves a spacing of 40 pixels above/below for other content.  If an image is embedded using HTML code, the position of the image can be adjusted more precisely. The HTML code displays the image ''image.jpg'' in the center and leaves a spacing of 40 pixels above/below for other content. 
Line 49: Line 49:
 **Note:** Theoretically, you could also use images that stored on a different web server in the questionnaire with HTML code . However, the legal problems regarding the usage still remain -- and the image should be downloaded via encrypted HTTPS protocol, if the questionnaire is also transmitted in encrypted format. Otherwise, some internet browsers display a security warning.  **Note:** Theoretically, you could also use images that stored on a different web server in the questionnaire with HTML code . However, the legal problems regarding the usage still remain -- and the image should be downloaded via encrypted HTTPS protocol, if the questionnaire is also transmitted in encrypted format. Otherwise, some internet browsers display a security warning. 
  
-**Tip:** If you want to display an image as a logo on each page in the questionnaire, do not upload it in the normal way. Instead, upload it in **Imprint and Logo** in the tab //Logo//. +**Tip:** If you want to display an image as a logo on each page in the questionnaire, do not upload it in the normal way. Instead, upload it in **Footer and Logo** in the tab //Logo//. 
  
  
Line 71: Line 71:
   * Convert the image to RGB mode (greyscale images to the greyscale mode), if it involves an indexed image ([[#farbtiefe|Color Depth]]).   * Convert the image to RGB mode (greyscale images to the greyscale mode), if it involves an indexed image ([[#farbtiefe|Color Depth]]).
   * Scale the image with the image editor. Please ensure that the size is given in pixels (resolution or size specification in centimeters is irrelevant for online display).   * Scale the image with the image editor. Please ensure that the size is given in pixels (resolution or size specification in centimeters is irrelevant for online display).
 +    * **Tip:** If your images are hard to read/recognize after resizing, you may change they questionnaire's width ([[:en:create:layout]]) to have more overall space.
 +    * On small displays (e.g., on smartphones), the layout will shrink ([[:en:create:smartphones]]). Use ''%%<img src="..." style="max-width: 100%">%%'' to automatically resize an image as well.
   * Use the feature //Unsharp Mask//  (or //Sharpen//) if the image seems muddy after scaling.   * Use the feature //Unsharp Mask//  (or //Sharpen//) if the image seems muddy after scaling.
   * Reduce color depth if it involves a graphic. The fewer colors you need (units are counted in powers of 2, i.e. 255, 127, 63, 31, 15, 7, 3 or 2 colors), the smaller the file and thus the quicker the questionnaire will load. Leave the color depth unchanged for photos.   * Reduce color depth if it involves a graphic. The fewer colors you need (units are counted in powers of 2, i.e. 255, 127, 63, 31, 15, 7, 3 or 2 colors), the smaller the file and thus the quicker the questionnaire will load. Leave the color depth unchanged for photos.
Line 115: Line 117:
  
   * Drag the image onto the questionnaire page as an element in the questionnaire. By doing this, an image can be displayed above or below a question (or, as the only element on the page).   * Drag the image onto the questionnaire page as an element in the questionnaire. By doing this, an image can be displayed above or below a question (or, as the only element on the page).
-  * Use the image as a logo, so that it is shown on every page in the questionnaire. To do so, do not upload the image in the normal way: upload it in **Imprint and Logo** -> //Logo// instead.+  * Use the image as a logo, so that it is shown on every page in the questionnaire. To do so, do not upload the image in the normal way: upload it in **Footer and Logo** -> //Logo// instead.
   * Embed the image in the layout with HTML code so that it is displayed on every page in the questionnaire. To do so, you can edit the layout used in **Questionnaire Layout** (or create a new one) and add the HTML code for the image in a suitable place in //HTML Template of the Layout//.   * Embed the image in the layout with HTML code so that it is displayed on every page in the questionnaire. To do so, you can edit the layout used in **Questionnaire Layout** (or create a new one) and add the HTML code for the image in a suitable place in //HTML Template of the Layout//.
   * Embed the image in a question (i.e. question, explanation or item text) with HTML code.     * Embed the image in a question (i.e. question, explanation or item text) with HTML code.  
en/create/images.txt · Last modified: 27.01.2021 14:54 by sophia.schauer
 
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
Driven by DokuWiki