Running Time 01m 44s

 

This short video demonstrates how to replace and crop images on your Sketchanet website

NB Click on  in the bottom right of the video to view fullscreen

 

There is also additional information on styling images further down the page.

 

 

 

About this video

This video assumes you are already logged into the Sketchanet editor. If you don't know how to do this, you can find out how here.

 

How to insert an image

You can insert an image into a cell very easily. Place the cursor into the cell, where you would like the image to appear. Then click on the Insert Image icon  in the text controls toolbar. This will bring up the Image File Manager where you can select an existing image or upload a new one.

 

How to replace an image

To replace an image in a cell, simply click on it. This will bring up the media options dialogue. Choose the "Edit" option to bring up the media settings window where you can change the size, make the image a link, and apply a border or shadow swatch to it.

 

Sizing an image

The Sketchanet editor only allows you to specify the width of an inline image. The height is taken care of automatically. By default, the width is specified as a % of the cell width. For a large image that should fill the width of the cell, leave this at the default of 100%. If you are inserting a small icon, you will be better of choosing a pixel width. Either way, Sketchanet will make sure that you image is not distorted - it will not allow it to be stretched.

 

Making an image a link

You can easily make any inline image into a link. Just click on the image, and then in the media options dialogue that appears, choose "Link". This gives you all the same link options as a normal text link. You can find out more about these options here.

 

Applying shadow or border to an image

Sometimes it can look good to have a border or slight shadow around an image. You do this in Sketchanet by applying a Style to your image. To do so, click on the image in the cell, and in the Link Dialogue that appears, choose "Edit". Next, in the media editor, choose the Styling Tab:

 

To select a Style to apply to the image, click on the checkerboard. You can then choose from any of your existing styles.

If none of your existing styles are what you need, then click on the blue PLUS button to create a new one.

In the screenshot below you can see the Edit Swatch dialogue, with the shadow tab selected. In this example there is a heavy shadow - in practal use a shadow this strong will look too heavy but you can play around with these settings until you find something that looks good. Usually subtle is better.

Quite a nice trick sometimes is apply a Corner Radius to the style applied to an image. This can allow you to put an image inside a circle - like this one below. This square image is set to a width of 200px and it has a corner radius of 100px, which creates a perfect circle.

 
This style on the right puts a red border around the image, while the style below applies a small amount of shadow. You can mix and match all of these options as you require.