open
Elsewhere Online twitter Facebook SLS Blogs YouTube SLS Channel Linked In SLSNavigator SLS on Flickr

Advanced Images

Once you have already inserted an image into the overview pages you can make more advanced changes to the image. This tutorial assumes you've already completed our Adding Images tutorial and have logged in and opened your page for editing.

For more advanced options, you can modify the following:

  • Alternative Text
  • Width and Height
  • Borders
  • HSpace and VSpace
  • Alignment
  • Linking

Alternative Text:

Alternative text is what will appear when your image can't load (often because of a specific browser or computer). People will know what the image is even when it fails to load when you add alternative text. 

  1. Select the inserted image by clicking on it. Then click the Image button on the top menu of the overview panel.

    Image Button Screenshot
     
  2. Go to the Image Info tab and in the Alternative Text section type the text.

    Type Alt Text Screenshot
     
  3. Click OK to apply your changes. Once you're done editing the page click Save to make it live.

Width and Height

  1. Select the inserted image by clicking on it. Then click the Image button on the top menu of the overview panel.

    Image Button Screenshot
  2. Go to the Image Info tab.

    Image Info Tab
     
  3. Next to the Width and Height section there is a lock icon. If the icon is closed, when you enter either the height or width the other dimension will automatically adjust so the image retains is dimension ratio. If the icon is unlocked then you can manually enter both dimensions. The ratio here may change so the image could appear stretched or compressed. Lock or Unlock by clicking on the icon depending on how you want to change the image.

    Lock Icon

    Generally you will leave this icon as locked.
     
  4. Enter in the width, height, or both. If your image is locked then you need to only enter one dimension and the computer will calculate the other. This measurement is in pixels. The maximum width of an image before it gets cut off on our site is 460 pixels. The Preview Box will show you what your image will look like. 

    Preview Screenshot

    Notice the picture is unlocked so it appears stretched when you enter disproportionate dimensions.
     
  5. Next to the lock icon is a refresh button you can click to return your image to its original dimensions. 

    Refresh Button Screenshot
     
  6. Click OK to apply your changes. Once you're done editing the page click Save to make it live.

Borders:

You can easily add a border around an image without knowing HTML. The border will appear as a black border.

  1. Select the inserted image by clicking on it. Then click the Image button on the top menu of the overview panel.

    Image Button Screenshot
     
  2. Go to the Image Info tab.

    Image Info Tab
     
  3. In the Border section type the size of the border you would like. This size is in pixels and generally will be a fairly small number (5-10).

    Border Screenshot
     
  4. Click OK to apply your changes. Once you're done editing the page click Save to make it live.

HSpace and VSpace:

HSpace adds spacing on the left and right sides of the image. VSpace adds spacing above and below an image. This can help make an image look less cramped.

  1. Select the inserted image by clicking on it. Then click the Image button on the top menu of the overview panel.

    Image Button Screenshot
     
  2. Go to the Image Info tab.

    Image Info Tab
     
  3. In the HSpace section add the amount of space you want horizontally and do the same in VSpace for space vertically. These units are in pixels and generally will be small values (5-20 pixels).

    HSpace and VSpace Screenshot
     
  4. Click OK to apply your changes. Once you're done editing the page click Save to make it live.

Alignment: 

Just like with text, images can be aligned on the left or right side of the page. Aligning them makes the text appear around the image, instead of the image resting on top of the text.

  1. Select the inserted image by clicking on it. Then click the Image button on the top menu of the overview panel.

    Image Button Screenshot
     
  2. Go to the Image Info tab.

    Image Info Tab
     
  3. In the Alignment section, select either left or right. Images normally will default to "not set". 

    Alignment Screenshot
     
  4. Click OK to apply your changes. Once you're done editing the page click Save to make it live.

Linking:

Just like with text, you can also link an image. When you make an image a link, people will get directed to another web page when they click on the image.

  1. Select the inserted image by clicking on it. Then click the Image button on the top menu of the overview panel.

    Image Button Screenshot
     
  2. Go to the Link tab. In the URL section, type the URL that you want people to be taken to when they click on the image. In the Target section, select New Window if you are linking them to a site that isn't on the Law School site. You can leave the Target as <not set> if you're directing them to a SLS page. 

    Image Link Screenshot
     
  3. Click OK to apply your changes. Once you're done editing the page click Save to make it live.