Tips and tricks for working with images on your XSite
This document describes several ways the Content Editor helps you work with your images on your XSite pages.
Document 7034 | Last updated: 09/14/2015 MJY
Images can be used on XSite pages to grab visitors' attentions, help them navigate, and professionally communicate your message. For this to work, you need to carefully control the size, placement, and other attributes of every image on your page.
There are many ways to work with images on a web page, and with that flexibility comes a bit of complexity. Below, you'll find tips and tricks to help you quickly create a polished page using images.
Ensure you have the rights to display an image on your website. Copyright infringement carries hefty penalties, so double‑check before placing any image on your page. One exception: the built‑in clip art is free to use anywhere on your XSite.
The Content Editor makes it easy to take an image from your PC and place it on your page.
Here's how to do it:
That's all there is to it. If you like what you see, remember to save click Save and Continue at the bottom of the Content Editor.
Your XSite comes with a lot of clip art that is widely useful across your pages. You're free to use these images anywhere on your XSite. Read on to find out how to use clip art.
That's it! Now you'll see your page with the clip art inserted at your cursor's position. If you like what you see remember to save click Save and Continue at the bottom of the Content Editor.
Controlling image sizes on your page is important, and there's more to it than you might imagine. Below are the biggest considerations:
This is the width and height of the image. On a web page, it's typically measured in pixels (px). The width is usually listed first — the image to the right is 90 x 117px.
It's important to know that the image can be one size when you're looking at it on your computer (we'll call it the "source"), but can be a totally different size as it appears on the web page (call it the "display size."). It's best if the source size is as close as possible to the display size you want before you put it on your page. Usually, that means you need to resize your image before you place it on your page.
This is the ratio of the width to the height of the image. In most cases, you won't want to change the aspect ratio of the image because it will end up looking "squeezed" in one direction. For instance, the image to the right has been resized by changing the height, but not the width. When you resize an image, you'll likely want to constrain, or "lock", the aspect ratio so the image doesn't look weird after resizing.
There are many image resizing tools available, and most of them function about the same way. One really easy tool that's available for free on the web is called Image Resizer for Windows. Click here to download it. It only resizes images, so if you're looking for more advanced tools you could use something like Paint.NET.
You're done! Now the image is ready to be placed on your page.
The way your text aligns with your images can affect the readability of your page. Fortunately, there's a simple way to arrange your text and images to make your content easier to read.
If you are happy with the results, remember to save click Save and Continue at the bottom of the Content Editor.
In the earlier section titled Place images on your page, you saw how to place images on the page. But you might need more control over the location of the image than placing it "inline" with the text.
Here's how to get the precision you're looking for:
Tables give you a way to structure the layout of your page by creating columns and rows of varying sizes. For example, let's say you want to create a row of 3 images, each with a caption just beneath. Here's what you would do:
By itself, that's confusing because it doesn't look like it would hold any images. But things will improve shortly.
The next step assumes there are three images that have been resized and uploaded to your XSite. If you need help uploading images, see the previous section Placing images on your page. For this example, the images are 125 x 125px. If you're following along, click here to download the images, and then upload them to your XSite.
Now you'll see that the left‑most column in the table has expanded to accommodate your image. If you've already sized the remaining images the way they should be, you can repeat the steps above to place images in the other two cells on the top row of the table. As you do, each cell will resize to to fit the image. Then, you can place text in the second row below each image, and end up with something like this in the Content Editor:
This is the result on the page:
|first image||second image||third image|
If it turned out like you thought, remember to save click Save and Continue at the bottom of the Content Editor.
That's just a basic example of how you can use tables to arrange images and text on you page. Some people use tables exclusively because of the accuracy and flexibility in placing sections of text, videos, and other elements on the page. For more info on tables, see the user's guide here.
Once you've become accustomed to using the Content Editor for the steps mentioned above, you're probably ready to take advantage of some more advanced features it offers.
For this section we'll assume you know how to get to the Content Editor, open the Image Manager, and other steps discussed previously in this document.
Quite often, images are used to get a site visitor to click something. It's easy to create a hyperlink from an entire image, but if you need different parts of the image to link to other locations, you'll need to create an Image Map. Here's an example:
Let's say you have created this image, and you need all of the "tabs" to link to different pages on your site. But this is a single image, so you'll need to "map" the areas of the image that should work as hyperlinks. The Content Editor makes this easy, and here's how:
When you want to display several images on a single page, it's often handy to show your visitors a smaller version of each image (called a "thumbnail") that, when clicked, will display the original image. This lets you manage the space on your page better, and reduces the amount of time it takes your page to load.
Creating thumbnails is usually a lot of work, but your XSite makes it easy. Here's how: