Html – Create a Sharepoint page from HTML file with images

htmlimagesharepointupload

I'm trying to create an editable page in Sharepoint. I already have the page in HTML (it's quite large) and it has many images in it. Previously I have just created a new page in sharepoint and pasted the HTML source in, the uploaded/inserted the images manually, one at a time.

Unfortunately, I am not able to do this in a reasonable amount of time since there are many images this HTML file is using.

So, I want an editable Sharepoint page that keeps the images intact from a directory that looks like this:
thepage.html

1.png

2.png

…

343.png

etc

Any ideas?

EDIT: For more clarity – this is a specifications document in HTML form, so it has a lot of text and header integrated with images. I'd like it to be converted to an actual Sharepoint Page that is editable from Sharepoint's interface.

Best Answer

Seems best here to use a low-tech solution, some HTML editing and use the best way for you to upload multiple files.

Assuming

C:\mypage
    -> \page.html
    -> \images\1.png
    -> \images\2.png
    ...
    -> \images\100.png

Via the UI

Go to a Document or Image library, and use the "Upload Multiple files/images" (this only appears on Internet Explorer)
Lets say you uploaded it to //sharepoint/myimages
Create a new content page (say an Article page, or WebPart Page with a Content Editor WebPart)
Lets say your page resides now at //sharepoint/pages/mypage.aspx
Change your html to point from <img src="images/1.png" /> to <img src="../myimages/1.png" />
Edit the HTML for your newly created page (Ribbon > Edit HTML Source), paste your HTML code

Via SharePoint Designer

Drag and Drop all the images in your desired location
repeat the HTML steps above

To replace text in bulk, SharePoint Designer, your favorite HTML editor or event Notepad can do that well using the CTRL+H menu / Edit > Find & Replace options.

NOTE: the //sharepoint address up there is the http url for your site, SO won't let me use a full fake address as a sample.

Related Solutions

Html – Should I make HTML Anchors with ‘name’ or ‘id’

According to the HTML 5 specification, 5.9.8 Navigating to a fragment identifier:

For HTML documents (and the text/html MIME type), the following processing model must be followed to determine what the indicated part of the document is.

Parse the URL, and let fragid be the <fragment> component of the URL.

If fragid is the empty string, then the indicated part of the document is the top of the document.

If there is an element in the DOM that has an ID exactly equal to fragid, then the first such element in tree order is the indicated part of the document; stop the algorithm here.

If there is an a element in the DOM that has a name attribute whose value is exactly equal to fragid, then the first such element in tree order is the indicated part of the document; stop the algorithm here.

Otherwise, there is no indicated part of the document.

So, it will look for id="foo", and then will follow to name="foo"

Edit: As pointed out by @hsivonen, in HTML5 the a element has no name attribute. However, the above rules still apply to other named elements.

Javascript – Strip HTML from Text JavaScript

If you're running in a browser, then the easiest way is just to let the browser do it for you...

function stripHtml(html)
{
   let tmp = document.createElement("DIV");
   tmp.innerHTML = html;
   return tmp.textContent || tmp.innerText || "";
}

Note: as folks have noted in the comments, this is best avoided if you don't control the source of the HTML (for example, don't run this on anything that could've come from user input). For those scenarios, you can still let the browser do the work for you - see Saba's answer on using the now widely-available DOMParser.

Best Answer

Related Solutions

Html – Should I make HTML Anchors with ‘name’ or ‘id’

Javascript – Strip HTML from Text JavaScript

Related Topic