web-apps/apps/spreadsheeteditor/main/resources/help/en/UsageInstructions/InsertImages.htm

<!DOCTYPE html>
<html>
	<head>
		<title>Insert images</title>
		<meta charset="utf-8" />
		<meta name="description" content="Add an image to your spreadsheet and adjust its position and size" />
		<link type="text/css" rel="stylesheet" href="../editor.css" />
        <script type="text/javascript" src="../callback.js"></script>
        <script type="text/javascript" src="../search/js/page-search.js"></script>
	</head>
	<body>
        <div class="mainpart">
            <div class="search-field">
                <input id="search" class="searchBar" placeholder="Search" type="text" onkeypress="doSearch(event)">
            </div>
            <h1>Insert images</h1>
            <p>The Spreadsheet Editor allows you to insert images in the most popular formats into your worksheet. The following image formats are supported: <b>BMP</b>, <b>GIF</b>, <b>JPEG</b>, <b>JPG</b>, <b>PNG</b>.</p>
            <h3>Insert an image</h3>
            <p>To insert an image into the spreadsheet,</p>
            <ol>
                <li>place the cursor where the image should be added,</li>
                <li>switch to the <b>Insert</b> tab of the top toolbar,</li>
                <li>click the <img alt="Image icon" src="../images/image.png" /> <b>Image</b> icon on the top toolbar,</li>
                <li>
                    select one of the following options to load the image:
                    <ul>
                        <li>the <b>Image from File</b> option will open the standard dialog window to select a file. Browse the hard disk drive of your computer to find the required file and click the <b>Open</b> button</li>
                        <li>the <b>Image from URL</b> option will open the window where you can enter the web address of the required image and click the <b>OK</b> button</li>
                        <li class="onlineDocumentFeatures"> the <b>Image from Storage</b> option will open the <b>Select data source</b> window. Select an image stored on your portal and click the <b>OK</b> button</li>
                    </ul>
                </li>
            </ol>
            <p>After that the image will be added to the worksheet.</p>
            <h3>Adjust the image settings</h3>
            <p>Once the image is added, you can <a href="ManipulateObjects.htm" onclick="onhyperlinkclick(this)">change its size and position</a>.</p>
            <p>To specify the exact dimensions of the image:</p>
            <ol>
                <li>select the required image with the mouse,</li>
                <li>
                    click the <b>Image settings</b> <img alt="Image settings icon" src="../images/image_settings_icon.png" /> icon on the right sidebar,
                    <p><img alt="Image Settings Right-Side Panel window" src="../images/imagesettings.png" /></p>
                </li>
                <li>in the <b>Size</b> section, set the necessary <b>Width</b> and <b>Height</b> values. If the <b>Constant proportions</b> <img alt="Constant proportions icon" src="../images/constantproportions.png" /> button is clicked (in this case it looks like this <img alt="Constant proportions icon activated" src="../images/constantproportionsactivated.png" />), the width and height will be changed together preserving the original image aspect ratio. To restore the actual size of the added image, click the <b>Actual Size</b> button.</li>
            </ol>
            <p>To crop the image:</p>
            <p>Click the <b>Crop</b> button to activate cropping handles which appear on the image corners and in the center of each side. Manually drag the handles to set the cropping area. You can move the mouse cursor over the cropping area border so that it turns into the Arrow <img alt="Arrow" src="../images/arrow.png" /> icon and drag the area. </p>
            <ul>
                <li>To crop a single side, drag the handle located in the center of this side.</li>
                <li>To simultaneously crop two adjacent sides, drag one of the corner handles.</li>
                <li>To equally crop two opposite sides of the image, hold down the <em>Ctrl</em> key when dragging the handle in the center of one of these sides. </li>
                <li>To equally crop all sides of the image, hold down the <em>Ctrl</em> key when dragging any of the corner handles.</li>
            </ul>
            <p>When the cropping area is specified, click the <b>Crop</b> button once again, or press the <em>Esc</em> key, or click anywhere outside of the cropping area to apply the changes.</p>
            <p>After the cropping area is selected, it's also possible to use the <b>Fill</b> and <b>Fit</b> options available from the <b>Crop</b> drop-down menu. Click the <b>Crop</b> button once again and select the option you need: </p>
            <ul>
                <li>If you select the <b>Fill</b> option, the central part of the original image will be preserved and used to fill the selected cropping area, while other parts of the image will be removed.</li>
                <li>If you select the <b>Fit</b> option, the image will be resized so that it fits the height or width of the cropping area. No parts of the original image will be removed, but empty spaces may appear within the selected cropping area.</li>
            </ul>
            <p>To rotate the image:</p>
            <ol>
                <li>select the required image with the mouse,</li>
                <li>click the <b>Image settings</b> <img alt="Image settings icon" src="../images/image_settings_icon.png" /> icon on the right sidebar,</li>
                <li>
                    in the <b>Rotation</b> section, click one of the buttons:
                    <ul>
                        <li><img alt="Rotate counterclockwise icon" src="../images/rotatecounterclockwise.png" /> to rotate the image by 90 degrees counterclockwise</li>
                        <li><img alt="Rotate clockwise icon" src="../images/rotateclockwise.png" /> to rotate the image by 90 degrees clockwise</li>
                        <li><img alt="Flip horizontally icon" src="../images/fliplefttoright.png" /> to flip the image horizontally (left to right)</li>
                        <li><img alt="Flip vertically icon" src="../images/flipupsidedown.png" /> to flip the image vertically (upside down)</li>
                    </ul>
                    <p class="note"><b>Note</b>: alternatively, you can right-click the image and use the <b>Rotate</b> option from the contextual menu.</p>
                </li>
            </ol>
            <p>To replace the inserted image,</p>
            <ol>
                <li>select the required image with the mouse,</li>
                <li>click the <b>Image settings</b> <img alt="Image settings icon" src="../images/image_settings_icon.png" /> icon on the right sidebar,</li>
                <li>
                    in the <b>Replace Image</b> section click the button you need: <b>From File</b> or <b>From URL</b> and select the desired image.
                    <p class="note"><b>Note</b>: alternatively, you can right-click the image and use the <b>Replace image</b> option from the contextual menu.</p>
                </li>
            </ol>
            <p>The selected image will be replaced.</p>
            <p>When the image is selected, the <b>Shape settings</b> <img alt="Shape settings icon" src="../images/shape_settings_icon.png" /> icon is also available on the right. You can click this icon to open the <b>Shape settings</b> tab on the right sidebar and adjust the shape <a href="../UsageInstructions/InsertAutoshapes.htm#shape_stroke" onclick="onhyperlinkclick(this)"><b>Stroke</b></a> type, its size and color as well as change the shape type by selecting another shape from the <b>Change Autoshape</b> menu. The shape of the image will change correspondingly.</p>
            <p>On the <b>Shape Settings</b> tab, you can also use the <b>Show shadow</b> option to add a shadow to the image.</p>
            <p><img alt="Shape Settings tab" src="../images/right_image_shape.png" /></p>
            <h3>Adjust the image advanced settings</h3>
            <p>To change its advanced settings, click the image with the right mouse button and select the <b>Image Advanced Settings</b> option from the right-click menu or just click the <b>Show advanced settings</b> link on the right sidebar. The image properties window will open:</p>
            <p><img alt="Image - Advanced Settings: Rotation" src="../images/imageadvancedsettings1.png" /></p>
            <p>The <b>Rotation</b> tab contains the following parameters:</p>
            <ul>
                <li><b>Angle</b> - use this option to rotate the image by an exactly specified angle. Enter the necessary value measured in degrees into the field or adjust it using the arrows on the right. </li>
                <li><b>Flipped</b> - check the <b>Horizontally</b> box to flip the image horizontally (left to right) or check the <b>Vertically</b> box to flip the image vertically (upside down).</li>
            </ul>
            <p><img alt="Image - Advanced Settings: Cell Snapping" src="../images/imageadvancedsettings2.png" /></p>
            <p>The <b>Cell Snapping</b> tab contains the following parameters:</p>
            <ul>
                <li><b>Move and size with cells</b> - this option allows you to snap the image to the cell behind it. If the cell moves (e.g. if you insert or delete some rows/columns), the image will be moved together with the cell. If you increase or decrease the width or height of the cell, the image will change its size as well.</li>
                <li><b>Move but don't size with cells</b> - this option allows you to snap the image to the cell behind it preventing the image from being resized. If the cell moves, the image will be moved together with the cell, but if you change the cell size, the image dimensions remain unchanged.</li>
                <li><b>Don't move or size with cells</b> - this option allows you to prevent the image from being moved or resized if the cell position or size was changed.</li>
            </ul>
            <p><img alt="Image - Advanced Settings: Alternative Text" src="../images/imageadvancedsettings.png" /></p>
            <p>The <b>Alternative Text</b> tab allows you to specify the <b>Title</b> and the <b>Description</b> which will be read to people with vision or cognitive impairments to help them better understand what information the image contains.</p>
            <p>To delete the inserted image, click it and press the <b>Delete</b> key.</p>
        </div>
	</body>
</html>
-												webapps added

											
										
										
											2016-03-11 00:48:53 +00:00
+								<!DOCTYPE html>
 								<html>
 									<head>
 										<title>Insert images</title>
 										<meta charset="utf-8" />
 										<meta name="description" content="Add an image to your spreadsheet and adjust its position and size" />
 										<link type="text/css" rel="stylesheet" href="../editor.css" />
 								        <script type="text/javascript" src="../callback.js"></script>
-												Added search to the documentation for all editors

											
										
										
											2018-01-12 14:52:45 +00:00
+								        <script type="text/javascript" src="../search/js/page-search.js"></script>
-												webapps added

											
										
										
											2016-03-11 00:48:53 +00:00
+									</head>
 									<body>
-												Feature/update help (#329)


											
										
										
											2020-02-05 13:47:18 +00:00
+								        <div class="mainpart">
 								            <div class="search-field">
 								                <input id="search" class="searchBar" placeholder="Search" type="text" onkeypress="doSearch(event)">
 								            </div>
 								            <h1>Insert images</h1>
-												Add translation

											
										
										
											2020-08-12 11:25:32 +00:00
+								            <p>The Spreadsheet Editor allows you to insert images in the most popular formats into your worksheet. The following image formats are supported: <b>BMP</b>, <b>GIF</b>, <b>JPEG</b>, <b>JPG</b>, <b>PNG</b>.</p>
-												Update helps.

											
										
										
											2017-05-12 12:44:56 +00:00
+								            <h3>Insert an image</h3>
 								            <p>To insert an image into the spreadsheet,</p>
-												Feature/update help (#329)


											
										
										
											2020-02-05 13:47:18 +00:00
+								            <ol>
-												Add translation

											
										
										
											2020-08-12 11:25:32 +00:00
+								                <li>place the cursor where the image should be added,</li>
-												Update helps.

											
										
										
											2017-09-20 08:31:59 +00:00
+								                <li>switch to the <b>Insert</b> tab of the top toolbar,</li>
-												Add translation

											
										
										
											2020-08-12 11:25:32 +00:00
+								                <li>click the <img alt="Image icon" src="../images/image.png" /> <b>Image</b> icon on the top toolbar,</li>
-												Feature/update help (#329)


											
										
										
											2020-02-05 13:47:18 +00:00
+								                <li>
 								                    select one of the following options to load the image:
 								                    <ul>
-												Add translation

											
										
										
											2020-08-12 11:25:32 +00:00
+								                        <li>the <b>Image from File</b> option will open the standard dialog window to select a file. Browse the hard disk drive of your computer to find the required file and click the <b>Open</b> button</li>
 								                        <li>the <b>Image from URL</b> option will open the window where you can enter the web address of the required image and click the <b>OK</b> button</li>
-												[DE][PE][SSE] Updates to the documentation for version 5.3 release

											
										
										
											2019-05-15 11:40:18 +00:00
+								                        <li class="onlineDocumentFeatures"> the <b>Image from Storage</b> option will open the <b>Select data source</b> window. Select an image stored on your portal and click the <b>OK</b> button</li>
-												Feature/update help (#329)


											
										
										
											2020-02-05 13:47:18 +00:00
+								                    </ul>
 								                </li>
 								            </ol>
-												Update helps.

											
										
										
											2017-05-12 12:44:56 +00:00
+								            <p>After that the image will be added to the worksheet.</p>
 								            <h3>Adjust the image settings</h3>
-												Add translation

											
										
										
											2020-08-12 11:25:32 +00:00
+								            <p>Once the image is added, you can <a href="ManipulateObjects.htm" onclick="onhyperlinkclick(this)">change its size and position</a>.</p>
 								            <p>To specify the exact dimensions of the image:</p>
-												Update helps.

											
										
										
											2017-05-12 12:44:56 +00:00
+								            <ol>
-												Add translation

											
										
										
											2020-08-12 11:25:32 +00:00
+								                <li>select the required image with the mouse,</li>
-												Update helps.

											
										
										
											2017-05-12 12:44:56 +00:00
+								                <li>
-												Add translation

											
										
										
											2020-08-12 11:25:32 +00:00
+								                    click the <b>Image settings</b> <img alt="Image settings icon" src="../images/image_settings_icon.png" /> icon on the right sidebar,
-												Update helps.

											
										
										
											2017-05-12 12:44:56 +00:00
+								                    <p><img alt="Image Settings Right-Side Panel window" src="../images/imagesettings.png" /></p>
 								                </li>
-												Feature/update help (#329)


											
										
										
											2020-02-05 13:47:18 +00:00
+								                <li>in the <b>Size</b> section, set the necessary <b>Width</b> and <b>Height</b> values. If the <b>Constant proportions</b> <img alt="Constant proportions icon" src="../images/constantproportions.png" /> button is clicked (in this case it looks like this <img alt="Constant proportions icon activated" src="../images/constantproportionsactivated.png" />), the width and height will be changed together preserving the original image aspect ratio. To restore the actual size of the added image, click the <b>Actual Size</b> button.</li>
-												Update helps.

											
										
										
											2017-05-12 12:44:56 +00:00
+								            </ol>
-												[DE][PE][SSE] Updates to the documentation for version 5.3 release

											
										
										
											2019-05-15 11:40:18 +00:00
+								            <p>To crop the image:</p>
-												Add translation

											
										
										
											2020-08-12 11:25:32 +00:00
+								            <p>Click the <b>Crop</b> button to activate cropping handles which appear on the image corners and in the center of each side. Manually drag the handles to set the cropping area. You can move the mouse cursor over the cropping area border so that it turns into the Arrow <img alt="Arrow" src="../images/arrow.png" /> icon and drag the area. </p>
-												[DE][PE][SSE] Updates to the documentation for version 5.3 release

											
										
										
											2019-05-15 11:40:18 +00:00
+								            <ul>
 								                <li>To crop a single side, drag the handle located in the center of this side.</li>
 								                <li>To simultaneously crop two adjacent sides, drag one of the corner handles.</li>
 								                <li>To equally crop two opposite sides of the image, hold down the <em>Ctrl</em> key when dragging the handle in the center of one of these sides. </li>
 								                <li>To equally crop all sides of the image, hold down the <em>Ctrl</em> key when dragging any of the corner handles.</li>
 								            </ul>
 								            <p>When the cropping area is specified, click the <b>Crop</b> button once again, or press the <em>Esc</em> key, or click anywhere outside of the cropping area to apply the changes.</p>
 								            <p>After the cropping area is selected, it's also possible to use the <b>Fill</b> and <b>Fit</b> options available from the <b>Crop</b> drop-down menu. Click the <b>Crop</b> button once again and select the option you need: </p>
 								            <ul>
 								                <li>If you select the <b>Fill</b> option, the central part of the original image will be preserved and used to fill the selected cropping area, while other parts of the image will be removed.</li>
-												Add translation

											
										
										
											2020-08-12 11:25:32 +00:00
+								                <li>If you select the <b>Fit</b> option, the image will be resized so that it fits the height or width of the cropping area. No parts of the original image will be removed, but empty spaces may appear within the selected cropping area.</li>
-												[DE][PE][SSE] Updates to the documentation for version 5.3 release

											
										
										
											2019-05-15 11:40:18 +00:00
+								            </ul>
 								            <p>To rotate the image:</p>
 								            <ol>
-												Add translation

											
										
										
											2020-08-12 11:25:32 +00:00
+								                <li>select the required image with the mouse,</li>
 								                <li>click the <b>Image settings</b> <img alt="Image settings icon" src="../images/image_settings_icon.png" /> icon on the right sidebar,</li>
-												[DE][PE][SSE] Updates to the documentation for version 5.3 release

											
										
										
											2019-05-15 11:40:18 +00:00
+								                <li>
-												Add translation

											
										
										
											2020-08-12 11:25:32 +00:00
+								                    in the <b>Rotation</b> section, click one of the buttons:
-												[DE][PE][SSE] Updates to the documentation for version 5.3 release

											
										
										
											2019-05-15 11:40:18 +00:00
+								                    <ul>
 								                        <li><img alt="Rotate counterclockwise icon" src="../images/rotatecounterclockwise.png" /> to rotate the image by 90 degrees counterclockwise</li>
 								                        <li><img alt="Rotate clockwise icon" src="../images/rotateclockwise.png" /> to rotate the image by 90 degrees clockwise</li>
 								                        <li><img alt="Flip horizontally icon" src="../images/fliplefttoright.png" /> to flip the image horizontally (left to right)</li>
 								                        <li><img alt="Flip vertically icon" src="../images/flipupsidedown.png" /> to flip the image vertically (upside down)</li>
 								                    </ul>
 								                    <p class="note"><b>Note</b>: alternatively, you can right-click the image and use the <b>Rotate</b> option from the contextual menu.</p>
 								                </li>
 								            </ol>
-												Update helps.

											
										
										
											2017-05-12 12:44:56 +00:00
+								            <p>To replace the inserted image,</p>
-												Feature/update help (#329)


											
										
										
											2020-02-05 13:47:18 +00:00
+								            <ol>
-												Add translation

											
										
										
											2020-08-12 11:25:32 +00:00
+								                <li>select the required image with the mouse,</li>
 								                <li>click the <b>Image settings</b> <img alt="Image settings icon" src="../images/image_settings_icon.png" /> icon on the right sidebar,</li>
-												Feature/update help (#329)


											
										
										
											2020-02-05 13:47:18 +00:00
+								                <li>
 								                    in the <b>Replace Image</b> section click the button you need: <b>From File</b> or <b>From URL</b> and select the desired image.
-												[DE][PE][SSE] Updates to the documentation (en)

											
										
										
											2018-06-07 15:31:00 +00:00
+								                    <p class="note"><b>Note</b>: alternatively, you can right-click the image and use the <b>Replace image</b> option from the contextual menu.</p>
 								                </li>
-												Feature/update help (#329)


											
										
										
											2020-02-05 13:47:18 +00:00
+								            </ol>
 								            <p>The selected image will be replaced.</p>
-												Add translation

											
										
										
											2020-08-12 11:25:32 +00:00
+								            <p>When the image is selected, the <b>Shape settings</b> <img alt="Shape settings icon" src="../images/shape_settings_icon.png" /> icon is also available on the right. You can click this icon to open the <b>Shape settings</b> tab on the right sidebar and adjust the shape <a href="../UsageInstructions/InsertAutoshapes.htm#shape_stroke" onclick="onhyperlinkclick(this)"><b>Stroke</b></a> type, its size and color as well as change the shape type by selecting another shape from the <b>Change Autoshape</b> menu. The shape of the image will change correspondingly.</p>
 								            <p>On the <b>Shape Settings</b> tab, you can also use the <b>Show shadow</b> option to add a shadow to the image.</p>
-												[SSE] Documentation update (English)

											
										
										
											2018-03-30 11:36:43 +00:00
+								            <p><img alt="Shape Settings tab" src="../images/right_image_shape.png" /></p>
-												Feature/update help (#329)


											
										
										
											2020-02-05 13:47:18 +00:00
+								            <h3>Adjust the image advanced settings</h3>
-												Add translation

											
										
										
											2020-08-12 11:25:32 +00:00
+								            <p>To change its advanced settings, click the image with the right mouse button and select the <b>Image Advanced Settings</b> option from the right-click menu or just click the <b>Show advanced settings</b> link on the right sidebar. The image properties window will open:</p>
-												[DE][PE][SSE] Updates to the documentation for version 5.3 release

											
										
										
											2019-05-15 11:40:18 +00:00
+								            <p><img alt="Image - Advanced Settings: Rotation" src="../images/imageadvancedsettings1.png" /></p>
 								            <p>The <b>Rotation</b> tab contains the following parameters:</p>
 								            <ul>
 								                <li><b>Angle</b> - use this option to rotate the image by an exactly specified angle. Enter the necessary value measured in degrees into the field or adjust it using the arrows on the right. </li>
 								                <li><b>Flipped</b> - check the <b>Horizontally</b> box to flip the image horizontally (left to right) or check the <b>Vertically</b> box to flip the image vertically (upside down).</li>
 								            </ul>
-												Feature/update help (#329)


											
										
										
											2020-02-05 13:47:18 +00:00
+								            <p><img alt="Image - Advanced Settings: Cell Snapping" src="../images/imageadvancedsettings2.png" /></p>
 								            <p>The <b>Cell Snapping</b> tab contains the following parameters:</p>
 								            <ul>
-												Add translation

											
										
										
											2020-08-12 11:25:32 +00:00
+								                <li><b>Move and size with cells</b> - this option allows you to snap the image to the cell behind it. If the cell moves (e.g. if you insert or delete some rows/columns), the image will be moved together with the cell. If you increase or decrease the width or height of the cell, the image will change its size as well.</li>
 								                <li><b>Move but don't size with cells</b> - this option allows you to snap the image to the cell behind it preventing the image from being resized. If the cell moves, the image will be moved together with the cell, but if you change the cell size, the image dimensions remain unchanged.</li>
 								                <li><b>Don't move or size with cells</b> - this option allows you to prevent the image from being moved or resized if the cell position or size was changed.</li>
-												Feature/update help (#329)


											
										
										
											2020-02-05 13:47:18 +00:00
+								            </ul>
 								            <p><img alt="Image - Advanced Settings: Alternative Text" src="../images/imageadvancedsettings.png" /></p>
-												Add translation

											
										
										
											2020-08-12 11:25:32 +00:00
+								            <p>The <b>Alternative Text</b> tab allows you to specify the <b>Title</b> and the <b>Description</b> which will be read to people with vision or cognitive impairments to help them better understand what information the image contains.</p>
-												Feature/update help (#329)


											
										
										
											2020-02-05 13:47:18 +00:00
+								            <p>To delete the inserted image, click it and press the <b>Delete</b> key.</p>
 								        </div>
-												webapps added

											
										
										
											2016-03-11 00:48:53 +00:00
+									</body>
 								</html>