Create a Sharepoint page from HTML file with images - html

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.

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.

From IE or from Word, save the page as a complete webpage so it creates an HTML file plus a folder with the images.
In network places, create web folder (WebDAV) pointing to Sharepoint. This way, you can access it from the file system in Explorer.
Open your new network place, navigate to the library where you want your HTML file to be, and drag-n-drop the file and folder into there.
The file then will be visible in browser, with the pictures, but the folder will be hidden.

If I have understood correctly your question. You can use this post answer to load list of images by javascript and php ->
Load list of image from folder.
Upload files to Share Point server and use that folder.
Or you can dynamically write c# code to read Share Point folder and display images.

Related

Hml file stored in OnedDrive with links to images stored in same folder not working

I'm storing html files to a OneDrive folder.
The repro is trivial.
In your onedrive, create a folder named repro.
Upload one image, for example image.jpg.
In this folder, create an html page and try to dislay the image.
Link is broken.
My page contains these 2 kind of links.
This link is not clickable (but I right click, open in new tab, it works)
<img width="100%" src="/personal/user_test_domain_com/Documents/repro/image.jpg">
This image gets broken. But if I right click, open image in new tab, it works.
Click link to open the image
It looks like Onedrive has a kind of protection that prevents displaying the images stored in onedrive. I tried to store the image in Style Assets folder as well and it didn't work.
We are developping a product where an archive of a discussion is stored as an html file in the personal onedrive of the user.
It is important that the images be displayed correctly.
What syntax should we use? Is there a way to use and iframe, an embedded component to display the images correctly in the page.
Images and html files are stored in the same location in the onedrive of the user.

Images embedded in HTML text not loading on Dropbox

I can't see the embedded images upon opening an HTML file from Dropbox, however when the folder was on the local system, the images did load properly.
Here's the HTML text that I wrote:
<img src="files/image1.png">
The HTML page shows the following sign in place of rendering the image:
Any help will be much appreciated.
you have to make sure files in the dropbox are public, not private. if it is public, then, go to the picture in the dropbox, and right-click it. click to "copy image address". and paste it to the .
hopefully, this will help
One workaround that worked for me was to sync the Dropbox folder locally. I could thus view the same HTML page in order (without making any changes).

HTML Hyperlinks and HTML Structure

I'm a mech engineer w/ no experience in HTML, doing an odd task for my boss.
I have managed to save the excel sheet (contains hyperlinks) to HTML format. However, I'd like to edit these hyperlinks within the HTML code.
I right-clicked on the test.htm document and viewed the HTML in notepad. I expected to be able to find the hyperlink at this stage.
My question is:
What is the structure of HTML files, in the sense that the hyperlink must be stored somewhere, how do I view it, preferably within notepad?
This has to do with the way excel saves to html. It generates a filename.htm which acts as a viewer, and then places data for each sheet inside a "filename_files" folder. Inside, you'll find sheetxxx.htm files (which actually contain the href you are looking for). When you open filename.htm, scripts inside it load the corresponding sheets into the page.
And this is why you won't find what you want inside the main file. Keep in mind that html is dynamic, which means that, differently from opening a static file in notepad, it can be configured to perform actions, changing what you see in the page and its code behind (Dom Explorer)
Hyperlinks in HTML are designated by the "a href" tag. For instance,
This Link Goes To Google
creates a link that says "This Link Goes To Google"

Saving HTML from website with image src intact?

I have a simple HTML file that sits on my website. I use this with <div contenteditable="true"> sections and I edit the content on the fly and send it as an HTML email.
If something goes wrong, I save the file as HTML in case I need to retrieve the message sent on any given day.
The problem is saving the HTML from the browser to you computer will save the images and change the src in the file to that location in your directory. I'd like to avoid this behavior since:
I don't want copies of the same images saving every single day.
If I need to resend I can just open up that file from my computer, copy, and send in an email easily. But if I delete them from my computer, then the new src's will point to the wrong place.
So is there a way to tell Chrome not to alter the HTML when it saves and to not save images?
Type ctrl-u on Firefox or Chrome to view html source, then copy and paste to your text editor. Save file with html extension.

Save only html when "save as" a webpage

When I save a page from my website, I will get an html file and a folder that contains all photos, css and js files.
Is there a way to save only the html file?
I've just found that if you are using Google Chrome you can choose which one you want to save from the dropdown menu 'Save as type'. If you talk about preventing the user to save your HTML - it's not possible, if the browser can see the page, the user can view the source code and save the page.
If you use Microsoft Edge browser, do the following: ctrl+s then select html only on the drop-down menu.
you will get one html file without any extra folders.