: How to export html photoshop to public image host? I'm looking to export my photoshop designs with both html and images that were sliced up. I'd like to automate the process to host the images

@Harper654

You could determine your Public Folder's Dropbox URL and then open your HTML file and update all of the images tags by search and replacing them with the Dropbox path. This doesn't get you a simple list of public image links, but it will modify your HTML file, so that its links point to each public image (on Dropbox).

Here's an example that I set up in my Dropbox Public Folder...

1) Create a folder inside the Dropbox Public Folder to hold your projects files. In this example, I have named the folder "webpage-sharing".

2) Place the HTML file(s) and image(s) inside the "webpage-sharing" folder.

3) Right click on the the HTML file and "Copy Public Link".

4) Paste the public link in a text file. In my example, I ended up with this link: dl.dropboxusercontent.com/u/5699747/webpage-sharing/index.html
5) Copy the URL, up to and including the slash (/) preceding the HTML file name. dl.dropboxusercontent.com/u/5699747/webpage-sharing/
6) Open the HTML file in a text editor (TextWrangler, BBedit, etc.) and perform a search and replace on the IMG tags. Here's what I used:
Search: <img src="
Replace: <img src="https://dl.dropboxusercontent.com/u/5699747/webpage-sharing/

This changes a tag like...
<img src="catsoup.jpg" alt="catsoup photo" />

to a tag that points to the public Dropbox...
<img src="https://dl.dropboxusercontent.com/u/5699747/webpage-sharing/catsoup.jpg" alt="catsoup photo" />

You can test this yourself by clicking on my index.html file public link (you'll see a page containing two photos) and downloading the HTML file to your computer. If you open the locally copied file in your web browser, the cat and frog photos won't appear, since their links are broken. Open the index.html file and do the S&R and the photos will appear.

Vote Up Vote Down