Using multiple images on your website page can be beneficial if you have a series of photos you want displayed, or you want to present a sequence of photos that shows progression. For example, you may want to show the successful changes of someone’s facelift or before and after pictures of a breast augmentation. You’re likely to want these pictures arranged in a certain order, and you may also want them to have a uniform appearance.
When you add multiple images to your website using DSS, you may experience challenges lining them up to create that consistent look. The following instructions explain how to use tables to line up photos to produce the appearance you want.
How to Align Multiple Images on Your Website Page Using a Table
Overview: These instructions show how to use DSS to place the following three photos so they’re aligned evenly on a website page.
Step 1: Be sure the images you want to place on your website page are exactly the same size and dimensions. Because it’s difficult to properly align photos if they’re of varying heights and widths, try to make them as uniform in size as possible. If you need help with resizing, read through our instructions on this process.
Step 2: Log into DSS and display the content where you want the image to be added.
Tip: You can use the Search and Edit option under any of the Site content topics to find the content you’re looking for. Or you can use the orange Search Items magnifying glass icon at the left side of the screen.
Step 3: Once the desired content displays, click the location where you want to insert a table. In the example below, the cursor is placed at the end of the first line of text.
Step 4: Under the Rich Content Editor heading, click the Table icon. This icon is designated by a grid of small boxes. If you mouse over the icon, the word “Table” displays.
Step 5: In the Table Properties dialog box, input 1 for Rows, 3 for Columns, and 100% for Width. Then click OK.
A table displays with one row and three columns that extends the full width of your website page. The table is located at your cursor location. In this example, the table appears following the first line of text.
Step 6: Place your cursor in Column 1—the first column at the far left.
Step 7: To select the image you want to place, under the Rich Content Editor heading click the Image icon. This icon is designated by a picture of a mountain. If you mouse over the icon, the word “Image” displays.
Step 8: Click the Browse Server button next to the URL box.
Step 9: Click the Upload icon at the top of the window.
Step 10: Navigate to the location of the saved image, and double-click it.
Step 11: Once the image uploads into the Image Properties dialog box, click OK. The image displays in the first column of the table.
Step 12: Follow Steps 6 to11 to insert the other two images. Place your cursor in Column 2, and select the desired image you want placed in this column. Place your cursor in Column 3, and select the desired image.
Tip: Columns 2 and 3 will appear thin until you place images inside them. Be sure to position your cursor inside each column when inserting an image to ensure it’s placed into the correct one.
Once you’re finished inserting the images, all three should be aligned evenly across the website page.
As always, Foster Web Marketing is dedicated to your success. If you need any help or feel something is not working properly, please contact us using the DSS Need Help button, emailing [email protected], or calling 888-886-0939. We will be happy to assist you!