How to Create a Thumbnail Icon That Links to a Larger Image Using DSS

There may be times when you want to add an image to your website, but the image needs to be very large in order to view all the details. Because so large an image might cause page loading issues, it’s better to display that image in a pop-up window. For example, this might be helpful if you need to display a detailed infographic, but sizing it to fit your webpage causes the detail of that graphic to be lost.

Creating a thumbnail—a small image representation of a larger image—and linking it to the larger image can help manage the size of a particularly large photo, graphic, or picture. By placing the image in a pop-up window, the image doesn’t take up too much real estate on your webpage, and it doesn’t cause problems or crash your site because of its size.

Create a Thumbnail Image That Links to the Larger Image

Step 1: Resize the original image you want to use, so that it’s two different sizes. The small image will be the thumbnail icon the user clicks in order to see the larger-sized version of the image in a pop-up window. Because you want the smaller image to fit nicely on the page, resize it to approximately 600 pixels wide or less. The larger version of that image, to be placed in the pop-up window, should be large enough for users to see the necessary and critical details. If you need help with resizing, read through our instructions on this process.

Step 2: Once you’ve sized both images, save them with different filenames. DSS does not allow files to have the same names.

Step 3: Log into DSS, and display the content where you want the thumbnail 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 4: Once the desired content displays, click the location where you want to insert the image. In the example below, the cursor is placed at the end of the first sentence. This is where the image will be placed.

Use the cursor to select the location to place your image

Step 5: 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.

The Image icon allows you to select the picture you will place on the page.

Step 6: Click the Browse Server button next to the URL field.

The “browse server” button is next to the URL box.

Step 7: Click the Upload icon at the top of the window.

The Upload icon allows you to move a picture from your computer to the online image collection.

Step 8: Navigate to the location of the smaller saved image you want to use, and double-click it.

Step 9: Once the image uploads into the DSS Image Library, double-click it again. This places the image into the Image Properties dialog box.

Step 10: If you’re satisfied with the size of the image, click the orange OK button. Your image is placed in the specified location within the content.

Your image will appear at the selected location

Step 11: Follow Steps 5 though 7 to upload the larger image into the DSS Image Library box.

Step 12: In the Image Properties dialog box, select the information in the URL field and copy it, and then click the CANCEL button. You’re not trying to place this image on your webpage.

Copy the URL of the image you just loaded

Step 13: Navigate to the small image you inserted in your content on the DSS page, and single-click the image.

Step 14: Under the Rich Content Editor, click the Link icon.

Click the Link icon to connect the small and large images

Step 15: In the Link dialog box, paste the copied URL information into the URL field.

Paste the image address you copied into the URL field

Step 16: Click the Target Tab

Step 17: Under the Target section, click the down arrow, and choose , and click OK. The larger image is now linked to the thumbnail image.

You want the larger image to appear in a new popup window

Step 18: Click the OK button.

Step 19: Click the orange SAVE button at the top right of the DSS screen.

Step 20: Click the page URL to test your thumbnail image. Double-click the image to ensure that the larger image pops up in a separate window.

Testing the thumbnail icon will cause the larger picture to appear in a separate window

Notice that the user can now see the larger image that includes the complete landscape after clicking the thumbnail image of the palm tree.

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, by emailing [email protected], or by calling 888-886-0939. We will be happy to assist you!