Skip Navigation Website Accessibility
Like us for expert tips!

Workshop: Working with Images and Links in Tables


Changing an Image in a Table Many of our websites utilize a small table of two or more images on the home page called What's New.  If you have a similar table on your website that you would need to change images for periodically, this Workshop will be useful for you.
We start by logging into the website in the normal way and clicking either Home in the opening screen or Preview Site in the Admin Toolbar.
Find the Module Toolbar in the upper left corner of the area that has your table with images, and click on the Edit button (the fat little pencil).
When the Content module opens, scroll down if necessary until you can see the entire Content Editor, and then click on the first image in the table that you would like to change.



We need to go into the Image Properties and you can do so in one of two ways: 1) Right-click the image (Ctrl+click for Mac users) and click Image Properties in the pop-up list (Ctrl-click for Mac users), or 2) Click the Insert/Edit Image button (the mountain with the yellow sky).

When we are working with images in a table, we need to make sure that if the images are going across the table in a row that they all have the same height.  If the images are going down the table in a single column, they need to have the same width.  Most likely, your What's New table has two or three images going across the table in a row.  Write down the number that is most important for your table.  For the other number, you don't need to worry about it very much.  As long as the important one is consistent, the other number can vary between images and your table will still look all right.
 
Click the Upload tab and go through the steps of uploading the new image you want: 1)  Click Upload, 2) Click the Browse button and search your computer for the new image (remember the rules for images: less than 1000 pixels wide and jpeg images are best), and 3) Click the Send it to the Server button.  The system will pop up a window for you letting you know when the upload is complete, click the OK button.
You will be taken automatically back to the Image Info tab.  You will notice that the new image comes in at its actual size.  It is a good idea to upload an image that is close to the target size; you should not have to reduce the image size more than 50% to make it fit.  (Click here if you need help working with resizing images in Picnik.com) Look at the number you wrote down for the pixel size and enter it into the appropriate box.  The image will resize and the other dimension will change as well to keep the proportions the same.  At this point, the images in your table should look the same in their important dimension.
To finish the process, click the Save Module button at the bottom of the screen.
 



 
   
  
Updating an Image Link
So now that we have the new image in place, we need to make sure that it is properly linked.  Whenever you change an image as we did above, the new image will still have the link that was there for the old image.  So if the place you are linking to will not change for the new image, you don't need to go through the following steps.  A good example of when you wouldn't need to update the image link is if your link goes to a Category of products in your online store for New Products or something similar, and the image you just changed is for the newest addition to that Category.
  If you do need to update your link, the first thing you should do is go to the page on your site that you want visitors to go to when they click on the link.  In most instances, this will be either a Category or a Product in your Online Store.  
  In the address bar at the top of the page, click once to select the entire URL (this is the line of text that starts with http:// at the top of your browser) and copy the address.  If you are creating a link like this and your site is still on one of the ONYX domains (e.g. onyx125.info), you need to copy only what is after the .info, for example you would copy the blue portion of the following link:  http://www.onyx125.info/shop/fabrics/moda/kitty-kaboodle.htm  It may be difficult to see, but the / before the word 'shop' in the example link is also a necessary part of what you should copy.  Copying for links in this second way will work whether you are on an ONYX domain or whether your site is live.  Copying the entire link, as in the first example, works only if your site is live on your own domain.  

  After you copy the link, go back to your Home page and once again click on the Edit button (the fat little pencil) in the Module Toolbar for the module that contains your What's New table.  
  Click on the image for which you are updating the link; you will see the resizing handles pop up at the corners and sides.  
 
  Click on the Insert/Edit Link button  and paste the link you copied into the URL field.  Since we are linking to a page on our website, there is no need to do a New Window in the Target tab.
  If you also need to update a text link below the image, highlight that text and repeat Step 5.  Remember the rule for creating text links: When you select text to turn into a link, make sure your selection does not start or end with a space, or the link underline will hang off on that side.  
  Click the Save Module button to save your changes, and then click on the link(s) you made to test them.