How to add images in your Google Apps Script Web Application

Today's hack, how to add images into your google apps script website without using a hosting solution. This is a fairly advanced topic, and does require the use of a little *nix command line to get it done. It also covers some HTML, and CSS subjects which hopefully you are familiar with since you are using Google Apps Script to make your website.  You will also need to know your way around Google Drive, and Google Apps script. As always you can visit the Google App Script +Google Community as they are always a helpful bunch.

If you've been tinkering with Google Apps Script for web development for any amount of time I'm sure you have ran across the problem of how to use images in your website without having to host the images on a separate server, and url link them in your CSS. I have come up with two solutions for this problem, both will be outlined. The first, which is pretty straight forward, and can be easily accomplished using Google Draw. The second is a little more complicated, and requires the use of a little linux command line magic to get it done.  So lets get started!

Lets open a fresh project, and write the framework we need to create a barebones Webpage.  We will need to create 3 files for this, and we will be using a bit of template magic to make it happen as well.

• Just for sanity purposes. code.gs, index.html, and logo.html. 
  
• Now using Google Draw, lets create our logo we plan on using in our website. For this example, a simple smiley face will do.
  

• Now you want to download the image to your computer as a SVG.
  
• Once that is done, open the SVG file with your favorite text editor and copy everything but the first line, which will will look like this. **Avoid copying the line that says "<?xml version="1.0" standalone="yes"?>" **
  

• Now lets paste that into your logo.html. 
  
• Finally lets write the include which using the template language will add that to the div you are wanting your image in. 
  
• Finally lets write the include which using the template language will add that to the div you are wanting your image in.
  
• You can apply a style to your SVG tag to adjust the height, and width you want with your image the same as any HTML element.
  
•  Once published, you will see your created logo!
  

Great, we've now used a SVG for a logo. But for better resolution backgrounds and better quality pictures. I like to use PNG's. But you can't just use PNG files, first you need to convert them into base64, and then strip them of white space. For this we will need a little linux command line magic. So lets begin. 

• You want to avoid using files larger than 2mb's in this process as it will slow your application delivery down considerably. So find a PNG you wish to use, and download the file. 
  

• Now to the command line magic. Run the following command at the console " cat **NAME OF FILE**.png | base64 > temp.base64 && tr -d '\n' < temp.base64 >> image.base64 && rm temp.base64  " in the same directory as your PNG file replacing the text where is says **NAME OF FILE** with the name of the png, and you should now see a file called image.base64. 
  
• Now simply upload image.base64 into your Google Drive.

• Now lets write the CSS to include this file as a background image. 
  

Great! Now we have used both PNG's, and SVG's in our Google Apps Script Web Applications! I hope this helps! You can always view the full source here.