1. Choose an Image to Display on the Grid

The show code block, available in the Image menu, displays an image in the grid area:

You choose which image you want to have displayed by clicking on the first value in the block ("Dog" is the default image). When you click it, a popup window of images is displayed:

Choose one of the categories listed in the top section to display the images available in that category (the "Animals" category is selected in the screenshot shown above). Click on the image you want and then click the Close button at the top right to get back to the RoboBlockly Workspace.

2. Search for an Image

You can also use the Search box at the top right to search for an image. For example, if you enter "dog" you will see results like:

The  Upload Image  button next to the  Search  button can be used to upload your own image.

3. Set the Position for the Image

Use the x and y values to set the x and y coordinates where the image is to appear. Every image is defined with an invisible "bounding box" (a rectangle) around it, and the (x,y) values refer to the coordinates of this box. 

More specifically, you use the second popup menu in the show block to specify whether the (x,y) coordinates refer to the center of the image's bounding box, or one of the four corners of the bounding box (upper-left, upper-right, lower-left, or lower-right), or one of the four side center locations (center-left, center-top, center-right, or center-bottom):

Example 4 displays a dog image with its bounding box drawn around it.

4. Set the Width and Height of the Image

You can also set the "width" value to make the image bigger or smaller. The height will be adjusted automatically. Or if you want to set the height instead of the width, use the pull-down menu to change "width" to "height":

You can also set both the width and height values by putting in number blocks for both (drag and insert a number block from the Math menu), which can result in a stretched or squeezed image:

5. Display the Grid Lines Behind or In Front of an Image

The grid lines are useful when figuring out where to position an image. You can turn them on or off in the Settings section. You can also use the grid code block in the Drawing menu to have them displayed either in front of or in back of images on the grid. If you don't specify front or back, the default setting is back. For details click the  More Info  button at top right.