File Embedding

MS Word to PDF (Title Property)

When converting, from an MS Word document to a PDF document, the "Title" property becomes the PDF document name. If no "Title" property exists in MS Word, the filename becomes the PDF document name. You can find the "Title" property, within MS Word, under the "File > Info" menu, within the "Properties" label on the right side.

If you click on the two documents below you can observe how the "Title" property is shown. The document "No Title Property" will show the filename in the upper left side of your PDF viewer (you will see: "135618-484f43f3-3f39-4d03-a7c7-7a96a7d0cd54.pdf"). The "With Title Property" document will show the title in the upper left (you will see: "With Title Property").

Embed a Published Google Document

  1. Publish the document using the "Publish to web" option on the Google Docs "File > Share" menu.
  2. Copy the "Embed" code from the "Publish to the web" dialog.
  3. Paste the embed code into a content section on the web page (you'll need to switch to the "Source code" view of the content section).

 

The embed code will be very basic, you'll probably want to add a width and height to it. The base code will look something like this:

<iframe src="https://docs.google.com/document/d/e/2PACX-1vSpS89iMI9cZH2JZR31vN7FA1VrT94L8N-wcklVYzBZ3t4kQQ53ioohyhySQxWIl5KH6sSuxZ6luFk1/pub?embedded=true"></iframe>

You'll want to add the width and height by adding width="100%" height="800" inside but at the end of the "<iframe>" tag (before the ">" and final "</iframe>" tag). It will look like this:

<iframe src="https://docs.google.com/document/d/e/2PACX-1vSpS89iMI9cZH2JZR31vN7FA1VrT94L8N-wcklVYzBZ3t4kQQ53ioohyhySQxWIl5KH6sSuxZ6luFk1/pub?embedded=true" width="100%" height="800"></iframe>

You can also "dress up" the iframe itself. I like to change the width to 99%, remove the hard border, and add a drop shadow, like the example above. This can be done by styling the iframe with style="border: 0px; border-radius: 4px; box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;" like this (the code goes within the <iframe> tag immediately after "<iframe"):

<iframe style="border: 0px; border-radius: 4px; box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;" src="https://docs.google.com/document/d/e/2PACX-1vSpS89iMI9cZH2JZR31vN7FA1VrT94L8N-wcklVYzBZ3t4kQQ53ioohyhySQxWIl5KH6sSuxZ6luFk1/pub?embedded=true" width="99%" height="800"></iframe>

Embed a Shared Google Drive Folder

  1. From within Google Drive, right-click on the folder and select "Share", then "Share" again from that sub-menu.
  2. Under the "General access" section, select "Anyone with the link" to allow anyone to view the files, or select "New Prague Area Schools ISD 721" if you only people logged in to their browser with their isd721.org Google account to view the files. If you use "Restricted" only those people listed under the "People with access" section will be able to view the files in the folder.
  3. Click "Copy link" and then "Done". You will now have a link similar to the following: https://drive.google.com/drive/folders/1-ewX1TgoGkwmUO-VI1p94ElNW1IBbxB0?usp=sharing.
  4. Paste this link into a new browser tab, Notepad, Word, or anywhere else and then find and copy the Folder ID portion of the link. This appears between the final "/" and the "?" as 1-ewX1TgoGkwmUO-VI1p94ElNW1IBbxB0 from the example link above.
  5. Google Drive folders can be embedded and displayed in list view or grid view. Using either the List View or the Grid View iframe code shown below, replace the FOLDER-ID with your actual Folder ID (the character string you copied in the previous step).

List View Code

<iframe src="https://drive.google.com/embeddedfolderview?id=FOLDER-ID#list" width="100%" height="500" frameborder="0"></iframe>

List View Example

Grid View Code

<iframe src="https://drive.google.com/embeddedfolderview?id=FOLDER-ID#grid" width="100%" height="500" frameborder="0"></iframe>

Grid View Example

Calendar URLs (Full Page or Embedded)

Instructions for creating a URL that can be used to go directly to a calendar page without opening it in the Calendar app, or used to embed a calendar in a web page. The created URL can also be used to create a QR Code that does the same thing.

1. Using "Get shareable link" in calendar settings, copy the calendar ID:

https://calendar.google.com/calendar?cid=sa40p3t1o1g7jvzse124fk43rg

Your calendar ID could look completely different. For personal calendars it's usually just a random string of characters, like the above. For group calendars it could look something like this:

[email protected]

or even something like:

en.usa#[email protected]

If that is the case, other processing will need to be performed on the URL. For example, in the case of the above calendar ID, the pound sign "#" needs to be converted to "%23", the at sign "@" is "%40", a space " " is "%20", and a forward slash "/" is "%2F". There may also be other characters in the URL that need to be converted.

2. Use the following URL and change the calendar ID (after "src=") to your calendar ID:

https://calendar.google.com/calendar/embed?wkst=1&src=sa40p3t1o1g7jvzse124fk43rg

- or -

2. If you want to show a calendar name other than the default name, add "title=Your+Calendar+Name&" (before "wkst=1"):

https://calendar.google.com/calendar/embed?title=Your+Calendar+Name&wkst=1&src=sa40p3t1o1g7jvzse124fk43rg

3. You can use either of those URLs created in Step 2 to go to the full page calendar without opening it in your calendar app, or to embed (usually with <iframe> tags) the calendar into a web page.

4. You can also use either of those URLs created in Step 2 to create a QR Code to link directly to the calendar.