SharePoint Designer for Office 365: Sub Folders in the Website Image and Document Libraries

SharePoint Designer is a powerful tool to use with your Office 365 Team or Public website. In this tutorial you will learn how to upload tons of images and documents to Libraries, as well as creating sub folders (which are disabled for the public website Libraries).

I will start with the Public Website Libraries. Office 365 has one default Image Library, and one default Documents Library. Until Microsoft enables the New Folder option, you can’t use sub folders.

In other words, you have to CRAM all images or documents in just one folder. That’s ok if your website is a tiny itty bitty website, but if you have hundreds or thousands of images or documents, then you need sub folder organization.

Download SharePoint Designer

 

Default Website Images Library

Creating Sub Folders for your Images

Paste Images from sub folders into your Web Page

If the Images are already in the SiteImages Library

 

Default Documents Library

Creating Sub Folders for your Documents

Hyperlink Documents from sub folders into your Web Page

If the Documents are already in the Documents Library

Redirect Documents

 

Download SharePoint Designer

We will use SharePoint Designer to make it easy to Redirect OLSB Documents, Images, and Page links to O365. SharePoint Designer also makes it easy to upload tons of images and documents to Libraries, as well as creating sub folders (which are disabled for the public website Libraries).

 

Download and open “SharePoint Designer 2010” , it’s free.

 

 

 

 

Then install and run it. Click Open Site.

 

 

 

Type in your O365 free name or your domain name. Then Open.

 

 

 

Then type your O365 account User ID (***@*****.onmicrosoft.com), then password.

 

 

When SharePoint Designer connects to your website, click All Files to display the website’s folders and libraries.

 

 

 

Default Website Images Library

Let’s start with the Website Images Library. All public website images are located in the SiteImages folder. You can see this if you view the html source code of your web page and search for the image addresses.

<img src=”/SiteImages/image006.jpg”

If you have a lot of images for each page, you can put these images in sub folders using SharePoint Designer.

 

Boot up SharePoint Designer. Log in to your Office 365 website. Click the All Files folder under Site Objects. Click the SiteImages folder. This is the default images folder for your website.

 

 

 

Inside the SiteImages folder you should only paste global images used on the home page or repeated on pages throughout your website. It is best to create and name a sub folder like shown in yellow below, for each web page that has images.

 

 

 

Creating Sub Folders for your Images

 

If you want images for a page to be in a sub folder of the SiteImages main folder, then inside the All Files tab click the Folder button. Create a name for the new sub folder, like the one I made below is highlighted in yellow.

 

 

On your computer find the images you want to upload, groupselect and right click and copy.

 

 

 

Open the sub folder and paste the images. Wait until the images finish uploading to your website.

 

 

 

Log in to Office 365, go to Website / Images. You can see the folder is in alphabetical order with the images. To the right, go to All Pictures / Modify this View.

 

 

 

Scroll down to Sort. Click the Sort column by: File Type.

 

 

 

Now the new sub folders will start in alphabetical order from the top.

 

 

Paste Images from sub folders into your Web Page

 

On any page in the Office 365 website editor, you can Insert an image from the default Images Library. But, the settings to this library are limited. You cannot insert images from sub folders, only images from the main folder.

 

Now that you have the images uploaded in subfolders, how do you get them inserted in your web pages? Open another page by going back to your Admin Home Page tab, and click Edit Website. Then click the Images Library.

 

Click the sub folder that was created with SharePoint Designer.

 

 

 

Then in the list of images click the image you want.

 

 

 

This will show a preview image.

 

 

 

Click the preview image. The actual image will open in your browser.

 

 

 

Right click and go to the properties of this image and you will see it’s address path:

 

****.com/SiteImages /PhotoshopEndTableTexture_images /image003.jpg

 

Right click and Copy the image. Go back to the web page you were editing, and right click and Paste the image where you want it to be:

 

 

 

If you have a lot of images to copy and paste, then it is easier to open Office 365 in two browser windows, so you have two windows side by side like below. The one on the left is for page editing, and on the right is for the Images Library. Then you can just drag the image from the right side, to the page on the left.

 

 

 

If the Images are already in the SiteImages Library

 

If you have images for web pages inside the SiteImages folder, but you want sub folders for each page, then save each web page as a Webpage Complete file on your computer. This will create an html file and a folder with all the images for each page.

 

 

Open SharePoint Designer and log in to your website.

 

Open All Files and click SiteImages. Create a new sub folder in the main SiteImages folder.

 

 

 

Copy the images from your computer. Open the sub folder and Paste.

 

 

You need to modify the code in your web pages so the image addresses point to the images in the new folder.

 

From:

< img src=”/SiteImages /image001.jpg” />

To:

< img src=”/SiteImages /PhotoshopEndTableTexture_images /image001.jpg” />

 

Use Find and Replace to do this quick and easy.

 

Click the Pages folder.

 

 

 

Open the web page that you need to modify.

 

 

 

Click Edit file.

 

 

 

Enter the email address and password you used to open your O365 account.

 

 

 

=======

Warning: Copy and save the original code. If you should make a mistake and have problems, you can delete the modified page and paste in the original.

=======

 

Right click and Select All / Copy the code for that page. Save the code in a text editor like Notepad.

 

 

 

Choose yes to edit in advanced mode. With all the code highlighted, Click the Edit tab, then the Replace button.

 

 

 

Clear the Find What text box. Put <img src=”/SiteImages in the Find What box.

 

Then put <img src=”/SiteImages/PhotoshopEndTableTexture_images in the Replace With box. Checkmark Find in source code. Click Replace All. (Use your own folder name).

 

 

 

All the embedded images will now have the correct path to the images in your sub folder.

 

Example:

<img src=”/SiteImages /image001.jpg” />

To

<img src=”/SiteImages /PhotoshopEndTableTexture_images /image001.jpg” />

 

Click the Save button, and the changes will be uploaded to the website.

 

 

 

Do this for all pages that you want to create image sub folders for.

 

As for the unused images in the SiteImages folder, you will have a backup for each page on your computer. This will be a back up of your original images. Then in SharePoint Designer, you can delete any image files you do not want.

 

Click SiteImages.

 

 

 

In the All Files tree, open SiteImages. The image files to delete are all below the sub folders. Choose the ones you want to delete. Hold the Shift or Ctrl key to group select images.

 

 

 

Default Website Document Library

 

Now for the Website Documents Library. All public website documents are located in the default Documents folder. You can see this if you view the html source code of your web page and search for the document addresses. In this case it a is a Zip file.

<a href=”/Documents/FlyingWing/FlyingWing_Pics.zip”>doc1</a>

If you have a lot of documents for each page, you can put related documents in sub folders using SharePoint Designer.

 

Boot up SharePoint Designer. Log in to your Office 365 website. Click the All Files folder under Site Objects. Click the Documents folder.

 

 

 

Creating Sub Folders for your Documents

 

In SharePoint Designer. Click the Folder button and name your folder.

 

 

 

From your computer, group select the folders to place in the sub folder. Then right click and Copy.

 

 

 

Go back to SharePoint Designer and open the new sub folder. Then Paste the documents. Your documents will upload to your website.

 

 

 

Log in to Office 365, go to Website / Documents. You can see the folder is in alphabetical order with all documents. Go to All Documents / Modify this View.

 

 

 

Scroll down to Sort. Click the Sort column by: Type

 

 

 

Now the new sub folders will start in alphabetical order from the top.

 

 

 

Hyperlink Documents from sub folders to your Web Page

 

On any page in the Office 365 website editor, you can Hyperlink a document from the default Documents Library using the Insert tab. Insertdoes not allow Hyper linking documents from sub folders.

 

How then do you Hyperlink documents from subfolders in your web pages? Open another page by going back to Admin Home Page tab, and click Edit Website. Then click the Documents Library.

 

Click the sub folder that was created with SharePoint Designer.

 

 

 

Choose the Document you want to hyperlink.

 

 

 

Right click and copy the path of this document:

 

****.com/Documents/FlyingWing/FlyingWing_Pics.zip

 

Go back to the web page you were editing, and right click to Create / edit hyperlink.

 

 

 

Choose Web site. Paste the entire URL path of the document.

 

 

 

 

In the O365 website editor, when you go to Insert / Hyperlink, You will not see the subfolders or their files in My documents.

 

 

 

To see your hyperlink, View your web page and hover the cursor over the link.

 

Right click a link and Copy shortcut to get a copy of the document and its path.

****.com/Documents/FlyingWing/FlyingWing_Pics.zip

 

 

If the Documents are already in the Documents Library

 

If all your documents are stuffed in the Documents folder, you probably want to organize related documents into sub folders.

 

Basically, you have to create a new folder for each web page that has documents, and move the page related documents from the main folder to the new sub folders.

 

Boot up SharePoint Designer. Log in to your Office 365 site.

 

Click Documents.

 

 

 

Click New Folder, create a sub folder.

 

 

 

In the All Files tree, open Documents. The documents to move are all below the sub folders within the main Documents folder. Choose the ones you want to move. Hold the Shift or Ctrl key to group select files. Drag the files to the new sub folder.

 

 

 

Redirect Documents

 

 

All the document addresses in the web page, which you moved, are all pointing to the main Documents folder:

 

<a href=”/Documents/FlyingWing_Pics.zip”>

 

In the web page code, you have to redirect the documents to point to your new sub folder:

 

<a href=”/Documents/FlyingWing/FlyingWing_Pics.zip”>

 

To redirect documents :

 

Open “SharePoint Designer 2010”. Log in to your O365 website. Click All Files then Pages folder.

 

 

 

In the Pages tab, open the Page you want to edit. Click Edit file.

 

 

 

Enter the email address and password you used to open your O365 account.

 

Warning: Copy and save the original code. If you should make a mistake and have problems, you can delete the modified page and paste in the original. Right click and Select All / Copy the code for that pageand save in a text editor like Notepad.

 

Choose Yes to edit in advanced mode. Click the Edit tab, then the Replace button.

 

 

 

Clear the Find What text box. Put <a href=”/Documents in the Find What box. Put

<a href=”/Documents/FlyingWing in the Replace With box (use your real subfolder name). Checkmark Find in source code. Click Replace All.

 

 

 

Click the Save button, and the changes will be uploaded to your website.

 

 

Now all hyperlinks to documents in that Office 365 page, point to the files in the new sub folder.

 

Example:

<a href=”/Documents/FlyingWing/FlyingWing_Pics.zip”>