A departure from my typical DIY tutorials, here’s a step by step tech tutorial for taking old web galleries (created by Adobe PhotoShop 7 and similar versions of photoshop), which are now very out of date, and migrating them to a content management platform like WordPress where they can be adapted and modernized.
In my early twenties, I got photoshop and went crazy. I never deleted photos, convinced myself they needed to be on the web, and uploaded countless images of my little farm to my old website using Adobe Web Galleries feature. This Photoshop feature neatly took a gallery of images and created thumbnails and browsable HTML galleries, which I’d then pepper with commentary or an early version of instructional tutorials when I had time. Fast forward 10 years and all of these photo galleries are hopelessly outdated, 1-per-page image galleries are like dinosaurs with today’s high-speed connections, and the search engines that once sent many visitors to these pages now refused to even index such sparse content.
I lamented the loss of this content for years, until a request from a friend to help her save business-critical data stuck in a similar gallery prompted me to create a solution. Like putting together a puzzle, I found that I really enjoyed creating a way to process the 1000’s of individual files in such a way that the end result was modernized, high quality content, grouped and curated in such a way that the content was valuable to users, preferable to search engines, and finally, once again, monetizable.
I’ve included free instructions, start to finish, below. If you’d like to hire professional help migrating your galleries from someone with experience reformatting these galleries, drop me a line.
1. Clean Data with a Batch HTML find-and-replace
Batch remove line breaks, excessive HTML (save <p> and <br> if your file contains blocks of text, any tabs, and all scripts using an HTML editor that can perform “find and replace” actions across multiple folders and sub-folders. You can skip this step and perform these changes with notepad once the file is merged, but the potential for corrupting data is higher if not cleaned prior to merging.
2. Merge the files from the Adobe created “/pages/” Folder into one Document
Use a file merge site like filesmerge.com to merge all the files from the /pages/ directory into one file.
3. Remove Remaining Formatting from Merged File
Actions to perform in notepad:
Replace <TITLE> and </TITLE> with TAB
We’ll now focus on removing remaining formatting from this merged file, till only photos and captions remain. As you clean, you’ll be preparing your file to be imported into a spreadsheet where columns can be named and unneeded colums deleted.
4. Remove Adobe Menu
Removing the standard Adobe web gallery table tripped me up for awhile, but with the right re-formatting you can easily remove the menu with one click through a spreadsheet editor. (This goes most smoothly if you’ve removed all line breaks and double spaces from your code, I’m demonstrating with line breaks so the code is easier to see)
Here’s the table we’re trying to get rid of. It’s a challenge because the code is different for each page of the web gallery.
<TABLE border="0" cellpadding="0" cellspacing="2" width="200"> <TR> <TD width="80" align="center"><A href="hoof03.htm" ><IMG src="../images/previous.gif" height="30" width="30" border="0" alt="Previous"></A></TD> <TD width="80" align="center"><A href="../index.htm" ><IMG src="../images/home.gif" height="30" width="30" border="0" alt="Home"></A></TD> <TD width="80" align="center"><A href="hoof05.htm" ><IMG src="../images/next.gif" height="30" width="30" border="0" alt="Next"></A></TD> </TR> </TABLE>
The links are unique to each page, but the frame around it isn’t, so we’ll go through and replace the first and the last sections of the table with tab delineators, which, when we import into excel, will leave the unwanted code as a standalone column that we can delete.
<TABLE border=”0″ cellpadding=”0″ cellspacing=”2″ width=”200″>
<TD width=”80″ align=”center”><A
with a TAB (or custom delineator)
IMG src=”../images/next.gif” height=”30″ width=”30″ border=”0″ alt=”Next”></A></TD>
with a TAB (or custom delineator).
After these replacements, the code that remains in between the two tabs will be easy to delete later.
5. Move Images, then Replace old image addresses with new file locations.
Drag the contents of the “/Images/” folder of your Abobe Gallery into your WordPress Media Library. Once new images are uploaded, right click to open one in a new window and view the URL of one of the images.
It will be something like yoursite.com/wp-content/2019/02/imagename.job. In an Adobe web gallery, the image locations were always “../images/”. To move your images with this gallery content, just do a find and replace in the merged document and replace src=”../images/” with src=”https://www.yoursite.com/wp-content/foldernames/”
6. Save the HTML stripped Merged File as a .txt or .csv file
If your html editor won’t let you save as .csv, opening an html file in notepad will. You can also just cut and paste into most spreadsheet editors.
7. Open file in Excel or Calc
Be sure to alert, if not autodetected, to your Tab or custom delineators.
8. Edit & Standardize Spreadsheet Columns
If you have stripped HTML correctly and followed the instructions above, you should find your entire Adobe Web Gallery represented in a tidy grid of columns and rows. The Title, having been set off by Tabs, will be in the first column with any image descriptors in the second column, the third column of trash data from defunct Adobe navigation menu, and finally the IMG tag and possibly a caption following it.
Your spreadsheet might be messy or misaligned, but it’s actually easy to clean up from here!
- Start by deleting the column containing remnants of the Adobe navigation menu.
- Use “sort by column” to group together rows with similar misalignments, copy and paste to notepad, replace the problem with an appropriately placed tab, and repaste into the spreadsheet.
- Work with the data till it’s uniform (when I’m working with a corrupted file, I used “sort by column” and work my way one column at a time through the data.
An old Adobe Photoshop 7.0 Web Photo Gallery will break down, with HTML and menus removed, to these basic columns: title, caption, image, caption.
9. Choose to Import as Group or Individual Posts
You can make each page of your Adobe Web Gallery into a separate WordPress post or you can make your entire gallery into one long post with many photos. (If it’s *too* long, you can easily manually split into multiple posts, but proceed for now as if you’re making one.
Choose the long-post if your photos have only a filename or a few words as content. Choose the individual post option if each row contains around 300 or more words describing the image. I’ll give instructions for each below.
10. Final Step: Import entire Web Gallery to One WordPress Post (SKIP IF CREATING INDIVIDUAL POSTS)
Creating a single post with all your images and captions is easy and takes only two steps!
10a. Add an extra column between each of the columns in your spreadsheet. In each row of the columns, add a <p>. In the last column, AFTER the column of images and after any captions, ad a row of <hr> to create a line separating between posts so viewers know which caption applies to each photo.
10b. Copy all cells with content, create a new post in your WordPress blog, click to the TEXT (not visual) tab, and paste the content of your cells in the text box. Saving and viewing this file via your WordPress front end should reveal a curated gallery that easy to view all at once.
11. Final Step: Import Adobe Web Gallery to Multiple WordPress Posts (SKIP IF CREATING GROUP POSTS)
In the Early 2000’s, I used to write articles using Adobe Web Galleries as my publishing media- so figuring out how to convert the galleries to individual posts was key. Luckily, if you’ve made it this far it’s just a few more steps to see all your work saved as individual posts.
11a. Add a row at the top of your spreadsheet and title your columns as title, caption, text body, images, etc.
11b. save the spreadsheet as a .xls file (do NOT save as .csv if any of your content, captions, etc contains commas)
11c. download and install the Plugin “WP All Import” (or similar wordpress import Plugin. Now that your html is simplified to columns of data, there are many plugins to help you import the data to WordPress, Blogger, or a number of other CMS platforms.)
11d. Follow your plugin’s instructions to create posts based on this file, with prefilled titles, bodies, and featured images.
Though this process involves more than a few steps, it’s a reliable and fairly quick method I developed to “save” the now-outdated HTML galleries created by Adobe Photoshop 7 and other versions of Photoshop. By converting these galleries to raw data and importing that data into WordPress I’ve been able to save thousands of captioned images and hundreds of articles I’d written over the years. Restructuring the data into larger, more coherently grouped clumps instead of stand-alone pages helps adapt the data to how people use the web currently.
Lindsayanne is a professional artist, writer, and serial-DIY-er with a knack for solving problems creatively at home, in the studio, out in the garden, and even online. Learn more about Lindsay, her training, and her background here.