Google Docs and inline images (CP related)
-
I write docs and grab screenshots and paste them into Google Docs. Sometimes those documents end up being articles I post to CodeProject. Images However, CP wants the images to be uploaded to CP servers as separate image files. Google Doc HTML Creator (Save as...) You can download the document as a zipped HTML and Google Docs will pull out every image from your document and save them in a \images directory. That's very cool. That's very nice because now you have all of the images saved as PNGs and you didn't have to do any work. The Problem With The Images The problem is that the images are all out of order. They're named like: imageXXX.png in consecutive order (image1.png, image2.png). Not Same Order As Your Document However, the order that they are numbered in is not the order they appear in your Google Docs document. I have no idea why that would be true. What is wrong with some devs' minds? :laugh: Finally, i haz teh Codz!! Here are the steps. 1. Download your Google Doc as a zip html 2. unzip it to a local directory 3. Open in your favorite browser (It's FireFox, right? Mine too.) 4. Hit F12 to open dev tools / console. 5. Run the following script**:
document.querySelectorAll("img").forEach((s, counter=1) => (console.log("mv " + s.src.substring(s.src.lastIndexOf("/")+1,s.src.length) + " 0"+counter++ + ".png")))
This will generate output on your console that looks like the following:*
mv image38.png 00.png
mv image3.png 01.png
mv image36.png 02.png
mv image28.png 03.png
mv image9.png 04.png
mv image29.png 05.png
mv image11.png 06.png
mv image37.png 07.png
etc...6. Copy all of those lines, go to your images folder and run it. Now all of your images are renamed in order that they appear in the Document. This will make it far easier when you copy your Google document to CP and upload the images. You can insert them back into your document in order. It's much easier. * If you are on a Windows machine (sorry for you :cool: ) then simply use the following script (changes mv to ren). Windows Version
document.querySelectorAll("img").forEach((s, counter=1) => (console.log("ren " + s.src.substring(s.src.lastIndexOf("/")+1,s.src.length) + " 0"+counter++ + ".png")))
** Yes, you can make the script even better by cleaning up some things, but this gets you there and is good enough for what I need.
