Replacing Images

• Published April 14th, 2010 by Websites and Services Support

Replacing web site images by renaming your original images to replace/overwrite existing images within each gallery, home page or spotlight images.

Spotlight images are static and may appear on your information text pages. You may follow the same instructions as you do for switching out a batch of gallery images.  For best results when it comes to the speed of a page loading, we recommend you review how to manage your images before following these instructions.

Requirements

• Adobe Photoshop version 5.5 or above.
• FTP Program

Other image manipulation and FTP software may be used, however these instructions were prepared with the CuteFTP program in mind. For additional tutorials using other image resizing programs or FTP clients, please click here.

1. Get Thumbnail Information

You may refer to the "About" page of the original package website for image sizes at MarathonPress.com.

1.1 Open your web site and go to the gallery page that you want to update.

1.2 Some HTML websites allow for you to right-click the thumbnail image and select Properties from the menu for details. However, some HTML sites have flash elements and may not allow for your to easily view the properties to find the image file path. A window similar to the following should be displayed.

1.3 Note the larger of the Width and Height attributes, in this case 75 pixels. This is found next to Image Dimensions: as the stylesheet will resize the thumbnail accordingly.

1.4 Note the location of the image file so you can easily navigate your folders within your FTP program. In this case the images are stored under content/galleries/fineart/thumbnails followed by image name. Your new photograph needs to be rename 04.jpg to replace this photo. Your site should be setup in a similar fashion.

1.5 Close the Properties window.

2. Get Large Image Information

As stated above for thumbnails, you may refer to the "About" page of the original package website for image sizes for the home page, galleries, and spotlight images at MarathonPress.com.

2.1 If you have an HTML website, place your mouse pointer on top of one of the large images, then right-click and select Properties from the menu. However, some HTML sites have flash elements and may not allow for your to easily view the properties to find the image file path.

2.2 A window similar to that shown in Figure 1.2, above, should be displayed.

2.3 Note the width and height attributes. If you want to use the maximum image space, resize image to the maximum HEIGHT. In Web Photo Gallery, set the large image size and then change the contrain to Height (not both). This will automatically adjust the image width. However, if you have a panoramic photo or wedding album layout, choose the maximum width and constrain the WIDTH so the height will automatically adjust.

2.4 Close the Properties window.

3. Determine Which Images to Replace

If you will be replacing all of the gallery images you can skip this step.

3.1 Place your mouse pointer on top of the thumbnail image, right-click, and select Properties from the menu or count your images across the page like reading a book.

3.2 Note the name of the image. (usually numbered 01.jpg, 02,jpg, etc.) The name of the image in the example above is 04.jpg. Repeat this process for each image that you want to replace.

4. Prepare the Source Images

4.1 Create a new folder (i.e. on your Desktop or in your My Documents folder).

4.2 Name this folder "source".

4.3 Copy the source images into this folder.

4.4 Rename the images according to the names that you noted in Step 3.2. If replacing all of the images, then simply rename the images 01.jpg, 02.jpg, 03.jpg,...15.jpg, 16.jpg.

5. Create the Destination Folder

5.1 Create another new folder (i.e. on your Desktop or in your My Documents folder).

5.2 Name this folder "destination". Photoshop will output the images it generates to this folder.

6. Process the Images

6.1 Open Adobe Photoshop.

6.2 In Photoshop, click the File > Automate > Web Photo Gallery menu item. The Web Photo Gallery window should be displayed. Change the Styles drop-down menu to Simple.

6.3 Click the Browse button (Windows) or the Choose button (Mac).

6.4 Locate and select the folder created in Step 4, then click the OK button (Windows) or the Choose button (Mac).

6.5 Click the Destination button.

6.6 Locate and select the folder created in Step 5, then click the OK button (Windows) or the Choose button (Mac).

6.7 Click the Options drop-down menu and select the Thumbnails option.

6.8 Set the size for the thumbnails in pixels as determined in Step 1.3.

6.9 Click the Options drop-down menu AGAIN and select the Large Images option.

6.10 Set the size for the large images in pixels as determined in Step 2.3.

NOTE: If you want to watermark your own images before posting them in a gallery, click on Options drop-down menu and select the Security option. Now you can select Custom Text setting or any of the other options. Then you can position the watermark and even change the font color and it's opacity.

6.11 Click the OK button to begin processing the images.

A web browser window will open to display a preview of the gallery once Photoshop has finished processing your images. You can close this window.

7. Upload the Images

7.1 Open your FTP software.

7.2 Connect to your FTP site.

The following information is needed to connect to your FTP site:

• Host name, also referred to as host address
• User name
• Password

Please contact Marathon Internet Services Customer Support to obtain this information if you do not already have it.

7.3 Once connected, locate and open the remote folder determined in Step 1.4.

7.4 Open the destination folder and locate the images and thumbnails folders.

7.5 Upload the images and thumbnails folders by single-clicking on the folder on the left-hand side and then clicking the upload button at the top of the window.

7.6 Once you have uploaded your images, visit the gallery page on your web site to verify that the new images are displayed.

In some cases you will need to refresh your browser window (either by pressing the F5 key on your keyboard or clicking the refresh button in your browser) in order to see the new images.

Categorized In: change gallery images | update gallery images